Props and State in React

In React components, both props and state are variables that serve a similar function, but are used in different ways.

Props, short for properties, are how parent components pass data down to their child components. You pass props down by naming a variable and adding it to a component when it is being called, just like passing arguments when calling on regular vanilla JS functions. The use of props allows you to reuse more of your code and avoid repeating yourself. Props also can’t be changed, React components that only use props will always render the same output given the same input. Which makes our components pretty simple and singular.

Since props are read-only and don’t need to be changed manually, using only props in your React app won’t make your app dynamic. In order to make an app that can respond to user interactions and render accordingly, we need to use state.

State is used for data that can change based on user actions. We can hard code our initial data, but we can also pass state as props to other components who need them.

Unlike props, state is changeable. We can update state by creating functions and calling setState within them. setState will update the states value, and re-render the component automatically. This is great because now there is no need for us to explicitly re-render anything, React handles that for us.

You should want to use props when you want to pass static data from the parent to the child, and use state when passing information for the component to initialize or change on its own.