Skip to main content

Timeline for answer to The useState set method is not reflecting a change immediately by Shubham Khatri

Current License: CC BY-SA 4.0

Post Revisions

29 events
when toggle format what by license comment
Jan 14 at 21:00 comment added idontcare69 Guys, it works. In order to update the value of a variable immediately, all you need to do is use the useEffect with the value you want to update in the [], right after the function you called from the onChange (or onClick, onMouseLeave, whatever it is). function SettingValue(event){ setValue(event.target.value); }; useEffect(function() { console.log(Value); }, [Value] );
Oct 13, 2023 at 17:37 comment added Smart Coder I finally ended using let variable to achieve the change I wanted to see.
Mar 2, 2023 at 10:20 comment added tribal This only worked for me after I added a condiitonal like so, {movies.length > 0 ? <MovieList movies={movies} /> : "No Movie(s) found"}. The state was just not triggering a render otherwise
May 16, 2022 at 16:18 history edited Bergi CC BY-SA 4.0
added 53 characters in body
Mar 12, 2022 at 8:03 history edited Nguyễn Văn Phong CC BY-SA 4.0
added 4 characters in body
Jan 11, 2022 at 21:46 comment added vins @ShubhamKhatri What if I have to use the updated data soon after i setState in functional component. eg. fetch(url) .then(data => data.json()) .then(res => { setCityKey(res.Key); callXYZ(city) }) //<--here, i am getting null for 'city' FYI i've also tried using useEffect as told }) .catch(err => console.log('err', err))
Dec 18, 2021 at 17:35 comment added Tunn There's an easy way to do this in a form submit handler (or any event handler) stackoverflow.com/a/70405577/5823517 without useEffect
Jun 8, 2021 at 10:44 comment added Shubham Khatri @geneb. the change between states won't be slow. It in fact won't even be visible to the naked eye.
Jun 7, 2021 at 17:47 comment added gene b. So what do you do if you need a change to be immediate? Like for example, when I click the Submit button, I need to immediately show a spinner, rather than wait for setLoading and then check loading on render.
Mar 7, 2021 at 23:44 comment added etoxin @da45 I found cloning the previous state in the setState hook fixed this. Like the above example.
Feb 18, 2021 at 13:30 comment added Vinoth Smart const [timeSlotList, setTimeSlotList] = useState(""); This Working for me .... ` setTimeSlotList(() => [...timeSlotTime]);
Feb 16, 2021 at 18:20 comment added Praveen M P @ShubhamKhatri What if it's not an object of values. just single value
Sep 29, 2020 at 12:08 history edited fabrik CC BY-SA 4.0
Fixed a typo, formatting
Sep 4, 2020 at 9:17 comment added Oliver D @ShubhamKhatri hey, I use the spread way to merge prev with a new response but it does not work for me, here's a main question, can you please check it?
S Aug 11, 2020 at 0:07 history suggested E. Reiner CC BY-SA 4.0
Improved punctuation.
Aug 10, 2020 at 15:51 review Suggested edits
S Aug 11, 2020 at 0:07
May 19, 2020 at 9:17 history edited Shubham Khatri CC BY-SA 4.0
deleted 9 characters in body
May 12, 2020 at 9:21 history edited Shubham Khatri CC BY-SA 4.0
added 2 characters in body
May 12, 2020 at 9:16 history edited Shubham Khatri CC BY-SA 4.0
added 2 characters in body
May 12, 2020 at 7:08 history edited Shubham Khatri CC BY-SA 4.0
added 381 characters in body
May 12, 2020 at 7:07 comment added Shubham Khatri @HMR I understand what you are saying. Maybe i didn't explain it properly in my post. I did write that the value will be updated only in the next render. I will update my psot
May 12, 2020 at 7:02 comment added HMR It is logging the wrong result because you are logging a stale closure not because the setter is asynchronous. If async was the problem then you could log after a timeout, but you could set a timeout for an hour and still log the wrong result because async isn't what is causing the problem.
Mar 31, 2020 at 20:07 comment added Mihir setMovies(prevMovies => ([...prevMovies, ...result])); worked for me
Nov 20, 2019 at 19:26 comment added Aprillion please note that while the advice is very good, the explanation of the cause can be improved - nothing to do with the fact whether or not the updater provided by useState hook is asynchronous, unlike this.state that could have been mutated if this.setState was synchronous, the Closure around const movies would remain the same even if useState provided a synchronous function - see the example in my answer
Aug 20, 2019 at 3:10 comment added RA. useEffect might not be the best solution though, since it doesn't support asynchronous calls. So, if we would like to make some asynchronous validation on movies state change, we have no control over it.
Apr 19, 2019 at 16:42 comment added da45 Hi, what about calling useState inside a form submit handler ? I am working on validating a complex form, and I call inside submitHandler useState hooks and unfortunately changes are not immediate !
Jan 14, 2019 at 6:16 history edited Shubham Khatri CC BY-SA 4.0
added 301 characters in body
Jan 7, 2019 at 6:53 vote accept Pranjal
Jan 7, 2019 at 6:15 history answered Shubham Khatri CC BY-SA 4.0
toggle format