Tutorial

React.PropTypes Is Dead, Long Live PropTypes in React

Published on April 9, 2017
author

Casey A. Childers

React.PropTypes Is Dead, Long Live PropTypes in React

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

As of React v15.5 PropTypes are deprecated in the React package and have been given a package of their own.

Change is an inevitable part of life.

The upshot is twofold. 1) If you use another type-checking mechanism, you don’t have to worry about shipping unnecessary bulk to your end users. Omit the import and bank the weight loss. 2) Your PropType declarations are going to be more svelte than you ever thought possible.

The downside is that if you’ve been ignoring deprecation warnings about calling PropTypes directly since v15.3 (no judgement), that chicken has come home to roost.

Let’s get into it, but first you’ll need to install the package in your project.

  1. npm install prop-types --save

Or, you know, do the Yarn thing. Either way here’s your old simple component with validation:

import React from 'react';

function Detail ({caption, style}) {
  return <p style={style}>{caption}</p>
}

Detail.propTypes = {
  caption: React.PropTypes.string.isRequired,
  style: React.PropTypes.objectOf(
    React.PropTypes.string
  ),
}

export default Detail;

And here it is the new way:

import React from 'react';
import PropTypes from 'prop-types';

function Detail ({caption, style}) {
  return <p style={style}>{caption}</p>
}

Detail.propTypes = {
  caption: PropTypes.string.isRequired,
  style: PropTypes.objectOf(
    PropTypes.string
  ),
}

export default Detail;

Actually, scratch that. We promised svelte; so give it a destructured spin like so:

import React from 'react';
import {string, objectOf} from 'prop-types';

function Detail ({caption, style}) {
  return <p style={style}>{caption}</p>
}

Detail.propTypes = {
  caption: string.isRequired,
  style: objectOf(
    string
  ),
}

export default Detail;

That, dear friends, is pretty as a picture, and the good news is it all works precisely like you’re used to. Warnings in development. Silence in production.

The only notable exception is the one we mentioned above: directly invoked PropTypes. Those checks will automatically call the following block in production:

var productionTypeChecker = function () {
  invariant(false, 'React.PropTypes type checking code is stripped in production.');
};

Throwing an error and breaking stuff. You’ll have to refactor those invocations in your code or work out your own fork of prop-types to keep them on the upgrade train.

Whatever you do, don’t sweat this change. It’s a net gain with a mild inconvenience tax.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Casey A. Childers

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel