title: React: When do we have to memo the objects returned from a Hook?
body: <p>I wrote a Hook to return an object. Something like</p>
  <pre class="lang-js prettyprint-override"><code>function useFoo() {
    const stuff = useStuff()
    const id = useId()
    const foo = {
       stuff,
       id,
    }
  
    return foo
  }
  
  </code></pre>
  <p>I know that I can wrap <code>foo</code> inside <code>useMemo</code> to make its reference stable between re-renders so it can be safely included in dependency lists (by safely I meant it doesn't bust memorizations between re-renders).
  But I don't like the costs of putting <code>useMemo</code> on things. The costs involve:</p>
  <ol>
  <li>allocating the dependency list in memory</li>
  <li>shallow-compare the dependency list (a o(n) process)</li>
  <li>I have make sure anything used/referenced from that object also are memo'ed so as a result I have use more <code>useMemo</code> across the codebase</li>
  </ol>
  <p>And at this point we can work around this issue by either:</p>
  <ol>
  <li>make <code>foo</code> the state of the Hook. i.e.</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>function useFoo() {
    const stuff = useStuff()
    const id = useId()
    const [foo, setFoo] = {
       stuff,
       id,
    }
  
    return foo // now we don't need to memorize it
  }
  </code></pre>
  <p>But I guess this is unnecessary for various reasons but I cannot pinpoint exactly what the tradeoffs are for now.</p>
  <ol start="2">
  <li>putting it inside a ref, i.e. <a href="https://epicreact.dev/the-latest-ref-pattern-in-react/" rel="nofollow noreferrer">the Latest Ref Pattern</a></li>
  </ol>
  <p>The two workarounds are based on the premise that we obey the <code>react-hooks/exhaustive-deps</code> eslint rule, which is that we should include <code>foo</code> in dependency lists to avoid stale closure issues. For example, when <code>foo</code> is used inside <code>useEffect</code>, we need to include it in the dependency list to keep things in sync.</p>
  <p>However I keep wondering if there are legit cases where we know for sure that we can safely omit <code>foo</code> from any dependency lists, i.e. ignoring <code>react-hooks/exhaustive-deps</code> eslint rule (I know it is often discouraged).
  For example, <code>foo</code> never changes during the lifetime of <code>useFoo</code>. Then in which case, it doesn't make any difference whether or not we include <code>foo</code> in a dependency list. Consequently, we don't even bother memorizing it in the first place in <code>useFoo</code>.</p>
  <p>So my question is, are there any patterns or rules of thumbs that we can leverage to confidently <strong>not</strong> memorize <code>foo</code> as it doesn't matter whether or not we include it in any dependency lists?</p>