title: use object in useEffect 2nd param without having to stringify it to JSON
body: <p>In JS two objects are not equals.</p>
  
  <pre><code>const a = {}, b = {};
  console.log(a === b);
  </code></pre>
  
  <p>So I can't use an object in <code>useEffect</code> (React hooks) as a second parameter since it will always be considered as false (so it will re-render):</p>
  
  <pre class="lang-js prettyprint-override"><code>function MyComponent() {
    // ...
    useEffect(() =&gt; {
      // do something
    }, [myObject]) // &lt;- this is the object that can change.
  }
  </code></pre>
  
  <p>Doing this (code above), results in running effect <em>everytime</em> the component re-render, because object is considered not equal each time.</p>
  
  <p>I can "hack" this by passing the object as a JSON stringified value, but it's a bit dirty IMO:</p>
  
  <pre class="lang-js prettyprint-override"><code>function MyComponent() {
    // ...
    useEffect(() =&gt; {
      // do something
    }, [JSON.stringify(myObject)]) // &lt;- yuck
  </code></pre>
  
  <p>Is there a better way to do this and avoid unwanted calls of the effect?</p>
  
  <p><em>Side note: the object has nested properties. The effects has to run on every change inside this object.</em></p>