Hook with ref callback

hookWithRef.js

import React, {useCallback, useRef} from 'react'

function useHookWithRefCallback() {
  const ref = useRef(null)
  const setRef = useCallback(node => {
    if (ref.current) {
      // Make sure to cleanup any events/references added to the last instance
    }
    
    if (node) {
      // Check if a node is actually passed. Otherwise node would be null.
      // You can now do what you need to, addEventListeners, measure, etc.
    }
    
    // Save a reference to the node
    ref.current = node
  }, [])
  
  return [setRef]
}

function Component() {
  // In your component you'll still recieve a `ref`, but it 
  // will be a callback function instead of a Ref Object
  const [ref] = useHookWithRefCallback()
  
  return <div ref={ref}>Ref element</div>
}

Nice and simple example, but in any case, wouldn't you want to return both ref and setRef from the custom hook like this, const [ref, setRef] = useHookWithRefCallback(), so you can use the ref in addition to setting it?

I guess you could do that, but be careful. There's a couple of gotchas.

1. Setting ref.current doesn't trigger a render update, so you can't be sure of when it's set/updated.
2. If you return the ref itself, it would allow other components to potentially change the ref.current

Excellent gist!

If you return the ref itself, it would allow other components to potentially change the ref.current

@thebuilder, I'm trying to understand how this would happen. Are you able to describe this risk further with a quick example? Thank you.

Setting .current doesn't trigger a rerender, so things might not work like you expect.

function Component() {
  // In your component you'll still recieve a `ref`, but it 
  // will be a callback function instead of a Ref Object
  const [ref] = useHookWithRef()
  
  ref.current = 'Not your div'

  return <div ref={ref}>Ref element</div>
}

I'm wondering why you're returning [setRef] instead of setRef directly. Is there a specific reason for this?