Two approaches to handling imperative code in react

anon-imperative.jsx

function useTransition (isActive, onEnter = noop, onExit = noop) {
  const ref = useRef()
  useEffect(() => {
    if (!ref.current) return
    if (isActive) onEnter(ref.current) else onExit(ref.current)
  }, [isActive])
  return ref
}

// -----

function ScrollIntoViewContainer ({ isActive, children }) {
  const ref = useTransition(isActive, (el) => el.scrollIntoView())
  return <div ref={ref}>{children}</div>
}

named-imperative.jsx

const Context = createContext()

function NamedImperativeController ({ children }) {
  const [refs, setRefs] = useState({})
  const value = useMemo(() => ({
    registerRef: (name, ref) => {
      if (refs[name]) throw new Error(`Already a ref with name ${name}`) 
      setRefs(prev => ({ ...prev, [name]: ref }))
      return () => setRefs(prev => ({ ...prev, [name]: undefined }))
    },
    getNamedRef: (name, onError=null) => {
      if (refs[name]) return refs[name]
      if (onError) return onError(refs)
      throw new Error(`No ref with name ${name}`)
    } 
  }), [refs])
  return <Context.Provider value={value}>{children}</Context.Provider>
}

function useNamedRef (name) {
  const ref = useRef()
  const { registerRef } = useContext(Context)
  useEffect(() => registerRef(name, ref), [name])
  return ref
}

function useGetNamedRef (name, orDefault) {
  const { getNamedRef } = useContext(Context)
  return getNamedRef(name, orDefault)
}