React Props vs State

New to your journey into React and wondering the difference between props and state? They can look similar (they are both plain Javascript objects) so I’ll be explaining what both are and how they are different!

Laptop on a work desk
Photo by karishea on Unsplash

Before we talk about props and state, let’s talk about components in React. The main job of a React component is to take data (provided by state and props) and turn it into rich HTML that a user will eventually see and interact with. Components are essentially the building blocks for a React app.

Props are short for properties. They are a way to pass information from a parent component into a child component in React. They are immutable (in terms of the component receiving them). Props should not change (setProps and replaceProps are now deprecated). Components that only have props and not state are called stateless components. Because they are only receiving props, and not much else is going on, stateless components are much easier to follow and test.

Similarly to props, state also holds information about the component. This data changes over time during the React component’s lifetime as a result of user events. State is optional for each component. If state is set, it is set with an initial value when the component mounts. A component manages its own state internally. In other words, state is limited to the current component (whereas props can be passed down from component to component). A component that has state is called, you guessed it, a stateful component.

I hope this was a good introduction to props and state in React! Thanks for reading!