Interacting with DOM nodes doesn't necessarily need useEffect

TK Dodo is a platform dedicated to sharing insights and resources on software development, technology trends, and career growth. Through articles, interviews, and community engagement, TK Dodo empowers developers to navigate their career paths, stay updated with industry advancements, and cultivate  skills for personal and professional development.

TkDodo

Ref is a reserved property on build-in primitives, where React will store the DOM node after it was rendered. It will be set back to null when the component is unmounted. The linter won't complain about adding it to the dependency array, and the ref is also not read during render. The effect will run once "on mount" (twice in strict mode. If the react element unmounts, it will be called once more. The react element is called once again. The reaction element was called once further. The ref is called again. It will also be called as an argument.

Avoiding useEffect with callback refs

Interacting with refs .css-1bw77fa{color:var(--theme-ui-colors-primary);-webkit-text-decoration:none;text-decoration:none;}.css-1bw77fa:hover{-webkit-text-decoration:underline;text-decoration:underline;}

<p>One more pattern in the way of getting rid of use effect</p>


<p>Great article! Quite a few interesting things in here.</p>
