Forem: Borzoo Moazami

How to validate fetched response

Borzoo Moazami — Thu, 18 Sep 2025 09:21:19 +0000

What's the problem

We usually check what the user sends to our server when developing a form in front-end, but we might overlook if the data we received is incompatible with what we expected.

With the help of the Yup, we can make sure everything runs as we expected, and our backend service, provides the data we requested correctly with the schema we wanted.

Yup

According to the Yup documentation :

Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformation.

So with the Yup, we can define how an object should look, change a value to match that object, and validate if an object is identical to our object or not.

Another important thing about the above definition worth mentioning is the Yup act in the runtime.

Why API Response Validation is Important?

These are some reasons to demonstrate why it is important to validate the responses we get from the server:

Protecting against breaking changes: protect the client from the backend breaking changes
Type safety: while Typescript helps us use correct data types before we actually run our code, runtime validation helps us to be sure the actual data matches our expectations
Better error handling: validation helps us catch any inconsistency in data and handle situations gracefully, instead of leaving users with unexpected runtime errors
Documentation: the schema definitions serve as living documentation in our front-end codebase

How to use YUP to validate our API Responses

We can simply define a base response schema for multiple endpoints, then extend our schema for each endpoint accordingly:

For example:

const generalResponseSchema = Yup.Object().shape({
    status: Yup.string().oneOf(['success', 'error']).required(),
    message: Yup.string(),
    data: Yup.mixed() // Will be refined in specific endpoints
})

Create endpoint-specific schemas:

const userResponseSchema = generalResponseSchema.shape({
    data: Yup.object().shape({
        id: Yup.string().required(),
        username: Yup.string().required(),
        profile: Yup.string().shape({
            firstName: Yup.string(),
            lastName: Yup.string(),
        })
    })
})

We can make a wrapper function to validate our responses in our application:

export async function validateAPIResponse(schema, response) {
    try {
        const validatedResponse = schema.validate(response, {
            // Skip coercion and transformation attempts
            strict: true,
            // Collect all errors instead of stopping at first failure
            abortEarly: false,
        })

        return {
            isValid: true,
            data: validatedResponse,
            errors: null,
        }
    } catch (error) {
        return {
            isValid: false,
            data: null,
            errors: error.errors,
        }
    }
}

Now let's use our validation function and our sample schema ( userResponseSchema ):

async function fetchUserData(userId) {
    try {
        const response = await fetch(`api/users/${userId}`);
        const data = await response.json(); 

        const validation = await validateAPIRResponse(data, userResponseSchema);

    return validation.data
    } catch(error) {
        // Handle errors appropriately
        throw error;
      }
}

Organized and type-safe

One good approach we could take is to create a sample.schema.ts and locate the schema definition there.

There is also the possibility of inferring the schema type and using it in our app, importing InferType

const userResponseSchema = Yup.object().shape({
    id: Yup.string().required(),
    username: Yup.string().required(),
    profile: Yup.string().shape({
        firstName: Yup.string(),
        lastName: Yup.string(),
    })
})

export type User = InferType<typeof userResponseSchema>

And this is how easy it is to check if the fetched response from our backend services is correct.

References

Validating API Response with Yup
Yup repo
Response validation with Yup

useTransition !== debounced functions

Borzoo Moazami — Tue, 22 Jul 2025 15:03:41 +0000

useTransition

useTransition is a React Hook that lets you render a part of the UI in the background.

This is how the official React documentation defines the hook.

In React, we can mark certain state updates as transitions.

When we talk about the "background," we’re referring to asynchronous tasks—those that are handled by different threads or workers and later passed to the event loop to be executed on the main call stack.

How to Use It

The useTransition hook returns an array with two values:

isPending – a boolean indicating whether the transition is in progress
startTransition – a function used to wrap the state update logic (called an action)

By convention, the callback you pass to startTransition is often named action or ends with the word Action.

Example:

function SubmitButton({ submitAction }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      disabled={isPending}
      onClick={() => {
        startTransition(async () => {
          await submitAction();
        });
      }}
    >
      Submit
    </button>
  );
}

By using the startTransition function, we define actions that trigger state changes.

This lets React manage them in a non-blocking way, improving the user experience—particularly by reducing unnecessary re-renders and smoothing out rapid user interactions.

For instance, when a user clicks to switch tabs but quickly selects another one, React can cancel the first transition and focus on rendering the most recent action instead.

Once the transitions complete, React will update the UI with the final state resulting from those actions.

useTransition ≠ Debounce

It's important to note that useTransition is not the same as debouncing.

A debounced function delays execution until a fixed period of inactivity has passed.

In contrast, useTransition doesn't wait—it starts the operation immediately but allows React to interrupt it if new updates come in.

Why is this important? For example, consider when we want to use one of these approaches to handle a request:

useTransition executes a request each time a change occurs but may cancel any ongoing request if a newer update arrives.
A debounced function runs only after the debounce delay has passed, ignoring intermediate triggers.

So while both help manage rapid updates, debounce waits for the final input, while useTransition handles each one but prioritizes the most recent.

ps: beautiful cover image by Wilhelm Gunkel on Unsplash

What is forwardRef in React and how to use it properly?

Borzoo Moazami — Wed, 17 Apr 2024 13:04:06 +0000

There are times when we want to exert control over a specific HTML element in a React component from its parent.

This is where the forwardRef function comes in handy, granting us the ability to directly pass a ref to a child component.

It's worth mentioning that forwardRef is a helper tool for passing refs to components. Therefore, to use it properly in our app, we should follow the rules and patterns applicable to refs. In this article, we'll primarily cover refs in React before proceeding to forwardRef.

Hope you enjoy the article.

Prerequisite

Node and npm installed on your machine
Fundamental knowledge of ReactJS
Typescript ( good to know )

Although I will use TypeScript in the project, it is not essential to learn it for this article.

I'll also be using Tailwind CSS for styling. While it's not mandatory to learn it beforehand, I highly suggest you do so.

Table of content

TL;DR
What is ref?
- useRef hook
- Using ref to store HTML elements reference
- How to change focus state of an input with ref?
- Ref rethink: Avoiding overuse refs for better performance
forwardRef
- Creating a custom input element
- Use forwardRef to accept ref as a prop in our CustomInput
- Pass ref to our CustomInput component
Summary

TL;DR

To pass a ref to a child component, we can utilize the forwardRef utility function by passing the child component to it, as demonstrated below:



export const ChildComponent = forwardRef<Ref, ChildComponentProps>((props, ref) => {
  return (
    <div>
      <input ref={ref} />
    </div>
  );
});

What is ref?

As its name suggests, a ref is indeed a reference. The React documentation explains it best on this this page, as shown below:

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.

In fact, refs help us store, update, and retrieve specific data without using state and triggering re-renders.

One of the most useful uses of refs is storing references to HTML elements, similar to using IDs in vanilla JavaScript.

useRef hook

To utilize refs in our components, we employ a React hook called useRef.

By invoking it at the top level of our component and assigning its value to a variable, we effectively create a space to store the desired data.

Although we can allocate an initial value to this space.



import { useRef } from "react";

function App() {
  // Create a ref, name it buttonData, define its type as string or null, set its initial value to null
  const buttonData = useRef<string | null>(null);

  // Access ref value with current property of the ref
  const printRef = () => {
    console.log(buttonData.current);
  };

  // Access ref value with current property of the ref and set it to Sample data
  const assignValueToRef = () => {
    buttonData.current = "Sample data";
  };

  // Access ref value with current property of the ref and set it to null
  const resetRefValue = () => {
    buttonData.current = null;
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <div className="flex flex-col items-center gap-2">
        <button
          className="bg-gray-400 hover:bg-gray-200 text-gray-800 p-2 rounded-sm font-semibold"
          onClick={assignValueToRef}
        >
          Assign value
        </button>
        <button
          className="bg-gray-400 hover:bg-gray-200 text-gray-800 p-2 rounded-sm font-semibold"
          onClick={resetRefValue}
        >
          Reset value
        </button>
        <button
          className="bg-gray-400 hover:bg-gray-200 text-gray-800 p-2 rounded-sm font-semibold"
          onClick={printRef}
        >
          Print ref to the console
        </button>
      </div>
    </div>
  );
}

export default App;

You can see the result in the screenshot bellow:

I clicked on the Print button
I clicked on the Assign button
I clicked on the Print button
I clicked on the Reset button
I clicked on the Print button again

Using ref to store HTML elements reference

First, why do we need to store references to elements?

With the reference at our fingertips, we can perform various actions on the desired element, such as focusing on an input or scrolling it to the view.

