Share ref with multiple ref handlers

Before React 16.3 we were able to proxy the same element ref to multiple listeners, for example, to grab hold of the element for internal purposes and also expose it publicly, like so:

class MyComponent extends Component {
  attachRef = el => {
    this.buttonEl = el;
    this.props.buttonRef(el);
  }

  // Do something with `this.buttonEl`

  render () {
    return <button ref={this.attachRef}>Button</button>;
  }
}

After React 16.3 this is more complicated as the ref prop can be a function or an object:

class MyComponent extends Component {
  buttonRef = React.createRef();

  attachRef = el => {
    this.buttonRef.current = el;
    
    if (typeof this.props.inputRef === 'function') {
      this.props.inputRef(el);
    } else {
      this.props.inputRef.current = el;
    }
  }

  // Do something with `this.buttonRef.current`

  render () {
    return <button ref={this.attachRef}>Button</button>;
  }
}

First, is this the right approach?

And if so, Typescript types say:

interface RefObject<T> {
  readonly current: T | null;
}

Which prevents us from assigning to current. Shouldn’t it not be readonly?

[voliva]

This is particularly useful for hooks now, because you might have two pieces of encapsulated logic that they should work toghether.

For instance, let’s say we have two hooks:

• useHeight(): [height: number, ref: Ref<HTMLElement>] => whenever ref mounts, it gets the height of that element, and listens to resize events that updates height.
• useScrollY(): [scrollY: number, ref: Ref<HTMLElement>] => whenever ref mounts, it gets the current scroll position of the element, and listens to scroll events that updates the scrollY.

In this use case, we need to pass those refs to the same element, so we need a way of combining them.

[voliva]

Just if anyone is interested, here it’s my implementation (in typescript):

/**
 * Combines many refs into one. Useful for combining many ref hooks
 */
export const useCombinedRefs = <T extends any>(...refs: Array<Ref<T>>): Ref<T> =>
    useCallback(
        (element: T) =>
            refs.forEach(ref => {
                if (!ref) {
                    return;
                }

                // Ref can have two types - a function or an object. We treat each case.
                if (typeof ref === 'function') {
                    return ref(element);
                }

                // As per https://github.com/facebook/react/issues/13029
                // it should be fine to set current this way.
                (ref as any).current = element;
            }),
        refs
    );

This is a hook that accepts any number of any kind of ref (Ref object or ref callback) and returns another ref as a callback.

Of course the amount of refs passed to this hook can’t change, otherwise useCallback will fail.