Difference between PropTypes.exact and PropTypes.shape

Question

What's the difference between

PropTypes.exact({
  name: PropTypes.string,
  age: PropTypes.number
})

vs

PropTypes.shape({
  name: PropTypes.string,
  age: PropTypes.number
})

I will be glad of any help

Weller

Answer 1

Basically exact will give you a warning if your prop object contains extra property not mentioned while declaring it through PropTypes.exact({ }).

  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }), 

Reference: https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes

Grouchy

What happens with missing properties? In the example, what happens if I don't pass color for the shape, or name for the exact, does it fails? – Cleanly

Both will give you warning i.e if you do not pass color for shape and name for exact. What makes exact different is the behaviour on extra properties. If you pass additional property age to both of them, only exact will give a warning. – Grouchy

Thank you, actually if I want the parameters to be required I should use the .isRequired prop, thanks again! – Cleanly

Yes. isRequired helps in maintaining the parameters sanity. However, if your intention is to fail the compilation, it would not help in that case. You will get a red colour error in console, but your app will run as usual. This is in regards to devlopment in localhost. – Grouchy

Hi @UtsavPatel, I've been struggling to understand the usage of PropTypes.shape. All looking good on PropTypes.shape, if I attempt to use unmatched type, console warning shows as my expectation. However, if there is extra property or missing property, there is no console warning... Am I mistake anything here, or it is a bug of props-type? I created a codesandbox to make my question more specifically. codesandbox.io/s/clarification-of-prop-types-pfe45 Thank you. – Tortoise

@Yi-PeiHuang You'll have to use exact if you want to see console warning when none of the valid keys are passed. However, if you have defined props with 2 valid keys, and if you only pass 1 you would not see any error. Take a look at this example - codesandbox.io/s/clarification-of-prop-types-forked-7tts4?file=/… – Grouchy

Answer 2

PropTypes.shape just ensures that whatever property that has been provided matches to the type specified.

PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number
})

In the above case, you will get an warning in console only if name is not a string or if age is not a number. On the other hand, it will not throw any warning if we don't provide one or more properties or if an extra property is added.

name={5} age="Nineteen" will throw warning.
name="Sachin" age={50} will not throw warning.
name="Sachin" will not throw warning.
age={50} will not throw warning.
<ComponentName /> will not throw warning.
name="Sachin" age={50} centuries={100} will not throw warning.

It just ensures there is no mismatch of proptype. It doesn't worry about missing properties or providing additional properties.

---

PropTypes.exact is similar to PropTypes.shape, only difference is that it will throw warning when an additional property is added. Besides that, it just behaves like PropTypes.shape.

While using PropTypes.exact

PropTypes.exact({
    name: PropTypes.string,
    age: PropTypes.number
})

name={5} age="Nineteen" will throw warning.
name="Sachin" age={50} will not throw warning.
name="Sachin" will not throw warning.
age={50} will not throw warning.
<ComponentName /> will not throw warning.
name="Sachin" age={50} centuries={100} will throw warning.

Rapacious