React batch updates for multiple setState() calls inside useEffect hook

Question

On this answer by Dan Abramov here on SO, I\'ve found out the following:

Does React keep the order for state updates?

Currently (React 16 and earl

Answer 1

If state updates happen directly, React will batch your updates.

Batched:

export default () => { 
   const [a, setA] = React.useState(0); 
   const [b, setB] = React.useState(0);

   useEffect(() => {
    setA(1); setB(1);
   },[]);

   return (  
    
 
      
A: {a}
 
      
B: {b}
 
    
 ); 
};

Clicking this button will re-render the component only once.

Non-Batched:

export default () => { 
  const [a, setA] = React.useState(0); 
  const [b, setB] = React.useState(0);

   useEffect(() => { 
    setTimeout(() => { setA(1); setB(1); }, 1000); }
   , []);

   return ( 
    
 
     
A: {a}
 
     
B: {b}
 
    
 ); 
};