在 useCallback 挂钩中获取 ref null

Question

I'm trying to set the value of input using ref but I'm getting ref null inside useCallback Hook.

let inputRef = useRef();
const search = useCallback(
        (data) => {
            console.log(inputRef);
        },
        [inputRef],
    );

return <input type="text" ref={inputRef} />

and It's showing null in the browser console when I call this function.

this is just an example showing, what I'm trying to achieve.

Answer 1

The problem isn't that he's not passing in a null value, a ref is initialized to null by default.

The problem is that useCallback() memoizes and caches the result of this callback function before the first render, before the component to which this ref is assigned has been mounted. It then waits for inputRef to change but inputRef is just a reference to an object; even if the component that inputRef.current points to changes, the value of inputRef does not as it is only being compared by reference equality.

So, since the function has no reason to update as the value of inputRef is not going to change -- it evaluates to the cached result of the search callback which was computed and cached before the DOM mounted and it outputs null to console.

What you're looking for is a Callback Ref

The other thing that I'd like to point out is that the useCallback hook is not necessary for this use-case and will provide no benefit. The only correct usage of useCallback() is to cache the result of expensive function calls so that they don't recompute every time render is called (this is known as memoization).

The arbitrary usage of the useCallback() hook is an anti-pattern-- it is not required for the overwhelming majority of callbacks in React, and can reduce performance when used incorrectly by creating additional overhead.