Add React.createRef() as the migration path for string refs

[gaearon]

Creating this issue to track #11555. I intend to close the PR as it's outdated, but we probably want to turn it into a real RFC and potentially get it in during 16.x.

[taion]

As an alternative to adding new React API, could this just be moved into userspace?

In the OP from #11555, we could amend the example as:

import createRef from 'create-react-ref';

class MyComponent extends React.Component {
  render() {
    return <div><input type="text" ref={createRef(this, 'div')} /></div>;
  }

  componentDidMount() {
    this.refs.div.value.focus();
  }
}

As a really dumb implementation:

export default function createRef(inst, refName) {
  if (!inst.refs) {
    inst.refs = {};
  }

  if (!inst.stringRefFuncs) {
    inst.stringRefFuncs = {};
  }

  if (!inst.stringRefFuncs[refName]) {
    inst.stringRefFuncs[refName] = c => {
      inst.refs[refName] = c;
    };
  }

  return inst.stringRefFuncs[refName];
}

This may not literally work as-is given that I think touching this.refs is weird, but it still seems like this API could live outside of React core.

It would even be possible to write a Babel transform to do this automatically.

[taion]

Alternatively:

function createRef() {
  function ref(c) {
    ref.value = c;
  }
  
  return ref;
}

I don't know if the edge cases exactly match #11555, but this can live in userspace, and doesn't require any changes to the reconciler.

Unless per #11555 (comment) and #11555 (comment), the intention is for users of "vanilla" function refs to migrate to this scheme as well.

[gaearon]

What is the benefit of moving it out? File size? (Presumably it would be small enough and the vast majority of libs would need it anyway.)

[taion]

I'm not sure. I didn't quite follow the conclusion from #11555 (comment).

Is the idea that, going forward, most ref users will use createRef rather than attaching a callback ref? Or is this a convenience thing for people currently using string refs, but that going forward people should still mostly use callback refs?

If it's a convenience thing, it seems like putting this in user space reduces the React API surface area.

[gaearon]

I think the idea is that most people will use createRef, and callback refs are relegated to being a power user feature since they’re more cumbersome and harder to explain.