CODEWITHSUNDEEP
reactjsreact-hooks
Asim K T
Asim K T

Reputation: 18164

Reading component state just after setting when using useState hook in react

This console.log is not working: It'll just print the previous state value as set is async.

const SomeCompo = () => {
  const [count, set] = useState(0);
  const setFun = () => {
    console.log(count);
    set(count + 1);
    console.log(count);    
  }
  return <button onClick={setFun}>count: {count}</button>
}

I had to read the count in the render itself:

const SomeCompo = () => {
  const [count, set] = useState(0);
  console.log(count);
  const setFun = () => {
    set(count + 1);
  }
  return <button onClick={setFun}>count: {count}</button>
}

Is there a better way to read the value as I don't want to console for every render.

Upvotes: 3

Views: 4812

Answers (3)

Subhendu Kundu
Subhendu Kundu

Reputation: 3856

I would suggest not to use setInterval. I would do something like useEffect. This function will be called each time you do a setState. Just like you had callback after setState. Pass the count state in the array, it will watch only for the count change in the state and console your count.

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

Also if you dont need to rerender your other components, you might wanan use useMemo and useCallback. https://www.youtube.com/watch?v=-Ls48dd-vJE

Here to more read: https://reactjs.org/docs/hooks-effect.html

Upvotes: 2

Alvaro
Alvaro

Reputation: 9682

The way to get a state value is to use useEffect and use the state as a dependency. This means that when we change a value the render cycle will finish and a new one will start, then useEffect will trigger:

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

If you would need to read the value in the same cycle as it is changed a possibility could be to use the useState set function. This shows the latest value just before updating it:

setValue( latest_value => {
    const new_value = latest_value + 1;

    console.log(new_value);

    return new_value;
} );

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20765

You can use useEffect for this,

useEffect(() => {
   console.log(count);
}, [count]) //[count] is a dependency array, useEffect will run only when count changes.

Upvotes: 9

Related Questions