CODEWITHSUNDEEP
javascriptreactjsreact-hooksuse-ref
Zephyr
Zephyr

Reputation: 2412

How does a re-render affect useRef values

At the top of my component I define a variable with useRef like below.

const data = {
    item1 : useRef (null),
}
console.log (data['item1'].current?.srcObject)

Now as the logic proceeds through the component the value for item1 is set up. The ref is attached to a video element. And at certain points the component re-renders. The console.log prints the value of the srcObject upon the first re-render and the second. But on the third that value is lost. The srcObject is not explicitly changed in between the re-renders.

I don't fully understand refs but I'd like to know how these values are retained or destroyed. Of course I get that they maybe case specific but I'd still like to get the general idea.

Upvotes: 2

Views: 5440

Answers (1)

T J
T J

Reputation: 43166

You probably want to instead do const ref = useRef({item1: ...}) and reference the current value as ref.current.item. Your object is getting re-created every render.
If you put the object inside the ref, ref.current will be the object, and that object won't update or change with react renders. That's what refs are for, values that you can update independent of rendering, that also stick around for the lifetime of the component.

Upvotes: 3

Related Questions