What is the difference between defaultProps and propTypes in React?

What is the difference between defaultProps and propTypes in React?

defaultProps are used to set default values for props, while propTypes are used to validate the types of props.

Can you give me an example of how to use both in a component?

Sure! Here's a simple example:

import React from 'react';

const MyComponent = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

MyComponent.defaultProps = {
  name: 'Guest',
};

MyComponent.propTypes = {
  name: PropTypes.string,
};

This sets 'Guest' as the default name if none is provided.

What happens if I don't use propTypes?

If you don't use propTypes, React won't validate the props passed to your component, which can lead to bugs.

Is it mandatory to use defaultProps?

No, it's not mandatory. If you don't specify defaultProps, the component will just receive undefined for any missing props.