use-ref-deps-effect

Effect hooks that support "ref.current" dependencies

Motivation

ref.current for DOM Element is null until the rendering is over. So it can not be used as a dependency of useEffect.

useEffect(() => {
    /* ... */
}, [ref.current]) // <= not working !

There are some known alternatives, but they are not familiar with the react mental model. use-ref-deps-effect provides a mental model similar to useEffect by lazy evaluation of ref.current dependencies.

useRefDepsEffect(() => {
    /* ... */
}, [ref]) // <= If ref.current changes, it runs.

Install

npm i use-ref-deps-effect

API

useRefDepsEffect(callback, deps)

import { useRefDepsEffect } from 'use-ref-deps-effect'

This is an Effect hook that supports ref.current dependencies.

createRefDepsHook(useEffectLike)

This function uses the same API hook as the useEffect to create a hook that supports ref.current.

import { createRefDepsHook } from 'use-ref-deps-effect'
import { useLayoutEffect } from 'react'

const useRefDepsLayoutEffect = createRefDepsHook(useLayoutEffect)

Caution

Do not cleanup using ref.current directly.

ref.current is always latest. To do cleanup, you need to capture the previous value in advance.

// 🙅 Bad
useRefDepsEffect(() => {
    ref.current.addEventListener(/* ... */)
    return () => {
        ref.current.removeEventListener(/* ... */)
    }
}, [ref])

// ✅ Good
useRefDepsEffect(() => {
    const el = ref.current
    el.addEventListener(/* ... */)
    return () => {
        el.removeEventListener(/* ... */)
    }
}, [ref])

License

MIT