Refs Must Have Owner Warning

You are probably here because you got one of the following error messages:

React 16.0.0+

Warning:

Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

earlier versions of React

Warning:

addComponentAsRefTo(…): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component’s render method, or you have multiple copies of React loaded.

This usually means one of three things:

• You are trying to add a ref to a function component.
• You are trying to add a ref to an element that is being created outside of a component’s render() function.
• You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured npm dependency)

Refs on Function Components

If <Foo> is a function component, you can’t add a ref to it:

// Doesn't work if Foo is a function!
<Foo ref={foo} />

If you need to add a ref to a component, convert it to a class first, or consider not using refs as they are rarely necessary.

Strings Refs Outside the Render Method

This usually means that you’re trying to add a ref to a component that doesn’t have an owner (that is, was not created inside of another component’s render method). For example, this won’t work:

// Doesn't work!
ReactDOM.render(<App ref="app" />, el);

Try rendering this component inside of a new top-level component which will hold the ref. Alternatively, you may use a callback ref:

let app;
ReactDOM.render(
  <App ref={inst => {
    app = inst;
  }} />,
  el
);

Consider if you really need a ref before using this approach.

Multiple copies of React

Bower does a good job of deduplicating dependencies, but npm does not. If you aren’t doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems.

If you are using npm… npm ls or npm ls react might help illuminate.