In ReactJS, why does `setState` behave differently when called synchronously?

by

Here’s what’s happening.

Synchronous

  • you press X
  • input.value is ‘HelXlo’
  • you call setState({value: 'HelXlo'})
  • the virtual dom says the input value should be ‘HelXlo’
  • input.value is ‘HelXlo’
    • no action taken

Asynchronous

  • you press X
  • input.value is ‘HelXlo’
  • you do nothing
  • the virtual DOM says the input value should be ‘Hello’
    • react makes input.value ‘Hello’.

Later on…

  • you setState({value: 'HelXlo'})
  • the virtual DOM says the input value should be ‘HelXlo’
    • react makes input.value ‘HelXlo’
    • the browser jumps the cursor to the end (it’s a side effect of setting .value)

Magic?

Yes, there’s a bit of magic here. React calls render synchronously after your event handler. This is necessary to avoid flickers.

More Related Contents:

  1. Build an HTML table using React from arrays [closed]
  2. “SyntaxError: Unexpected token < in JSON at position 0"
  3. How to delete an item from state array?
  4. ReactJS – Does render get called any time “setState” is called?
  5. How can I use multiple refs for an array of elements with hooks?
  6. React onClick function fires on render
  7. React Js conditionally applying class attributes
  8. How to access a child’s state in React
  9. ESLint Parsing error: Unexpected token
  10. Is there any way to update a specific index from the array in Firestore
  11. Is there a synchronous alternative of setState() in Reactjs
  12. ES6 array map doesn’t return anything: ReactJS
  13. Why React Hook useState uses const and not let
  14. When is it appropriate to use a constructor in REACT?
  15. Use Async/Await with Axios in React.js
  16. How to prevent re-rendering of components that have not changed?
  17. How target DOM with react useRef in map
  18. React.js this.props.data.map() is not a function
  19. How to use setState inside callback: ReactJS
  20. How to get selected value of a dropdown menu in ReactJS
  21. Why useEffect running twice and how to handle it well in React?
  22. How can I block a React component to be rendered until I fetched all informations?
  23. using history with react-router-dom v6
  24. Trying to use React.DOM to set body styles
  25. Dynamically Rendering a React component
  26. How to have nested loops with map in JSX?
  27. Performance penalty of creating handlers on every render with react-hooks
  28. Destructuring of es6 but passing dynamic variable
  29. updateProfile is not a function (Firebase)
  30. How to programmatically fill input elements built with React?

Leave a Comment