state is not updated in functional component

Question

I'm making code editor, default language code should change, when user change language from dropdown options.

code

setCode state is not at all updated on the screen, but when I checked logs it was showing code of previous state.

output

Answer 1

Why React does not immediately update state The state update is queued for the next render. This is done to avoid multiple re-renders on every state change if you have multiple states in your component. Once all the states are updated the re-render will follow.

**But what if you want to perform some operation on the value before the next re-render ** You can force a state update by passing a function to setState. So instead of this:

setLanguage(s1)

Try this:

setLanguage(l => l = s1)

You can read more in the official React docs here

Edit: setState is asynchronous meaning setLanguage() is put in a queue which is executed AFTER it is done with everything else. You are console logging the value of s1 which is correctly received. Try console logging language and you'll see that it's still not updated. Try the solution above to force state update.