Category: React Answers

Sometimes, we may run into the "Invalid ARIA Prop Warning" when we’re developing React apps.

In this article, we’ll look at how to fix the "Invalid ARIA Prop Warning" when we’re developing React apps.

Fix the "Invalid ARIA Prop Warning" When Developing React Apps

To fix the "Invalid ARIA Prop Warning" when we’re developing React apps, we should make sure that the aria-* prop that we add to an element is a valid aria-* prop.

We should check the spelling of the attribute carefully.

Some attributes like aria-labelledby and aria-activedescendant are often misspelled.

Also, newer aria-* attributes may not be recognized by React yet. They’ll be recognized in later versions.

React strips out all unknown attributes when components are rendered, so aria-* attributes not recognized by React will not be rendered.

Conclusion

To fix the "Invalid ARIA Prop Warning" when we’re developing React apps, we should make sure that the aria-* prop that we add to an element is a valid aria-* prop.

We should check the spelling of the attribute carefully.

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.