Add warning for ref to a stateless component

[bspaulding]

Fixes #4939. I know the issue was specifically to add a warning, but I thought it would be more consistent to throw.

I'm happy to back it down to a warning if that is preferable.

[jimfb]

semantics, but let's call this publicInstance or publicComponentInstance instead of componentInstance. The problem is that the component variable passed in is technically also a componentInstance (just, it's the internal one).

[bspaulding]

Dig. I definitely punted on what to name that. Will go with publicComponentInstance.

[bspaulding]

Now that this is a warning, I wonder if a more helpful message would be nice. Even if it was just Stateless function components cannot be given refs. Attempts to access this ref will fail.

Thoughts?

[jimfb]

Yeah, would be good to give as much context as possible also.

Stateless function components cannot be given refs (see ChildComponentName created by OwnerComponentName). Attempts to access this ref will fail.

[bspaulding]

Donezo. Also added the ref name into the error: (See ref "stateless" in StatelessComponent created by Parent)

[bspaulding]

A little confused about the lint failures. I see the same thing in master.

I assume I should not go ahead and fix those? Though I'd be happy to.

[zpao]

Yea, don't worry about any unrelated lint issues.

[sebmarkbage]

This whole warning should be within a __DEV__ block so that it doesn't need to be evaluated in the production builds.

[bspaulding]

Done.

[sebmarkbage]

We could possibly bring this in tomorrow for 0.14 if we feel like it.

[jimfb]

👍

[gaearon]

I have a question: it came up in reduxjs/react-redux#141.

I have a HOC that creates a ref in case the user might want to use it.
(The use case, I think, is calling imperative methods, or accessing underlying instance in tests.)
We don't use this ref ourselves—we only provide access to it because people asked for that access.

What should we do in HOC? Currently we do this:

function connect(Stuff) {
  return class ConnectedStuff extends Component {
    getWrappedInstance() {
      return this.refs.wrappedInstance;
    }

    render() {
      return (
        <Stuff ref='wrappedInstance' />
      );
    }
  }
}

This logs a warning with stateless components.
Can we keep supporting this for stateful components, but avoid warnings on stateless ones?

[bspaulding]

Took a stab at detecting this in react-redux