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 `setState`s, 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 <></>;
}

```
['https://Stackoverflow.com/questions/59163378', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2908277/']
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.
> 
> 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](https://github.com/reactwg/react-18/discussions/21).