What’s the Point of PropTypes In React?

PropTypes is one of React’s most useful accessories. It provides clear, enduring assertions as to the type of data a React component needs to render properly.

The tool is built-in and ready to use without wading through complicated set-up procedures.

However, some developers bypass PropTypes because of the small amount of extra up-front coding required. That has the potential to be a serious mistake. PropTypes (and the variety of similar static type checking tools) is a valuable asset for building scalable, maintainable software.

Laying the Groundwork

To explain how PropTypes works and what it brings to the table, it’s important to understand some relevant terms.

An “assertion” is a forceful, definitive statement, whether it’s about a fact or an opinion. In programming, that statement is that something specific is always true at a certain point in code execution.

Data types, which are usually referred to as types, group similar values on which common operations can be performed.

Types are a classification identifying possible values, the amount of memory allocated to save a value, and the kinds of operations and methods which can logically be used performed on them.

JavaScript has six regular types:  string, number, undefined, null, boolean, and symbol. Some have more variety than others. “String” refers to any string, for example, and “number” has a similarly wide scope.

Other types are more restricted. “Boolean” is a binary type, undefined is a default type for any undefined variables, and null indicates there is no variable declared at all.

While this sounds complex, it’s highly intuitive in practice. Given a string of numbers it’s easy to see they can be summed but not merged without changing the meaning. 2, 5, and 76 is much different than 2576.

Conversely, though a series of words can’t be summed it could be merged. “I”, “love”, and “Orlando” is easily read even when merged to “I love Orlando”.

What is Type Checking?

Types are one of the main foundations of a programming language. Errors in defining them can derail a program entirely. In fact, many execution errors in JavaScript are type errors- for instance, trying to divide by a string.

Type checking involves making runtime assertions about the correct type of data a component requires in order to render properly. It’s independent of build time type checking.

Using the previous example, type checking would catch that it’s impossible to divide “42” by “Dent” because division isn’t an operation which can be performed with a string.

Merging “Arthur” and “Dent” into “Arthur Dent” won’t cause a problem since the “merge” operation is logically allowed for strings.

The most common tools for type checking are Microsoft’s TypeScript and Facebook’s Flow. However, when working in React there’s already a low-maintenance, easy to learn tool for type checking built into the code base: PropTypes.

PropTypes validates the data types of values as they’re passed through types. It can also flag types as mandatory or set default values to reduce the workload.

The Case for Type Checking

Developers coming to JavaScript from other languages may be used to catching errors elsewhere in the process.

This is especially true with Python, where type isn’t necessarily the best description of the restrictions the developer is trying to impose on their input.

With JavaScript, though, there are three major benefits to making the time for type checking.

Technical and structural fitness

Props are necessary to pass any value to a child component. They serve as the component’s interface to get data passed down the component tree.

Without type checking (using PropTypes or some other tool) developers risk passing the wrong data types to components. This has a negative impact on the application’s performance and can lead to crashes.

On top of that, PropTypes help catch bugs by validating data types as they pass through. This is useful as an application scales and the codebase grows

Efficient teamwork

In Agile development, using PropTypes enables better coordination between teams working on different part of the same project. They serve as documentation of how a component has to be used in terms of passing props.

This helps people who use the component later know what they can and can’t do and how to use it effectively.

Practicality

Finally, using PropTypes is simply good business sense. They reduce the amount of time spent on debugging and testing.

Less time and higher developer productivity translate into lower ongoing maintenance costs for complex applications.

How PropTypes Works

Now that the value of using PropTypes has been established, it’s time to take a look at how it actually works.

PropTypes is React’s built-in type-checking tool. PropTypes is both the name for the tool and a reference to actual PropTypes, so it’s common to see it used both singularly and in plural.

In simple terms, the tool defines the type of a prop (string, number, undefined, null, boolean, or symbol). It then exports a range of validators that can be used to make sure the data received is correct.

Every time a value is passed through a prop it’s validated for type. (“Is this a number?”) When an invalid value is provided for a prop, a warning shows up in the JavaScript console to alert developers of the issue.

There are more options for specifying types and how they’re assigned, too. Developers can specify that only a single type can be passed to a component’s children.

They can also define default values for props using “defaultProps”. React set things up so that PropTypes type checking happens after default props are resolved, so type checking will also apply to those default props as well.

It’s important to note that PropTypes doesn’t throw errors. It only shows warnings in the JavaScript console, and PropType Checking is disabled in development. It’s a guide for better development, not a safety net for messy code.

Benefits of PropTypes

The biggest advantage of PropTypes is shared with other type checkers. It makes it easy to catch bugs caused by passing data in the wrong data type (like a string in a Boolean space).

PropTypes has an edge in that it is already built into React. It’s ready to use with a very gentle learning curve. Anyone that uses the component down the road can find all available props, including their desired data type, in one place.

Some code editors support code completion for props, so it’s possible to see the available props while typing in the component in a tooltip.

What Else Is Out There?

As mentioned earlier, the two most common alternatives to PropTypes are TypeScript and Flow.

TypeScript

A strongly typed superset of JavaScript created and maintained by Microsoft. It’s dominant in the Angular community but also used outside it, for example in React.

TypeScript has a larger community and it a more established and proven product. Users find it faster than Flow. As an additional edge, TypeScript is both a type checker and a transpiler that produces pure JavaScript.

Flow requires Babel or something similar to remove type annotations.

Flow

A static type checker from Facebook, which also maintains React. Because both fall under the same owner Flow is well-tailored to play well with React, with easy integration & automated refactoring.

Though it’s intuitive and efficient for use in building React and ReactNative applications, Flow has some drawbacks. Many in the community have commented on its weak documentation.

Also, it’s impossible to ignore type errors that come from components outside the developer’s control (like Node modules). New mistakes might get lost in the flood of old type errors passed down from those external components, and there’s no way to hide those alerts or shift them to another list.

Flow is a newer tool, which comes with its own suit of benefits and limitations. Facebook is constantly working out problems and experimenting with new functionalities.

The resulting frequent, sometimes extreme version changes can be hard for developers to manage.

In practice, the best solution is a combination of tools. There’s no downside to integrating PropTypes into the development process, even if Flow or TypeScript is also being used.

It doesn’t take much time to configure and saves a lot more in terms of maintenance, quality control, and developer frustration.

Final Thoughts

Static type analysis (another term for type checking) is a highly practical way to reduce technical debt. It lends itself to the creation of a codebase which is easier to work with, has fewer bugs, and supports Agile development methods.

Using type-checking to avoid errors does extend the working lifespan of a component, too. Developers tend to prefer better documentation and clarity of requirements, and they’re more likely to reuse components that are simple to understand.

From a business standpoint, PropTypes should be an easy sell. It’s simple to set up, intuitive to use, and adds an extra layer of automated quality control.

In short, unless there’s a compelling reason not to, take the time to set up PropTypes whenever using React or React Native. The potential benefits far outweigh the minimal set-up time.

At Concepta, our clients’ business goals are also ours. Building quality software with a long working life – in part by using tools like PropTypes – is just one way we work to protect your technology investment. Set up a free, no obligation meeting to talk about where your company is going and how Concepta can get you there faster!

Request a Consultation