12 replies

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

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

hasRefSet

, and added a

useEffect

useEffect

that calls

setHasRefSet(true)

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.

TTC

Theo's Typesafe Cult•3y ago•

12 replies

mikey

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

ref

hasRefSet

hasRefSet

, and added a

useEffect

useEffect

that calls

setHasRefSet(true)

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 (/*...*/);
}

// 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.

Component renders but DOM doesn't update until next render

Similar Threads

Component renders but DOM doesn't update until next render

Similar Threads

Similar Threads

Similar Threads