Sometimes, we may run into the "Refs Must Have Owner Warning" when we’re developing React apps.
In this article, we’ll look at how to fix the "Refs Must Have Owner Warning" when we’re developing React apps.
Fix the "Refs Must Have Owner Warning" When Developing React Apps
To fix the "Refs Must Have Owner Warning" when we’re developing React apps, we should make sure that we aren’t trying to add a ref to a function component.
Also, we shouldn’t also add a ref to an element that’s created outside of a component’s render function.
And we should make sure that eliminate multiple conflicting copies of React.
For instance, if Bar is a function component, we should write anything like:
<Bar ref={foo} />
Also, we should have string refs outside the render method of a class component:
ReactDOM.render(<App ref="app" />, el);
Instead, we write:
let app;
ReactDOM.render(
<App ref={inst => {
app = inst;
}} />,
el
);
to assign a ref to the component with a function ref.
We can use npm ls react to check if we have multiple copies of React loaded.
Conclusion
To fix the "Refs Must Have Owner Warning" when we’re developing React apps, we should make sure that we aren’t trying to add a ref to a function component.
Also, we shouldn’t also add a ref to an element that’s created outside of a component’s render function.
And we should make sure that eliminate multiple conflicting copies of React.
