Does React batch state update functions when using hooks?

by

TL;DR – if the state changes are triggered asynchronously (e.g. wrapped in a promise), they will not be batched; if they are triggered directly, they will be batched.

I’ve set up a sandbox to try this out: https://codesandbox.io/s/402pn5l989

import React, { Fragment, useState } from 'react';
import ReactDOM from 'react-dom';

import './styles.css';

function Component() {
  const [a, setA] = useState('a');
  const [b, setB] = useState('b');
  console.log('a', a);
  console.log('b', b);

  function handleClickWithPromise() {
    Promise.resolve().then(() => {
      setA('aa');
      setB('bb');
    });
  }

  function handleClickWithoutPromise() {
    setA('aa');
    setB('bb');
  }

  return (
    <Fragment>
    <button onClick={handleClickWithPromise}>
      {a}-{b} with promise
    </button>
    <button onClick={handleClickWithoutPromise}>
      {a}-{b} without promise
    </button>
      </Fragment>
  );
}

function App() {
  return <Component />;
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

I’ve made two buttons, one triggers the state changes wrapped in a promise like in your code example, the other triggers the state changes directly.

If you look at the console, when you hit the button “with promise”, it will first show a aa and b b, then a aa and b bb.

So the answer is no, in this case, it will not render aa - bb right away, each state change triggers a new render, there is no batching.

However, when you click the button “without promise”, the console will show a aa and b bb right away.

So in this case, React does batch the state changes and does one render for both together.

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. How to use `setState` callback on react hooks
  3. How to compare oldValues and newValues on React Hooks useEffect?
  4. How to use callback with useState hook in react [duplicate]
  5. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  6. In useEffect, what’s the difference between providing no dependency array and an empty one?
  7. With useEffect, how can I skip applying an effect upon the initial render?
  8. How to use throttle or debounce with React Hook?
  9. React Hook : Send data from child to parent component
  10. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  11. Set types on useState React Hook with TypeScript
  12. Stop useEffect from running on mount
  13. How to sync props to state using React hooks : setState()
  14. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  15. React.useState does not reload state from props
  16. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  17. React: useState or useRef?
  18. Lazy initial state – What it is and how to use it?
  19. Does a render happen before function in React Hooks useEffect is called?
  20. React Hooks – Modified state not reflecting immediately
  21. React Hooks – Modified state not reflecting immediately
  22. React Hooks: Why is .current null for useRef Hook?
  23. React hook rendering an extra time
  24. How to test a react component that is dependent on useContext hook?
  25. What is the expected return of `useEffect` used for?
  26. ReactJS – prevState in the new useState React hook?
  27. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  28. How to create dynamic refs in functional component- Using useRef Hook
  29. Put A Warning If Page Refresh in ReactJS
  30. React – Is useState ‘s setter function able to change?

Leave a Comment