Multiple calls to state updater from useState in component causes multiple re-renders

by

You could combine the loading state and data state into one state object and then you could do one setState call and there will only be one render.

Note: Unlike the setState in class components, the setState returned from useState doesn’t merge objects with existing state, it replaces the object entirely. If you want to do a merge, you would need to read the previous state and merge it with the new values yourself. Refer to the docs.

I wouldn’t worry too much about calling renders excessively until you have determined you have a performance problem. Rendering (in the React context) and committing the virtual DOM updates to the real DOM are different matters. The rendering here is referring to generating virtual DOMs, and not about updating the browser DOM. React may batch the setState calls and update the browser DOM with the final new state.

const {useState, useEffect} = React;

function App() {
  const [userRequest, setUserRequest] = useState({
    loading: false,
    user: null,
  });

  useEffect(() => {
    // Note that this replaces the entire object and deletes user key!
    setUserRequest({ loading: true });
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUserRequest({
          loading: false,
          user: data.results[0],
        });
      });
  }, []);

  const { loading, user } = userRequest;

  return (
    <div>
      {loading && 'Loading...'}
      {user && user.name.first}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>

Alternative – write your own state merger hook

const {useState, useEffect} = React;

function useMergeState(initialState) {
  const [state, setState] = useState(initialState);
  const setMergedState = newState => 
    setState(prevState => Object.assign({}, prevState, newState)
  );
  return [state, setMergedState];
}

function App() {
  const [userRequest, setUserRequest] = useMergeState({
    loading: false,
    user: null,
  });

  useEffect(() => {
    setUserRequest({ loading: true });
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUserRequest({
          loading: false,
          user: data.results[0],
        });
      });
  }, []);

  const { loading, user } = userRequest;

  return (
    <div>
      {loading && 'Loading...'}
      {user && user.name.first}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. Make React useEffect hook not run on initial render
  3. Push method in React Hooks (useState)?
  4. How can I use React hooks in React classic `class` component?
  5. How to use componentWillMount() in React Hooks?
  6. Is it possible to share states between components using the useState() hook in React?
  7. Why is useState not triggering re-render?
  8. Updating and merging state object using React useState() hook
  9. componentDidMount equivalent on a React function/Hooks component?
  10. react useEffect comparing objects
  11. How to register event with useEffect hooks?
  12. React useState hook event handler using initial state
  13. Is there a generic way to set state in React Hooks? How to manage multiple states?
  14. How do I update states `onChange` in an array of object in React Hooks
  15. React Function Components with hooks vs Class Components
  16. useEffect does not listen for localStorage
  17. setTimeout for this.state vs useState
  18. How does JavaScript mechanism behind react hooks work?
  19. What is useState() in React?
  20. Why need useRef and not mutable variable?
  21. React – useState – why setTimeout function does not have latest state value?
  22. Determine which dependency array variable caused useEffect hook to fire
  23. Updating state to the same state directly in the component body
  24. Do we still need functional setState way in react hooks?
  25. Proper way of using React hooks + WebSockets
  26. React hook useEffect runs continuously forever/infinite loop
  27. useMemo vs. useEffect + useState
  28. Equivalent to componentDidUpdate using React hooks
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment