Add boilerplate to compose refs

[pronebird]

Do you want to request a feature or report a bug?
feature

What is the current behavior?

Currently there is no way to compose refs. I.e I have a situation when I hook up a ref from multiple components via context, because one of the components needs to calculate the layout and the other ref is passed by the consumer.

Here is a little snapshot:

export const MegaComponent = React.forwardRef(function MegaComponent (props, ref) {
  return (<Context.Consumer>{
      (context) => (
        <PrivateMegaComponent {...context} ref={(value) => {
          // Runtime implementation detail
          // Seriously, I just happen to know it's RefObject.
          context.ref.current = value;

          if (ref) {
            // Always good to dive into how runtime works
            if (typeof ref === 'function') {
              ref(value)
            } else if (typeof ref === 'object') {
              ref.current = value;
            }
          }
        }}>
          {props.children}
        </PrivateMegaComponent >
      )}
    </Context.Consumer>
  );
});

What is the expected behavior?

I expect that React would provide a way to compose refs so that consumer wouldn't have to dive into runtime implementation details and reimplement what React already does.

[aweary]

@pronebird checkout #13029, specifically @gaearon's comment. This is the recommend approach in this case, though this pattern shouldn't be used frequently.

[azizhk]

Hi @aweary,
I don't get the reason why this pattern shouldn't be used frequently.
If it breaks encapsulation then there should be a boilerplate function exposed to compose refs.

[pronebird]

@aweary while the comment you've mentioned is a solution, there is still a problem with it.

When using TypeScript the RefObject.current is considered readonly for the consumer, which makes sense, however it makes it impossible to mutate it.

Folks make their own homegrown mergeRefs and basically break the type-safety in order to make it work. If the library had a sanctioned way of doing this it would be easier for everyone.