title: React Hooks: skip re-render on multiple consecutive setState calls
body: <p>Suppose I have the following code: (which is too verbose)</p>
  
  <pre><code>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(() =&gt; {
      policiesService
        .getPolicyFormRequirements(policy)
        .then(
          ({
            addresses,
            pools,
            schedules,
            services,
            tunnels,
            zones,
            groups,
            advancedServices,
            profiles,
          }) =&gt; {
            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,
    };
  }
  </code></pre>
  
  <p>When I use this custom Hook inside of my function component, after <code>getPolicyFormRequirements</code> resolves, my function component re-renders <code>9</code> times (the count of all entities that I call <code>setState</code> on)</p>
  
  <p>I know the solution to this particular use case would be to aggregate them into one state and call <code>setState</code> on it once, but as I remember (correct me, if I'm wrong) on event handlers (e.g. <code>onClick</code>) if you call multiple consecutive <code>setState</code>s, only one re-render occurs after event handler finishes executing.</p>
  
  <p><strong>Isn't there any way I could tell <code>React</code>, or <code>React</code> would know itself, that, after this <code>setState</code> another <code>setState</code> is coming along, so skip re-render until you find a second to breath.</strong></p>
  
  <p>I'm not looking for performance-optimization tips, I'm looking to know the answer to the above (<strong>Bold</strong>) question!</p>
  
  <p>Or do you think I am thinking wrong?</p>
  
  <p>Thanks!</p>
  
  <h2>--------------</h2>
  
  <hr>
  
  <p><strong>UPDATE</strong>
  How I checked my component rendered 9 times?</p>
  
  <pre><code>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 &lt;&gt;&lt;/&gt;;
  }
  </code></pre>