How to use/access recently updated state, using React Hooks

I just started learning about hooks, and I’m curious how I can access a recently updated state? See code below.

const [name, setName] = useState('jimothy');

  function handleClick() {
    setName(() => 'timothy');
    console.log(name);
    consoleName();
  }

  function consoleName() {
    console.log(name);
  }

I have the function handleClick() attached to a button. Both consoles in this circumstance, on the first click, still console jimothy. I’ve been doing some reading and as I understand it, it’s due to how React batches the information.

I read a few articles about using useEffect to use the most updated state, I was curious if that was the simplest/only way to do it? seemed a little easier in Class Components using setState() to accomplish this, but maybe I’m missing something?

>Solution :

In React, state updates are asynchronous, and when you call setState (or in your case, setName for a functional component using hooks), React may not immediately update the state variable. This is why you are seeing the old value of name in your console.log statements. React batches state updates for performance reasons.

To access the recently updated state in a functional component using hooks, you have a few options:

1. Using useEffect: You can use the useEffect hook to perform actions after the state has been updated. Here’s how you can do it:

const [name, setName] = useState('jimothy');

function handleClick() {
  setName('timothy');
}

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

By passing [name] as the second argument to useEffect, you ensure that the effect runs whenever the name state variable changes.

2. Using a Callback Function with setState: You can also pass a callback function to setState if you need to perform an action using the updated state immediately:

 const [name, setName] = useState('jimothy');
    
    function handleClick() {
      setName((prevName) => {
        console.log(prevName); // This will log the old value
        return 'timothy';
      });
    }

When you pass a callback function to setName, React will provide the previous state as an argument to that function.