= nodejs/next/ref-twice
{file}
This is a minimal reproducible example for the terrible problem of external effects applying twice to refs for effects that are not idempotent and thus blowup if applied twice.
The issue is currently discussed at: https://react.dev/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed (https://web.archive.org/web/20240720100401/https://react.dev/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed[archive]) which says "you need to cleanup the thing yourself". https://web.archive.org/web/20240720100401/https://react.dev/learn/synchronizing-with-effects#subscribing-to-events is also says that for the specific case of `addEventListener`.
But that's annoying! Can't we just somehow tell if we applied twice or not to avoid having to implement a cleanup? What if a third party system does not provide a cleanup at all?
Is the correct solution to just just have a <useEffect> with empty dependency list? Seems to be good according to posts and to <ESLint>!
Tried to do a <React> only reproduction at: <react/ref-twice.html>{file}.
Bibliography:
* https://github.com/facebook/react/issues/8619
* https://github.com/vercel/next.js/tree/276fd521d04b6c228d5637ce359220ffa8f62a2f/examples/with-three-js
* https://www.reddit.com/r/reactjs/comments/tbt2z8/comment/lizezgd/
<Ciro Santilli>'s questions:
* https://stackoverflow.com/questions/78891187/how-to-prevent-a-react-useeffect-from-running-twice-in-strictmode-development-wi
* https://www.reddit.com/r/reactjs/comments/1ewprza/how_to_prevent_a_react_useeffect_from_running/
Back to article page