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/']
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;
}

```
**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](https://reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching)