React Native Cookbook

Chapter 6. Making Your App Maintainable

As soon as there is more than one software developer working on a project, maintaining consistency across your code base will become a serious consideration. The majority of the examples in this cookbook were stripped to the essentials: no PropTypes, no test cases, no type hints. The strategies for ensuring your code is well factored, easily maintained, and correct are varied, and I hope the approaches discussed here save you from dreadful runtime errors, system bugs, and hermetic coding styles.

6.1 Protect Your Components with PropTypes

Many software developers find that their components written for one purpose are being reused elsewhere for different purposes. For example, you might have designed an information card or a special button for a login form and are now repurposing the same component in an account profile screen.

When a component goes from being used in one context to a completely different one, strange things can happen. Bugs can start appearing from unexpected variations in the properties passed down to these components.

Problem

You are trying to establish a contract for your component. For everything to function correctly, your component must throw an error unless it receives the correct props from its parent. Other solutions exist, such as TypeScript or Reason. But design by contract or defensive programming is a well-established programming pattern for reducing bugs. In a language like JavaScript, we need all the help ...