React PropTypes: objectOf vs shape

The ‘prop-types’ package is used by millions of React developers every day to type-check the props passed to their components. While many developers are familiar with a variety of its built-in validators, handling object props can sometimes be confusing. Fortunately, the ‘PropTypes.objectOf()’ and ‘PropTypes.shape()’ validators are here to help.

Understanding PropTypes.shape()

The ‘PropTypes.shape()’ validator is used when you need to describe an object whose keys are known ahead of time, and where the values of those keys can be different types. This is particularly useful for validating complex objects with known structures.

Example

Consider the following example where we define a prop object with known keys:

import PropTypes from 'prop-types';

// Expected prop object - keys known ahead of time
const myProp = {
  name: 'John',
  surname: 'Smith',
  age: 27
};

// PropTypes validation for the prop object
MyComponent.propTypes = {
  myProp: PropTypes.shape({
    name: PropTypes.string,
    surname: PropTypes.string,
    age: PropTypes.number
  })
};

In this example:

• ‘name’, ‘surname’, and age are the known keys of the ‘myProp’ object.
• The ‘PropTypes.shape()’ validator ensures that ‘name’ is a string, ‘surname’ is a string, and ‘age’ is a number.

Understanding PropTypes.objectOf()

The ‘PropTypes.objectOf()’ validator is used when you need to describe an object whose keys might not be known ahead of time, and where the values of those keys are of the same type.This is useful for validating objects with dynamic keys but consistent value types.

Example

Consider the following example where we define a prop object with dynamic keys:

import PropTypes from 'prop-types';

// Expected prop object - dynamic keys (i.e. user ids)
const myProp = {
  25891102: 'johnsmith',
  34712915: 'ducklord',
  76912999: 'mrquacks'
};

// PropTypes validation for the prop object
MyComponent.propTypes = {
  myProp: PropTypes.objectOf(PropTypes.string)
};

In this example:

• The keys of ‘myProp’ are dynamic (e.g., user IDs).
• The ‘PropTypes.objectOf()’ validator ensures that all values in the ‘myProp’ object are strings.

Key Differences

1. Key Structure:
   • ‘PropTypes.shape()’: Used when the keys of the object are known and have different types.
   • ‘PropTypes.objectOf()’: Used when the keys are dynamic and the values have the same type.
2. Usage Scenarios:
   • Use ‘PropTypes.shape()’ for objects with a predefined structure.
   • Use ‘PropTypes.objectOf()’ for objects with a uniform value type but unknown keys.

Use Case: Validating User Profiles

Consider a scenario where you have a component that receives a user profile object with known keys:

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

const UserProfile = ({ user }) => (
  <div>
    <h1>{user.name} {user.surname}</h1>
    <p>Age: {user.age}</p>
  </div>
);

UserProfile.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    surname: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired
  }).isRequired
};

export default UserProfile;

Use Case: Validating User Scores

Consider another scenario where you have a component that receives a user scores object with dynamic keys:

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

const UserScores = ({ scores }) => (
  <ul>
    {Object.entries(scores).map(([userId, score]) => (
      <li key={userId}>User {userId}: {score}</li>
    ))}
  </ul>
);

UserScores.propTypes = {
  scores: PropTypes.objectOf(PropTypes.number).isRequired
};

export default UserScores;

Wrapping It Up

The ‘PropTypes.shape()’ and ‘PropTypes.objectOf()’ validators in React’s ‘prop-types’ package provide powerful tools for validating object props. By understanding the differences and appropriate use cases for each, you can ensure that your components receive the correct data structures, leading to more robust and maintainable code.