blog/avoiding-use-effect-with-callback-refs

[giscus[bot]]

blog/avoiding-use-effect-with-callback-refs

Interacting with DOM nodes doesn't necessarily need useEffect

https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs

[damianricobelli]

Incredible explanation. I never thought of that before, thank you so much for sharing your knowledge! 🚀

[ghana7989]

Wow thanks

[LookRain]

Great writeup! This pattern looks really neat and super useful, thanks!

const ref = React.useCallback((node) => {
  node?.focus()
}, [])

return <input ref={ref} defaultValue="Hello world" />

[eriicafes]

Thanks for this, I’ve always been scared of callbackRefs until today

[lindellcarternyc]

Bravo! Great explanation on how to use this library in an efficient way.

Sometimes I feel like we see one way of implementing a common problem and glob onto it. This provides a seemingly stable and safe alternative!

Cheers🎉

[CallmeHongmaybe]

In my case I'd simply put the whole function in event listeners.
Something like
"""
onClick = {e => callback(e) }
"""

[CallmeHongmaybe]

And anyways thanks for making useCallback easy to digest.

[chiptus]

Thanks!!

[kishoreandra]

Great one dodo 🤩, Thanks for writing

[jamieday]

Really appreciate the tip! Good point that the ref may not be populated yet.

I do have a concern about the solution though - I remember reading in React docs that referential stability in useCallback is not a guarantee; the memo hooks are performance optimizations, but they’re not designed to semantically represent the fact that they’d return the same reference each time. So instead of using memoization, React suggests to use refs! So what that means here is that you’d probably want a ref-ref instead of a callback-ref 😅

The plot thickens, as I’m betting the same principle applies regarding the behavior of the ref prop - if that’s purely a performance optimization and not a semantic guarantee, then you shouldn’t rely on that behavior being stable either. So if that’s true you’d need to check that manually. Annnddd at this point we might want a custom hook. React is fun sometimes…

[dalvallana]

So, this would always work, right?

const ref = React.useRef((node) => {
  node?.focus()
})

return <input ref={ref.current} defaultValue="Hello world" />

[TkDodo]

not sure what you mean with "always work". It will always run, on every render. Once with null and once with the newly rendered node. This might be fine, but for focussing as in the example, it's probably too often. That's why useCallback is needed.

[dalvallana]

Luckily, React uses referential stability to check if the callback ref should be run or not. That means if we pass the same ref(erence, pun intended) to it, execution will be skipped

Shouldn't execution be skipped after the first render given that we're passing the same reference?

[TkDodo]

oh I think I totally misread your code because you actually put the function in a useRef. I'm not sure if it works, have you tried it? But yeah, I think it could actually work, as long as you don't have dependencies to the function where you'd actually need them to be re-created.

[TkDodo]

so, I just realised: if you don't have dependencies, you can also just move the function out of the component to make it always stable:

const ref = (node) => {
  node?.focus()
})

function Component() {
  return <input ref={ref} defaultValue="Hello world" />
}

[slashnot]

I wish I know this already. This would have solved many of my annoying problems in the past.

[xmd5a]

nice one! your articles are valuable; very interesting approach :)

[ghaoui]

Many many thanks

[jackblackCH]

As always, on point.

[mirik999]

Super, very useful solution. Thank you

[shataev]

Thanks a lot for this explanation!

[cagils]

Doesn't useLayoutEffect specifically for this use case?

[TkDodo]

no, not really. We are not layouting anything. We just want to make sure that the effect runs first, and as far as I could find out, useEffect orders are stable between the same component.

[samandar-boymurodov]

Nice article. Learnt about callback refs and why it is better to use it over ref objects in some cases. Thank you for your time and effort for making this!

[gavinthomas-valtech]

So using useLayoutEffect for focusing inputs is wrong?

https://blog.octo.com/why-you-should-use-uselayouteffect-when-tinkering-with-focus/

[TkDodo]

It's not what i would do :)

[gavinthomas-valtech]

Any ideas how we can type a heading that need focus

  const headingRef = useCallback((node: RefObject<HTMLElement>) => {
    node?.focus();
  }, []);

I get 'Property 'focus' does not exist on type 'RefObject'

or Property 'focus' does not exist on type 'RefObject'

[gavinthomas-valtech]

I'm using a component that states
ref?: RefObject<HTMLHeadingElement>

[gavinthomas-valtech]

although starting to wonder if in fact the heading can be focussable?

[TkDodo]

yeah I think the problem is that heading is not focusable :)

[hrachhovsepyanqless]

Would you use a ref callback to update a css variable also? Or would you rather use useLayoutEffect/useEffect?

const setContainerOffset = (container) => {
  if (!container) return;

  const { y } = container.getBoundingClientRect();
  document.documentElement.style.setProperty("--offset", `${y}px`);
};


const MainPage = () => {
 return <div ref={setContainerOffset} />
}

[TkDodo]

I'd use a ref callback here, too, for pretty much the same reasons:

• it's less code
• it we pass the ref to a custom component, it might not have rendered immediately. The ref callback will be invoked when the component the ref is attached to actually mounted, not when the parent mounted.

[hrachhovsepyanqless]

Thank you!

[Seddy24]

This works awesome on initial render. I also need to update the width on a resize as well. Ideas on how to do that inside the useEffect watching for the resize?

  const [width, setWidth] = React.useState(0);
  
  const ref = React.useCallback(node => {
    if (node !== null) {
      setWidth(node.getBoundingClientRect().width)
    }
  }, [])

  useEffect(() => {
    function handleWindowResize() {
      //// need to set the width here on resize
      console.log('handleWindowResize')      
    }

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  }, []);

[TkDodo]

No, I think you would still need to have a normal ref then. But you can combine it; the idea of the callback ref is that it always gets executed once when the component mounts, which is what you want. You can additionally store a ref:

  const [width, setWidth] = React.useState(0);
+ const ref = useRef()
  
  const ref = React.useCallback(node => {
    if (node !== null) {
+     ref.current = node
      setWidth(node.getBoundingClientRect().width)
    }
  }, [])

  useEffect(() => {
    function handleWindowResize() {
      //// need to set the width here on resize
      console.log('handleWindowResize')
+     if (ref.current) {
+       setWidth(ref.current.getBoundingClientRect().width)
+     }
    }

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  }, []);

[Seddy24]

That makes sense and worked perfectly!

[AhmedBaset]

I hope I've read this before
thanks man

[mickykebe]

Great post. Thanks for explaining.

[polooner]

how could you give this a special ref type? like a type of HTMLDivElement for example?

[TkDodo]

const ref = React.useCallback((node: HtmlDivElement | null) => ...