mikey Posts - Answer Overflow

mikey

•Created by mikey on 10/12/2023 in #questions

Component renders but DOM doesn't update until next render

I solved this problem, but I can't figure out why. I had a ref in my component, and I wanted to trigger a re-render when its current value changed. (Yes, I know, this sounds like a perfect use case for state. My question is different though.) So I added a state var hasRefSet, and added a useEffect that calls setHasRefSet(true) in order to "force" re-render:

// storing my data in a ref
function Component() {
    const myDataRef = useRef(null);
    const [hasRefSet, setHasRefSet] = useState(false);
    
    useEffect(() => {
        setHasRefSet(true);
    }, [myDataRef.current])
    
    return (/*...*/);
}

// storing my data in a ref
function Component() {
    const myDataRef = useRef(null);
    const [hasRefSet, setHasRefSet] = useState(false);
    
    useEffect(() => {
        setHasRefSet(true);
    }, [myDataRef.current])
    
    return (/*...*/);
}

However, the re-render both was and wasn't happening. When I debugged my code, the component was rendering properly, and was producing the proper return JSX. Yet, the DOM never updated. On next re-render, by updating state in a parent, THEN I saw the DOM finally update. Was React saving my component's return value for later? I decided to use a state var instead, and this solved the issue:

// storing my data in state
function Component() {
    const [myData, setMyData] = useState();

    return (/*...*/);
}

// storing my data in state
function Component() {
    const [myData, setMyData] = useState();

    return (/*...*/);
}

Obviously my example is greatly simplified. I hope I've left a satisfactory amount of info. I'm not using anything fancy -- no DOM update batching, or custom reconciliation algorithm.

13 replies

Gaming

Programming