CODEWITHSUNDEEP
javascriptreactjs
Samson Liu
Samson Liu

Reputation: 550

React useRef not updating consistently for conditionally rendered elements

Across my app, there are some UX logic that needs to be shared. They are triggered by events, so I wrote 2 custom hooks. Let's call one useRefWithCalc. The other hook is a more standard useEventListener, similar to this one.

useRefWithCalc calls the native useRef, has some internal handlers for UX, then calls useEventListener to attach those handlers. useRefWithCalc returns the ref created within, so another component can use this hook, and get the returned ref to attach to elements.

This has worked for me when the ref isn't attached to conditionally rendered elements.

The component looks something like this. Please take note on the 2 test logs.

const useEventListener = (event, listener, ref) => {\
    ...
    useEffect(() => {
        ...
        console.log("1. ref is: ", ref.current); // test logging 1.
        ref.current.addEventListener(event, listener);
        return () => {
            ref.current.removeEventListener(event, listener);
        }
    }, [event, listener, ref]);
}

const useRefWithCalc = (value) => {
    const ref = useRef(null);
    ...
    const calc = () => {
        // some calculations
    }
    ...
    useEventListener(event, calc, ref)
    return [ref, result]
}

// works perfectly
const WorkingElement = (props) => {
    const [ref, result] = useRefWithCalc(props.value);
    ...
    return <B ref={ref} />
}

// doesn't work consistently
const ConditionalElement = (props) => {
    const [state, setState] = useState(false);
    const [ref, result] = useRefWithCalc(props.value)

    useEffect(()=>{
        if (ref && ref.current) {
            ref.current.focus();
            console.log("2. ref is: ", ref.current); // test logging 2
        }
    }, [ref])
    ...
    return state ? <A> : <B ref={ref} />
}

The <WorkingElement /> works just as expected. The ref gets attached, and handles events with no problem.

However, in the <ConditionalElement />, when B is mounted, sometimes times test logging 1 won't fire. Test logging 2 always fires, and the ref gets the focus correctly. But this update is not passed into useEventListener

Once <B /> gets 1 subsequent update (e.g. when user inputs something), both logs will fire correctly, and the event listner gets attached correctly, and it work just as <WorkingElement />

Sorry for not posting the exact code. I feel like my approach is convoluted and might be wrong.

Upvotes: 2

Views: 5563

Answers (1)

Exifers
Exifers

Reputation: 2822

In React when a ref changes, it doesn't trigger a component update, and useEffects are not triggered.

I suggest to put your ref inside a state so that effects are triggered when the ref changes :

const [ref, setRef] = useState(undefined)

return (
  <B ref={setRef}/>
)

Upvotes: 6

Related Questions