React Hooks – Ref is not available inside useEffect

November 24, 2023 by Tarik

You should use useCallback instead of useRef as suggested in the reactjs docs.

React will call that callback whenever the ref gets attached to a different node.

Replace this:

const elRef = useRef(null);
useEffect(() => {
    console.log("ref", elRef.current);
}, [elRef.current]);

with this:

const elRef = useCallback(node => {
    if (node !== null) {
        console.log("ref", node); // node = elRef.current
    }
}, []);