I constantly struggle to understand, when exactly should I be using .isRequired vs .defaultProps={...} My thought is that, I think I should never ever really need to use isRequired, because it seems manually creating a bug that can break in the application because create isRequired automatically remove the need to add a corresponding default prop, that makes me feel unfortable just because it means I won't be able to expect a fail-safe value.

It definitely sounds an opinion based question, but I look for a better opinion that makes more sense if there is one.

I constantly struggle to understand, when exactly should I be using .isRequired vs .defaultProps={...} My thought is that, I think I should never ever really need to use isRequired, because it seems manually creating a bug that can break in the application because create isRequired automatically remove the need to add a corresponding default prop, that makes me feel unfortable just because it means I won't be able to expect a fail-safe value.

It definitely sounds an opinion based question, but I look for a better opinion that makes more sense if there is one.

• javascript
• reactjs
• design-patterns
• react-proptypes

• 3 because it seems manually creating a bug that can break in the application -- isRequired does not crash an application, it only throws a console error. It is a developer tool, and a good one. – TKoL Commented Mar 6, 2018 at 15:34
• 1 You can't always provide a default value. For example when you have a ponent that renders information about a Person. The prop containing the person information must be supplied. You can't provide a default Person to show (that would be useless). – Wazner Commented Mar 6, 2018 at 15:34
• @Wazner well, true, but not true, I would say in that case I can supply at least an empty array if it expact an array of some sort, so I can have a fail safe to display error or whatever it should show – ey dee ey em Commented Mar 6, 2018 at 15:45
• If that's a valid state your application can be in, I agree. But if you build your application around the fact that, that ponent is only rendered when there is a Person. Why should it need to handle the case where there isn't one? – Wazner Commented Mar 6, 2018 at 16:21

1 Answer 1

Using prop types is a good way of documenting the API for a ponent, so that other people know how it works without reading the code.

The way it's usually thought of is the ponent is guaranteed to render without errors if all the required props are supplied. The props that are not required would only enhance the ponent with additional functionality.

Consider this example

function UserCard({ name, avatarUrl }) {
  return (
    <div>
      <p>{name}</p>
      {avatarUrl && <img src={avatarUrl} />}
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  avatarUrl: PropTypes.string
};

Now, if you want to render a default profile picture if it's not supplied, you could remove the conditional check inside the ponent and provide a default value instead.

function UserCard({ name, avatarUrl }) {
  return (
    <div>
      <p>{name}</p>
      <img src={avatarUrl} />
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  avatarUrl: PropTypes.string
};

UserCard.defaultProps = {
  avatarUrl: "/assets/generic-picture.png"
};