React Hooks: skip re-render on multiple consecutive setState calls

Question

Suppose I have the following code: (which is too verbose)

function usePolicyFormRequirements(policy) {
  const [addresses, setAddresses] = React.useState([]);
  const [pools, setPools] = React.useState([]);
  const [schedules, setSchedules] = React.useState([]);
  const [services, setServices] = React.useState([]);
  const [tunnels, setTunnels] = React.useState([]);
  const [zones, setZones] = React.useState([]);
  const [groups, setGroups] = React.useState([]);
  const [advancedServices, setAdvancedServices] = React.useState([]);
  const [profiles, setProfiles] = React.useState([]);

  React.useEffect(() => {
    policiesService
      .getPolicyFormRequirements(policy)
      .then(
        ({
          addresses,
          pools,
          schedules,
          services,
          tunnels,
          zones,
          groups,
          advancedServices,
          profiles,
        }) => {
          setAddresses(addresses);
          setPools(pools);
          setSchedules(schedules);
          setServices(services);
          setTunnels(tunnels);
          setZones(zones);
          setGroups(groups);
          setAdvancedServices(advancedServices);
          setProfiles(profiles);
        }
      );
  }, [policy]);

  return {
    addresses,
    pools,
    schedules,
    services,
    tunnels,
    zones,
    groups,
    advancedServices,
    profiles,
  };
}

When I use this custom Hook inside of my function component, after getPolicyFormRequirements resolves, my function component re-renders 9 times (the count of all entities that I call setState on)

I know the solution to this particular use case would be to aggregate them into one state and call setState on it once, but as I remember (correct me, if I'm wrong) on event handlers (e.g. onClick) if you call multiple consecutive setStates, only one re-render occurs after event handler finishes executing.

Isn't there any way I could tell React, or React would know itself, that, after this setState another setState is coming along, so skip re-render until you find a second to breath.

I'm not looking for performance-optimization tips, I'm looking to know the answer to the above (Bold) question!

Or do you think I am thinking wrong?

Thanks!

--------------

---

UPDATE How I checked my component rendered 9 times?

export default function PolicyForm({ onSubmit, policy }) {
  const [formState, setFormState, formIsValid] = usePgForm();
  const {
    addresses,
    pools,
    schedules,
    services,
    tunnels,
    zones,
    groups,
    advancedServices,
    profiles,
    actions,
    rejects,
    differentiatedServices,
    packetTypes,
  } = usePolicyFormRequirements(policy);

  console.log(' --- re-rendering'); // count of this
  return <></>;
}

Answer 1

REACT 18 UPDATE

With React 18, all state updates occurring together are automatically batched into a single render. This means it is okay to split the state into as many separate variables as you like.

Source: React 18 Batching

Answer 2

Isn't there any way I could tell React, or React would know itself, that, after this setState another setState is coming along, so skip re-render until you find a second to breath.

You can't, React batches (as for React 17) state updates only on event handlers and lifecycle methods, therefore batching in promise like it your case is not possible.

To solve it, you need to reduce the hook state to a single source.

From React 18 you have automatic batching even in promises.

Answer 3

By the way, I just found out React 18 adds automatic update-batching out of the box. Read more: https://github.com/reactwg/react-18/discussions/21

Answer 4

I thought I'd post this answer here since it hasn't already been mentioned.

There is a way to force the batching of state updates. See this article for an explanation. Below is a fully functional component that only renders once, regardless of whether the setValues function is async or not.

import React, { useState, useEffect} from 'react'
import {unstable_batchedUpdates} from 'react-dom'

export default function SingleRender() {

    const [A, setA] = useState(0)
    const [B, setB] = useState(0)
    const [C, setC] = useState(0)

    const setValues = () => {
        unstable_batchedUpdates(() => {
            setA(5)
            setB(6)
            setC(7)
        })
    }

    useEffect(() => {
        setValues()
    }, [])

    return (
        <div>
            <h2>{A}</h2>
            <h2>{B}</h2>
            <h2>{C}</h2>
        </div>
    )
}

While the name "unstable" might be concerning, the React team has previously recommended the use of this API where appropriate, and I have found it very useful to cut down on the number of renders without clogging up my code.

Answer 5

You can merge all states into one

function usePolicyFormRequirements(policy) {
  const [values, setValues] = useState({
    addresses: [],
    pools: [],
    schedules: [],
    services: [],
    tunnels: [],
    zones: [],
    groups: [],
    advancedServices: [],
    profiles: [],
  });
  
  React.useEffect(() => {
    policiesService
      .getPolicyFormRequirements(policy)
      .then(newValues) => setValues({ ...newValues }));
  }, [policy]);

  return values;
}

Answer 6

If the state changes are triggered asynchronously, React will not batch your multiple state updates. For eg, in your case since you are calling setState after resolving policiesService.getPolicyFormRequirements(policy), react won't be batching it.

Instead if it is just the following way, React would have batched the setState calls and in this case there would be only 1 re-render.

React.useEffect(() => {
   setAddresses(addresses);
   setPools(pools);
   setSchedules(schedules);
   setServices(services);
   setTunnels(tunnels);
   setZones(zones);
   setGroups(groups);
   setAdvancedServices(advancedServices);
   setProfiles(profiles);
}, [])

I have found the below codesandbox example online which demonstrates the above two behaviour.

https://codesandbox.io/s/402pn5l989

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.

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.