Also third party libraries sometimes want a reference to an element to use them, take React DnD as an example. This library helps you to have drag and drop functionality in your app.

This library needs to pass a ref as a prop to the component you want to assign as drop zone. According to This ref the library will take action when you drop something onto a div for example.

How to change focus state of an input with ref?

To accomplish this, we could simply create a ref and then pass it to the element we want to focus on (an input, in our case) as a prop.



import { useRef } from "react";

function App() {
  // Create a ref to store element reference and define its type as HTMLInputElement
  const inputRef = useRef<HTMLInputElement>(null);

  // Focus on the input element
  const focusOnInput = () => {
    inputRef?.current?.focus();
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen gap-4">
      <button
        onClick={focusOnInput}
        className="bg-gray-500 text-gray-900 hover:bg-gray-300 p-2 rounded-sm"
      >
        Focus on input
      </button>
      {/* Passing ref as prop to input element, notice that we pass the ref itself and not the current */}
      <input
        ref={inputRef}
        className="px-2 py-3 rounded-sm bg-gray-200 text-gray-900 outline-none focus:outline-3 focus:outline-lime-600"
        type="text"
        placeholder="Focus on me..."
      />
    </div>
  );
}

export default App;

Ref rethink: Avoiding overuse refs for better performance

By reading the article up to this point, you might be wondering, "Why don't I use refs instead of state? What restricts me here?"

Using refs instead of state does offer advantages in certain situations, particularly when direct manipulation of DOM elements is necessary. However, there are scenarios in which you shouldn't use refs.

With refs, we store data between renders and across different parts of a component's lifecycle. It's beneficial to have this capability to address certain issues.

However, it's essential to respect React's reactivity and the underlying structures to achieve this behavior. When using refs and updating the value of a ref, we mutate stored data with relatively few limitations. This can potentially lead to inconsistencies in our application data.

React insists, do not write or read ref.current during rendering:

Do not write or read ref.current during rendering.

React expects that the body of your component behaves like a pure function:

If the inputs (props, state, and context) are the same, it should return exactly the same JSX.

Calling it in a different order or with different arguments should not affect the results of other calls.

Reading or writing a ref during rendering breaks these expectations.

Accessing a ref during the render process violates React's purity rule, as it introduces side effects into what should be a deterministic rendering process. Let's break down how this violation occurs:

Impure Functionality: When React renders a component, it expects that the component's render function behaves like a pure function. A pure function always produces the same output for the same input and has no side effects. If a component accesses a ref during rendering, it introduces side effects because the value of the ref can change independently of the component's inputs (props, state, context).
Non-deterministic Behavior: Reading or writing to a ref during render introduces non-deterministic behavior into the component. This means that the component's output can vary depending on the current state of the ref, even if the props, state, and context remain the same. Non-deterministic behavior makes it difficult to reason about how a component will behave and can lead to bugs and inconsistencies in your application.
Unpredictable Rendering: React relies on the purity of component functions to optimize rendering performance. If a component's render function is impure due to reading or writing to a ref, React cannot guarantee that the component's output will remain consistent between renders. This can lead to unnecessary re-renders and performance issues in your application.

To elaborate further on the third point, React utilizes memoization techniques to optimize rendering by caching the result of a component's render function and reusing it if the component's inputs haven't changed.

However, if a component accesses a ref during rendering, React cannot accurately determine if the component's output has changed. This uncertainty results in unnecessary re-renders, even when the component's inputs remain the same.

forwardRef

Consider a scenario where you've written a custom input component with a label. You import it like other components and modules in your file and place it somewhere in the return value of a functional component.

Now, you want to focus on the input element inside that component. Based on what we've learned, we should pass a ref to the input element and call the focus() method of the current property of the ref when clicking the button.

However, the input element is inside that child custom component we imported, and we don’t have direct access to it.

Our solution lies in the hands of forwardRef.

As its name suggests, forwardRef forwards the ref to a component from its direct parent. Essentially, it adds the possibility for a child component to access the ref.

Let's see forwardRef in action.

Creating a custom input element

Let's start by creating a custom input component that consists of a label and a simple HTML input element. We'll then place it below a button in our App component.



// CustomInput.tsx

import { InputHTMLAttributes } from "react";

// Define type of receiving props, our props should be input element attributes and a custom label prop.
type CustomInputProps = InputHTMLAttributes<HTMLInputElement> & {
  label?: string;
};

