MENU


Avoiding Unnecessary Firing

We may choose to use the functional update form to avoid firing an effect.
RESETRUNFULL
function Counter() {
   const [count, setCount] = React.useState(0);
   React.useEffect(() => {
   console.log(999);  // not executed repeatedly
      const id = setInterval(() => {     // setCount(count+1);  // count always 0 here. works if [count] is the dependency.
         setCount(c => c + 1); // ✅ This doesn't depend on `count` variable outside
      }, 1000);
      return () => clearInterval(id);
   }, []); // ✅ Our effect doesn't use any variables in the component scope
   return <h1>{count}</h1>;}