Properties (Props) act as conduits, that is, they allow parent components to pass data to their child components via a one-way data flow. 

A state is used when a component has to store and process dynamic data, and it is always local to a component. However, since the state is local and encapsulated within a component, how can this data be shared with other components down the hierarchy? A typical React application is made up of several components, and although multiple techniques are available to share data between components, the most fundamental way is using props. Props offer a simple way for parent components to pass data to child components. In terms of usage, they are similar to the standard attributes on a component and can be bound to dynamic data using a pair of curly braces. Props are immutable, that is, the data of a prop cannot be changed. This is because the concept on which rops have been built is that of pure functions, and any changes made to the data of the parameters cannot be changed in a Prop.

Inside a class component, props can be accessed using this.props.propName. When working with function components, all props are received using a single object as an argument to the function.

Difference between state and props

Props and State are two different plain JavaScript objects. They both hold information that influences the render output. The differences between them are listed below. 

Props are passed to the components (just like in function parameters)State is managed within the component (just like a variable is declared within a function)
Props are immutableState is mutable
Props are used to manage data down from the view-controllerStates are managed in the view-controller

Props let you access all types of data, such as strings, numbers, objects, arrays, and functions. Since a prop is a conduit, it ultimately feeds into the component’s internal logic, which has to process and consume the incoming data.
So, you need to be careful regarding the type of data a prop receives. For instance, a prop that must receive an array of items cannot receive a string. Likewise, a prop that must expect a function cannot receive a number. Hence, it becomes important to type-check and validate the data flowing through a prop.
React offers a prop types package that exports numerous validators for all data types. These validators will show appropriate warnings in the console whenever a prop receives an incompatible type of data. 

Note: These validators will only issue warnings during development. Once a production build is produced, no warning will be shown because the validation code is removed during the optimization phase. 


  • PropTypes are special properties that we can assign to run type-checking on the props for a component. They export various validators that are used to ensure that the data received is valid. Owing to performance reasons, propTypes is checked only in the development mode.  Since props are a way of providing data and configuring a prop, the importance of validating props in production becomes crucial. 
  • In certain instances, the value of a prop could belong to more than one type. In such cases, you can use the oneOfType validator and provide options. If a prop accepts data of all renderable types, such as numbers, strings, and react elements, you can use the node validator. 
  • Besides the built-in types, React also allows you to define custom validators.   
  • Using the prototype package is extremely simple, and you can extend its capabilities by writing your validators.

 The ‘shape’ validator type allows you to describe the shape of the object you wish to receive in a prop.