Category: JavaScript

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.

Sometimes, we may run into the ‘Unknown Prop Warning’ when developing React apps.

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

Fix the ‘Unknown Prop Warning’ When Developing React Apps

To fix the ‘Unknown Prop Warning’ when developing React apps, we should make sure that we’re passing in props to an element that are recognized as valid attributes.

For instance, if we have:

const Foo = (props) => {
  if (props.layout === 'horizontal') {
    return <div {...props} style={getHorizontalStyle()} />
  } else {
    return <div {...props} style={getVerticalStyle()} />
  }
}

Then we all the properties of props as props of the div element.

This means that the layout prop is also passed in as a prop of the div.

However, layout is not a valid attribute of the div, so we’ll get the ‘unknown prop’ warning in the console as a result.

To make sure we’re only passing in valid properties to the divs, we should destructure the props, we want to pass in.

For instance, we can write:

const Foo = ({ layout, ...rest }) => {
  if (layout === "horizontal") {
    return <div {...rest} style={getHorizontalStyle()} />;
  } else {
    return <div {...rest} style={getVerticalStyle()} />;
  }
};

to use the rest syntax to of the rest object that excludes the layout property.

Then we can spread the rest object properties as props of the div.

Assuming rest property names are all valid attribute names, we shouldn’t get the warning anymore.

Conclusion

To fix the ‘Unknown Prop Warning’ when developing React apps, we should make sure that we’re passing in props to an element that are recognized as valid attributes.