16

Here is a example for PropTypes:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Now I use Greeting component as:

<Greetings otherProp="this is a invalid prop" />

In this case, when I build app for deployment, no error is thrown & app is successfully built. But it give error in runtime & breaks down.

How can I add check to remove this problem & ensure no components are being built using wrong prop types.

7
  • 6
    Typescript? just saying ... Commented Feb 15, 2019 at 15:10
  • 1
    You can try this package if you don't want to go with the TypeScript solution. github.com/airbnb/prop-types-exact Commented Feb 15, 2019 at 15:12
  • @JonasWilms Yes, it a way, but I would like a non typescript solution :) Commented Feb 15, 2019 at 15:12
  • @SamuelVaillant Thanks, this looks promising. But will it work if I use it on components in a separate project & use those compiled components in main project, like a component kit? Let me check! Commented Feb 15, 2019 at 15:22
  • I don't see a reason why it wouldn't work. Commented Feb 15, 2019 at 15:25

3 Answers 3

15
+100

Your question arises from a misunderstanding of both the intent and implementation of PropTypes. PropTypes exists to provide configurable run-time validations of API usage. It does not perform static code analysis but rather validates usage at runtime.

To provide additional context, the concept predates the mainstream usage of many static analysis tools. Furthermore, even with the introduction of these tools, some prefer runtime validation approaches. One reason for this could be to retain tool chain simplicity. PropTypes validation works in vanilla JavaScript without any additional tools or languages. However, since you are using JSX, and therefore already have a complex tool chain that involves multiple languages, this consideration is less relevant. However, another reason to use PropTypes is, if you are building a library, you can still provide a level of validation to your consumers without requiring them to use the same, or for that matter any, of the static analysis tools you've chosen.

If you want to validate the correctness of your code before running it, you should use a static analysis tool. There are many options, and you may use multiple tools, but some examples include TypeScript, Flow, and Closure Compiler.

Note that any of these static analysis options are, by definition, orthogonal to PropTypes and so may be used together with them freely. Therefore, I'm not suggesting that you abandon the use of PropTypes, but rather that you add a static analysis tool that caters to your use case.

4

My personal recommendation is using a static code analysis tool as Aluan Haddad mentioned.

If you don't want to use a static code analysis tool, you could try to make the code fail on tests using a tool like https://github.com/esphen/jest-prop-type-error. But this implies you should have tests covering the integration between different components completely.

I would not consider this as a final solution for this problem but could be helpful as a temporary solution for large codebases while migrating to a static code analysis tool.

0

The idea behind react is component base. Prop-types is runtime type checking for React props and similar objects. You can use prop-types to document the intended types of properties passed to components.

In Greeting component, if you need name as a props, you have to define it on the prop-types. If name is required, you define it is required:

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

To use Greeting, you just call it and pass props to it. I don't think we need to check what we have pass into Greeting component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.