title: Is it good Practice to Stringify Object for useState() Hook To Avoid Re-Rendering
body: <p>According to <a href="https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object">this</a> and <a href="https://stackoverflow.com/questions/43638938/updating-an-object-with-setstate-in-react">that</a> question the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" rel="nofollow noreferrer">spread operator</a> seems to be used for updating an object managed in a <code>useState</code> hook.</p>
  
  <p>I created a super simple example and found out, that even when the content of the object does not change, a re-render is triggered (which is clear, because the object changed):</p>
  
  <pre><code>import React from "react";
  
  function useFriendStatus() {
    const [person, setPersonProps] = React.useState({name:'Mark',age:23});
  
    React.useEffect(() =&gt; {
      console.log("rerender");
      const interval = setInterval(() =&gt; {
        setPersonProps({...person});   //simply set the object again -&gt; no content changed
        console.log('update');
      }, 1000);
      return () =&gt; clearInterval(interval);
    }, [person]);
  
  
    return person;
  }
  
  export default function App() {
    const person = useFriendStatus();
  
    return &lt;div className="App"&gt;Hello World: {"" + person.name}&lt;/div&gt;;
  }
  </code></pre>
  
  <p>Here you see a screenshot from my profiler which shows that a re-rendering seems to be fired (even if the displayed name did not change):</p>
  
  <p><a href="https://i.stack.imgur.com/jYu7W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jYu7W.png" alt="enter image description here"></a></p>
  
  <p>I am wondering if this is a "good practice" as EVERYTHING seems to be re-rendered. Sometimes you get deeply nested objects from an API and breaking them down to super-simple non-object <code>userState</code> hooks is not possible. </p>
  
  <p>Wouldn't it be better to Stringify everything?</p>
  
  <pre><code>import React from "react";
  
  
  function useFriendStatus() {
    const [person, setPersonProps] = React.useState(JSON.stringify({name:'Mark',age:23}));
  
    React.useEffect(() =&gt; {
      console.log("rerender");
      const interval = setInterval(() =&gt; {
        const personCopy=JSON.parse(person);
        setPersonProps(JSON.stringify({...personCopy}));
        console.log('update');
      }, 1000);
      return () =&gt; clearInterval(interval);
    }, [person]);
  
  
    return person;
  }
  
  export default function App() {
    const person = JSON.parse(useFriendStatus());
  
    return &lt;div className="App"&gt;Hello World: {"" + person.name}&lt;/div&gt;;
  }
  </code></pre>
  
  <p>How do you handle that in practice?</p>