title: Mutate prevState in setState hooks updates the view without re-render. Why?
body: <p>My changeProductName function called setState which return a "mutated prevState". I pass the function to and call it in children component via ContextAPI. The function successfully updated a product name displayed in children and parent, but the parent did to fire a re-render. How does the parent updated the view without re-rendering? Can anyone explain what the prevState actually is in setState? </p>
  
  <pre><code>const App = () =&gt; {
    const [products, setProducts] = useState(initialValues);
  
    const changeProductName = (id, newName) =&gt; {
      setProducts((prevState) =&gt; {   //is preState a copy of state?  
        prevState.products.filter(
          (product) =&gt; product.id === id 
        )[0].name = newName;        //Mutates prevState
        return prevState;           //Did I return a new state?
      });
    };
  
    useEffect(() =&gt; 
      console.log("I would know when App re-renders")); //No re-render!
  
    return (
      &lt;&gt;    //Some React Switch and Routers 
      &lt;div&gt;
        {product.map(product=&gt;product.name)}   //Successfully Updated!
      &lt;/div&gt;
      &lt;ProductContext value={(products, changeProductName)}&gt; 
        &lt;ProductPage /&gt;     //call changeProductName and it works!
      &lt;/ProductContext&gt;
      &lt;/&gt;   
    ); 
  };
  
  </code></pre>
  
  <p>If I change the function not touching prevState, the parent re-renders as expected. Is this method better? </p>
  
  <pre><code>  //this will trigger parent re-render.
    const changeProductName = (id, newName) =&gt; { 
      setProducts((prevState) =&gt; {
        prevState.products.filter(
          (product) =&gt; product.id === id
        )[0].name = newName;
        return prevState;
      });
    };
  </code></pre>