How to use `setState` callback on react hooks

How to Use setState Callback on React Hooks 💡🔗🎣

React hooks have revolutionized the way we manage state in functional components. The introduction of the useState hook allows us to easily set and update our component's state. However, if you're coming from a class component background, you might be wondering how to replace the setState callback pattern that you're used to. Fear not! In this blog post, we'll explore how to replicate the functionality of the setState callback using React hooks, specifically the useState hook. Let's dive in! 🏊‍♂️🌊

The Challenge ⚔️

So here's the challenge. Imagine you have the following code snippet in a class component:

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

In this example, we're updating the state using setState and providing a callback function that executes after the state has been updated. This can be useful for performing some additional logic that depends on the updated state.

Now, if you're using functional components and the useState hook, you might be wondering how to achieve the same functionality without the setState callback. 🤔

The Solution 💡

To replicate the behavior of the setState callback in functional components, we can combine the useState and useEffect hooks. Here's how it can be done:

const [state, setState] = useState({ name: "Michael" });

useEffect(() => {
  console.log(state);
}, [state]);

Let's break it down:

1. First, we initialize our state using the useState hook. In this example, we're setting the initial state to { name: "Michael" }.

2. Next, we use the useEffect hook to define a function that will be called after every render cycle. This function will log the updated state.

3. Inside the useEffect function, we pass an array [state] as the second argument. This tells React to only execute the effect when the state value has changed.

And that's it! 🎉 You have successfully replicated the behavior of the setState callback using React hooks.

Alternative Approach ⚙️

If you're looking for a more concise way to achieve the same result, you can use the arrow function syntax when calling the setState function provided by the useState hook. Here's how it can be done:

const [state, setState] = useState({ name: "Michael" });

const updateState = () => {
  setState((prevState) => {
    console.log(prevState);
    return prevState;
  });
};

useEffect(() => {
  updateState();
}, [state]);

In this approach, we define a separate function called updateState that calls the setState function with an arrow function. This arrow function receives the previous state as an argument, allowing us to perform any necessary logic before updating the state. We then call this updateState function inside the useEffect hook.

Let's Recap! 📝

To summarize, if you're using React hooks and want to replicate the functionality of the setState callback from class components, you can combine the useState and useEffect hooks. Alternatively, you can use the arrow function syntax provided by the setState function to achieve a similar effect in a more concise manner.

Now, it's your turn to give it a try! 😄 Share your thoughts and experiences in the comments below. And if you found this blog post helpful, don't forget to share it with your fellow React enthusiasts! 🚀💬🔗

Happy coding! 💻🎉