How to use callback with useState hook in react

How to use callback with useState hook in React

React’s useState hook is a powerful tool for managing state in functional components. It allows us to declare state variables and update them within the functional component’s body. However, sometimes we may need to perform additional logic after the state has been updated. This is where using a callback with useState can be helpful.

By default, the useState hook does not provide a way to execute a callback function after the state has been updated. However, we can achieve this behavior by creating a custom hook that wraps the useState hook and adds the callback functionality.

Here’s an example of how to use a callback with useState:

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

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

  useEffect(() => {
    if (callbackRef.current) {
      callbackRef.current(state);
      callbackRef.current = null;
    }
  }, [state]);

  const setStateWithCallback = (newState, callback) => {
    callbackRef.current = callback;
    setState(newState);
  };

  return [state, setStateWithCallback];
}

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

  const handleClick = () => {
    setCount(count + 1, () => {
      console.log('Count updated!');
    });
  };

  return (
    
      Count: {count}
      
    
  );
}

export default MyComponent;

In the above example, we create a custom hook called useStateWithCallback that wraps the useState hook. It uses a useRef to store the callback function and an useEffect hook to execute the callback after the state has been updated.

In the MyComponent component, we use the useStateWithCallback hook to declare a state variable called count. When the button is clicked, we call setCount with the new state value and the callback function. The callback function is executed after the state has been updated.

By using a callback with useState, we can perform additional logic or side effects after the state has been updated. This can be useful in scenarios where we need to synchronize state changes with other parts of our application or perform actions based on the updated state.

Remember to import the necessary dependencies and use the useStateWithCallback hook in your components to take advantage of this functionality.

That’s it! You now know how to use a callback with the useState hook in React. Happy coding!

How to use callback with useState hook in react