close

[Solved] useState set method not reflecting change immediately

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn useState set method not reflecting change immediately in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve useState set method not reflecting change immediately Error ?

  1. How To Solve useState set method not reflecting change immediately Error?

    To Solve useState set method not reflecting change immediately Error You can solve it by using the useRef hook but then it's will not re-render when it' updated. I have created a hooks called useStateRef, that give you the good from both worlds. It's like a state that when it's updated the Component re-render, and it's like a “ref” that always have the latest value.

  2. useState set method not reflecting change immediately

    To Solve useState set method not reflecting change immediately Error You can solve it by using the useRef hook but then it's will not re-render when it' updated. I have created a hooks called useStateRef, that give you the good from both worlds. It's like a state that when it's updated the Component re-render, and it's like a “ref” that always have the latest value.

Solution 1

Much like setState in Class components created by extending React.Component or React.PureComponent, the state update using the updater provided by useState hook is also asynchronous, and will not be reflected immediately.

Also, the main issue here is not just the asynchronous nature but the fact that state values are used by functions based on their current closures, and state updates will reflect in the next re-render by which the existing closures are not affected, but new ones are created. Now in the current state, the values within hooks are obtained by existing closures, and when a re-render happens, the closures are updated based on whether the function is recreated again or not.

Even if you add a setTimeout the function, though the timeout will run after some time by which the re-render would have happened, the setTimeout will still use the value from its previous closure and not the updated one.

setMovies(result);
console.log(movies) // movies here will not be updated

If you want to perform an action on state update, you need to use the useEffect hook, much like using componentDidUpdate in class components since the setter returned by useState doesn’t have a callback pattern

useEffect(() => {
    // action on update of movies
}, [movies]);

As far as the syntax to update state is concerned, setMovies(result) will replace the previous movies value in the state with those available from the async request.

However, if you want to merge the response with the previously existing values, you must use the callback syntax of state updation along with the correct use of spread syntax like

setMovies(prevMovies => ([...prevMovies, ...result]));

Solution 2

  • read the value in render function (not inside nested functions): useEffect(() => { setMovies(result) }, []) console.log(movies)
  • add the variable into dependencies (and use the react-hooks/exhaustive-deps eslint rule): useEffect(() => { setMovies(result) }, []) useEffect(() => { console.log(movies) }, [movies])
  • use a mutable reference (when the above is not possible): const moviesRef = useRef(initialValue) useEffect(() => { moviesRef.current = result console.log(moviesRef.current) }, [])

Solution 3

You can solve it by using the useRef hook but then it’s will not re-render when it’ updated. I have created a hooks called useStateRef, that give you the good from both worlds. It’s like a state that when it’s updated the Component re-render, and it’s like a “ref” that always have the latest value.

See this example:

var [state,setState,ref]=useStateRef(0)

It works exactly like useState but in addition, it gives you the current state under ref.current

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment