React hooks have revolutionized the way we write functional components in React. With the introduction of hooks, we can now use state and other React features without writing a class. One common scenario we encounter while working with React hooks is executing asynchronous code when the state updates. In this blog post, we will explore different approaches to achieve this.

Using useEffect Hook

The useEffect hook allows us to perform side effects in functional components. We can use it to execute asynchronous code when the state updates. Here’s an example:

{`import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data asynchronously
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [data]);

  return (
    

      
My Component
      

        {data.map(item => (
          
{item.name}
        ))}
      
    
  );
}`}

In the above example, we define a functional component called MyComponent. We use the useState hook to create a state variable called data, which is initially an empty array. We also use the useEffect hook to fetch data from an API endpoint when the data state updates. The useEffect hook takes a callback function as its first argument, which is executed after the component is rendered. We pass [data] as the second argument to useEffect, which means the effect will only run when the data state updates.

Using a Custom Hook

Another approach to executing async code on state update is by using a custom hook. Custom hooks allow us to reuse logic across multiple components. Here’s an example:

{`import React, { useState } from 'react';

function useAsyncEffect(effect, dependencies) {
  useState(() => {
    effect();
  }, dependencies);
}

function MyComponent() {
  const [data, setData] = useState([]);

  useAsyncEffect(async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }, [data]);

  return (
    

      
My Component
      

        {data.map(item => (
          
{item.name}
        ))}
      
    
  );
}`}

In the above example, we define a custom hook called useAsyncEffect, which takes a callback function and dependencies as arguments. Inside the custom hook, we use the useState hook to execute the effect function when the dependencies change. We then use the custom hook in our MyComponent component to fetch data asynchronously when the data state updates.

These are two common approaches to executing async code on state update with React hooks. Choose the one that suits your specific use case and enjoy the benefits of writing functional components with React hooks!