React Design Patterns and Best Practices

Prop types

Our goal is to write truly reusable components and to do that we have to define their interface in the clearest possible way.

If we want our components to be reused across the application, it is crucial to make sure that our components and their parameters are well-defined and straightforward to use.

With React, there is a powerful tool that lets us express, in a very simple way, the name of the props that a component expects to receive and some validation rules for each one of them.

The rules relate to the type of the property as well as to whether the property is optional or required. There is also the option to write custom validation functions.

Let's start with a very simple example:

const Button = ({ text }) => <button>{text}</button> ...