Props - Receiving Data in a Component

We have already discussed props in-depth. It is about time to reveal the secret and explain what they are.

Props enable components to receive any form of data and access it within the component. Let us think back to our Function component. We passed the props to our function as a regular argument. Class components work similarly but with the difference that the props are passed to the component with the Class constructor. They are only available to it via this.props instead of a plain function argument, as was the case with the function component. React takes care of all of this in the parsing stage of the createElement() calls.

Note: Whenever a component receives new props from the outside, it triggers a re-render of the component. We can explicitly prevent this from happening by using the shouldComponentUpdate() lifecycle method. Keep in mind that if a component ...