emmatown / apply-ref Goto Github PK

Every call to applyRefs will create a new function, which will be applied as a ref to a real object, and that would cause unmount of a previous ref, and calling it with a null value.

It is not a big problem if all used ref are RefObjects, but if one of them is callback it will call it twice - first with null, and then with the old value. That could cause a cascade update effect or even infinite loop.

The only way to fix the situation is to expose a hook with a buit-in memoization, similar to the useForkRef in material-ui for example -

https://codesandbox.io/s/40v63v0zv4

From:

let ref1 = val => {}
let ref2 = React.createRef()

<div ref={(val) => {
    applyRef(ref1, val)
    applyRef(ref2, val)
}} />

To:

let ref1 = val => {}
let ref2 = React.createRef()

<div ref={applyRef(ref1, ref2)} />