If a downstream component's useEffect depends on a prop that hasn't been useMemo'd, their effect will be executed on every render due to the changing reference, and there is nothing that can be done at the downstream component to alter that behavior. This means they'd have to trace the prop back to its source and refactor it to useMemo, which can be a very painful exercise as I'm sure anyone who has done it can attest to. For props that come from third party libraries, this might not even be an option, which is why pre-emptively useMemo'ing is even more crucial for reusable abstractions like shared hooks and components.
And yes, I realize that the React docs currently recommend using useMemo only as a performance optimization, not as a semantic guarantee, but I believe that ship has sailed. There is so much code in the wild today that useMemo and then pass the result to some useEffect downstream, that they can't really afford to break in practice. I think the only practical option at this point is to strengthen the original useMemo with a semantic guarantee, and then introduce a separate useMemoForPerformanceOnly (with a better name) hook that can be used to opt-out of the semantic guarantee to allow React to evict memoized results to optimize for memory usage.
To get concrete, there's no possible way this function could be automatically memoized at a library/framework level:
const myCallback = () => setFoo("bar")React will go the way of JQuery in 5 years. We'll kindly thank it for it's contribution to the framework space and move on. No one in their right mind would pick it up for new apps over Vue, Svelte, Angular hell even Ember. Then you have the new wave of frameworks coming out. Only way that React is usable is only for the view layer with Mobx holding any other state.
ReactDOM.render(element, document.getElementById('root'), {memo: true});
Just dreaming...
I wonder why React doesn't provide a configuration/flag/option to just do this by default if anybody wants to.
https://beta.reactjs.org/community/acknowledgements#react-do...
(I did get to see an early alpha preview version and gave some feedback - other than that I've just been very eagerly awaiting this coming out)
See the docs repo PR [0] for background on what content is currently included, plans for further content and site improvements, and feedback on the new docs.
For why this is a big deal: the old docs were good in some ways, but very weak in others.
By far the biggest issue is that hooks were announced in Oct 2018 and released live in early 2019, but the tutorials and explanations were all still written with class components and showed older patterns, well after the community had fully adopted hooks as the standard approach. The hooks info was a totally separate section of the docs. That section was _good_, but it made it really hard to continue recommending the React docs as a good starting point for someone new to React.
The docs have also skimmed past a lot of important information, usage concepts, and info on how React itself actually works. For example:
- React's batching behavior is something that frequently trips people up, but the current docs just have a note that says "updates may be async"
- Using the hook dependency arrays correctly is vital, but the current hook docs describe it as sort of an after-thought
- There's no information on what a "reducer function" is or how to use one correctly.
That's part of why I ended up writing a 9K-word "Guide to React Rendering Behavior" post [1], and Dan wrote a similar "Guide to `useEffect`" [2] article.
Fortunately, the new docs address a lot of those concepts directly, which should really help people who are getting started.
[0] https://github.com/reactjs/reactjs.org/pull/3965
[1] https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-...
[2] https://overreacted.io/a-complete-guide-to-useeffect/