Non referentially stable refs cause multiple updates

When a React element receives a different ref on re-renderer the previous ref is updated to null and the new one is given the current value — regardless of changes in value.

I made a small CodeSandbox to verify this. In it you can also find a “solution”, which is to transform the API into an hook. This let us introduce useCallback to give the user a referentially stable ref.

This doesn’t solve the problem completely: if one of the refs changes all other refs receive a double (and useless) update too.

[yuchi]

MUI’s version is stable, but only in a single specific sense, and formally fragile. Let me explain.

A perfect ref merger should:

1. Be stable against re-renders, if no input ref has changed the resulting ref must be the same as the previous one, so that it doesn’t uselessly trigger an update.
2. Be transparent, from the outside, from the standpoint of a single ref creator, there should be no difference between using the ref as-is and merged with other refs.

MUI’s current implementation has the following problems:

1. It uses useMemo which as we all know as historically been defined as an optimization tool, and should not be used to have “singleton” semantics. In this case avoiding recreating a ref is some kind of an optimization trick, but since ref updating is in the imperative world (a function ref can have side effects ^{[citation needed]}), we need more guarantees.
2. When one of the ref changes a new merged ref is created and all refs gets updated, again ruining the expectation about when and how function refs are called.

[agriffis]

I don’t think this needs effects at all. Doesn’t this work to preserve the resulting callback ref?

/* eslint-disable react-hooks/exhaustive-deps */
import React from 'react'

export const useMergedRefs = refs =>
  React.useCallback(current => {
    refs.forEach(ref => {
      if (typeof ref === 'function') {
        ref(current)
      } else if (ref && !Object.isFrozen(ref)) {
        ref.current = current
      }
    })
  }, refs)

The reason for disabling react-hooks/exhaustive-deps is that we’re passing the raw refs array to useCallback, which means that eslint can’t statically check it. But it works fine for the actual checking which preserves and updates the callback.

Also, the Object.isFrozen test shows up for me in tests. I’m not sure under what conditions the ref becomes a frozen, empty object, but we just need to avoid assigning in that case.