How to Use `setState` Callback on React Hooks

React Hooks provide a powerful way to manage state in functional components. One of the most commonly used hooks is useState, which allows you to declare state variables and update them. However, unlike the traditional this.setState method in class components, the setState function returned by useState does not accept a callback as its second argument. In this blog post, we will explore different approaches to achieve the same functionality using a callback with setState in React Hooks.

Approach 1: Using the useEffect Hook

The useEffect hook allows you to perform side effects in functional components. By leveraging this hook, we can mimic the behavior of the setState callback in class components.

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Callback function to be executed after state update
    console.log('Count updated:', count);
  }, [count]);

  return (
    

      Count: {count}
       setCount(count + 1)}>Increment
    
  );
}
  

In the above example, we define a state variable count and a function setCount to update it. Inside the useEffect hook, we can access the updated value of count and perform any necessary actions.

Approach 2: Using a Custom Hook

Another approach is to create a custom hook that encapsulates the logic of updating the state and executing a callback function.

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

function useStateWithCallback(initialState) {
  const [state, setState] = useState(initialState);

  useEffect(() => {
    if (typeof callback === 'function') {
      callback(state);
    }
  }, [state]);

  return [state, setState];
}

function Example() {
  const [count, setCount] = useStateWithCallback(0);

  const handleIncrement = () => {
    setCount(count + 1, updatedCount => {
      console.log('Count updated:', updatedCount);
    });
  };

  return (
    

      Count: {count}
      Increment
    
  );
}
  

In this approach, we define a custom hook called useStateWithCallback that wraps the useState hook. It takes an initial state as a parameter and returns an array with the state value and a modified setState function. Inside the custom hook, we use useEffect to execute the callback function whenever the state changes.

Conclusion

Although the setState function returned by useState does not directly support a callback, we can achieve the same functionality using the useEffect hook or by creating a custom hook. Both approaches allow us to execute code after the state has been updated, providing a similar behavior to the setState callback in class components.