Author: John Au-Yeung

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.

Sometimes, we may run into the "React Element Factories and JSX Warning" when we’re developing React apps.

In this article, we’ll look at how to fix the "React Element Factories and JSX Warning" when we’re developing React apps.

Fix the "React Element Factories and JSX Warning" When Developing React Apps

To fix the "React Element Factories and JSX Warning" when we’re developing React apps, we shouldn’t call function components directly.

For instance, don’t write anything like:

import MyComponent from 'MyComponent';

function render() {
  return MyComponent({ foo: 'bar' });
}

If we call MyComponent as a regular function, we’ll get the "React Element Factories and JSX Warning".

Instead, we should use the JSX syntax to render the component.

To do that, we write something like:

import MyComponent from 'MyComponent';

function render() {
  return <MyComponent foo="bar" />;
}

We can call the React.createFactory method to convert the function component into a function we can call.

To use it, we write:

import React from 'react';
import MyComponent from "MyComponent";
const MyComp = React.createFactory(MyComponent);

function render() {
  return MyComp({ foo: "bar" });
}

Also, we can create dynamic components by using the React.createElement with the function to render it:

import React from 'react';
import MyComponent from "MyComponent";

function render(MyComponent) {
  return React.createElement(MyComponent, { foo: 'bar' });
}

Conclusion

To fix the "React Element Factories and JSX Warning" when we’re developing React apps, we shouldn’t call function components directly.

We can call the React.createFactory method to convert the function component into a function we can call.

Sometimes, we may run into the "Don’t Call PropTypes Warning" when we’re developing React apps.

In this article, we’ll look at how to fix the "Don’t Call PropTypes Warning" when we’re developing React apps.

Fix the "Don’t Call PropTypes Warning" When Developing React Apps

To fix the "Don’t Call PropTypes Warning" when we’re developing React apps, we shouldn’t call any function that are required by PropTypes.

For instance, we shouldn’t write anything like:

const apiShape = PropTypes.shape({
  body: PropTypes.object,
  statusCode: PropTypes.number.isRequired
}).isRequired;

const error = apiShape(json, 'response');

We can’t call the function returned by PropTypes.shape directly.

Conclusion

To fix the "Don’t Call PropTypes Warning" when we’re developing React apps, we shouldn’t call any function that are required by PropTypes.

Sometimes, we may run into the ‘Invalid Hook Call Warning’ when we’re developing React apps.

In this article, we’ll look at how to fix the ‘Invalid Hook Call Warning’ when we’re developing React apps.

Fix the ‘Invalid Hook Call Warning’ When Developing React Apps

To fix the ‘Invalid Hook Call Warning’ when we’re developing React apps, we should only call hooks inside the body of function components.

To make sure that we can use hooks in React components, we should make sure we have React version 16.8 or higher.

Also, we should make sure that we’re mismatching versions of React and React DOM.

We should also not have more than one copy of React, which may create issues.

To check for multiple copies of React, we can run:

npm ls react

to check for multiple copies of the react package.

The Rules of Hooks should be followed when we’re calling hooks if we eliminated the React version issues.

The first rule of hooks is that we should only call hooks at the top levels.

Hooks can’t be called inside loops conditions or nested functions since only calling hooks at the top level of a function component ensure that the hooks are called in the same order that they’re listed.

The other rule of hooks is that they can only be called from function components or custom hooks.

This way, we can ensure that logic can easily be reused in our React project.

To check for rule of hooks with ESLint, we can add:

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

to .eslintrc file.

Conclusion

To fix the ‘Invalid Hook Call Warning’ when we’re developing React apps, we should only call hooks inside the body of function components.

To make sure that we can use hooks in React components, we should make sure we have React version 16.8 or higher.

Also, we should make sure that we’re mismatching versions of React and React DOM.

The Rules of Hooks should be followed when we’re calling hooks if we eliminated the React version issues.

Sometimes, we may run into the ‘Special Props Warning’ when we’re developing React apps.

In this article, we’ll look at how to fix the ‘Special Props Warning’ when we’re developing React apps.

Fix the ‘Special Props Warning’ When Developing React Apps

To fix the ‘Special Props Warning’ when we’re developing React apps, we shouldn’t accessing special props in our React components.

Special React component props includes the key and ref props.

They aren’t passed into the component.

For instance, we shouldn’t write code like:

const Foo = ({ ref }) => {
  return <Comp foo={ref} />;
};

or

const Foo = ({ key }) => {
  return <Comp foo={key} />;
};

since ref and key are special props that can’t be accessed by the component that’s receiving the props.

If we need to pass in values to the prop, we shouldn’t use key or ref as prop names.

Instead, we write something like:

const Foo = ({ id }) => {
  return <Comp foo={id} />;
};

const Bar = () => {
  return <Foo id={1} />;
};

which do not attempt to access those props in any component code.

Conclusion

To fix the ‘Special Props Warning’ when we’re developing React apps, we shouldn’t accessing special props in our React components.

Special React component props includes the key and ref props.

They aren’t passed into the component.