export default function CustomInput({ label, ...rest }: CustomInputProps) {
  const { id } = rest;

  return (
    <div className="flex gap-3 items-center w-full">
      <label htmlFor={id}>{label}</label>
      <input
        className="px-2 py-3 rounded-sm bg-gray-200 text-gray-900 outline-none focus:outline-3 focus:outline-lime-600 flex-grow"
        {...rest}
      />
    </div>
  );
}

Let's import the CustomInput component into the App component and pass any necessary props:



// App.tsx

import CustomInput from "./components/CustomInput";

function App() {
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <div className="w-1/2 flex flex-col gap-3 items-center">
        <button className="bg-gray-500 text-gray-900 hover:bg-gray-300 w-full p-2 rounded-sm">
          Focus
        </button>
        <CustomInput
          label="Custom Input"
          id="custom-input"
          name="custom-input"
          type="text"
          placeholder="Type something"
        />
      </div>
    </div>
  );
}

export default App;

Use forwardRef to accept ref as a prop in our CustomInput

If you were to pass a ref to our CustomInput component in its current state, you would immediately encounter the following error in your console:

To enable the component to receive the ref object, we need to modify our CustomInput to create this possibility in our component to get the ref object:



// CustomInput.tsx

import { InputHTMLAttributes, forwardRef } from "react";

type CustomInputProps = InputHTMLAttributes<HTMLInputElement> & {
  label?: string;
};

// Define ref type the component accepts
type Ref = HTMLInputElement;

// Give previous input component to the forwardRef utility function as parameter
export const CustomInput = forwardRef<Ref, CustomInputProps>(
  ({ label, ...rest }, ref) => {
    const { id } = rest;

    return (
      <div className="flex gap-3 items-center w-full">
        <label htmlFor={id}>{label}</label>
        {/* Pass ref as prop to the input */}
        <input
          ref={ref}
          className="px-2 py-3 rounded-sm bg-gray-200 text-gray-900 outline-none focus:outline-3 focus:outline-lime-600 flex-grow"
          {...rest}
        />
      </div>
    );
  }
);

// Export return value of the forwardRef function as default export
export default CustomInput;

React forwardRef function accepts a render function, as you can see we pass it as an arrow function.

The render function itself has the following structure:

Parameters:

props
ref

Returns:

Based on React documentation:

forwardRef returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by forwardRef is able to take a ref prop.

Typescript note: to define your component type, you should follow this structure:


 const Component = forwardRef<Ref,PropsType>(props,ref)

Ref: type of the ref we want to pass to the component

PropsType: Type of the props the component accepts

Pass ref to our CustomInput component

Now that our component is capable of accepting a ref, we should pass our desired ref to it:



// App.tsx

import { useRef } from "react";
import CustomInput from "./components/CustomInput";

function App() {
  // Define the ref with the desired type
  const inputRef = useRef<HTMLInputElement>(null);

  // Declare a function to focus on the input element
  const focusOnInput = () => {
    inputRef.current?.focus();
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <div className="w-1/2 flex flex-col gap-3 items-center">
        <button
          onClick={focusOnInput}
          className="bg-gray-500 text-gray-900 hover:bg-gray-300 w-full p-2 rounded-sm"
        >
          Focus
        </button>
        {/* Pass the ref to the component */}
        <CustomInput
          ref={inputRef}
          label="Custom Input"
          id="custom-input"
          name="custom-input"
          type="text"
          placeholder="Type something"
        />
      </div>
    </div>
  );
}

export default App;

As you can see, I also declared a function to focus on the input element and passed it as an onClick handler to the button.

Here is the result:

Summary

In this article, we explored the concept of refs in React, one of its amazing and useful features.

Refs are references to data similar to states, but unlike states, we can mutate them. They allow us to store references to HTML elements and access them to perform actions like focusing on or scrolling them into view.

Third-party libraries often require access to an element, necessitating the passing of refs to them. Refs act similarly to regular HTML id attribute.

To use refs properly and maintain our application's performance, we should adhere to certain patterns, as discussed in the article.

When we need to pass a ref to a component, we utilize a React utility function called forwardRef. The return value of this function is JSX that we can use in our app, allowing us to pass our desired ref as a prop.

Thank you for reading, and I hope you found this article helpful.