When it comes to React, there are two main ways in which we can store or manage data. This article will explain the difference between the two. This article assumes that have some understanding of the following:
- how React works
- how React is written
- functional components
- React Hooks — specifically useState
First things first, there is nothing particularly special about state and props, they are simply Javascript objects that we use to store, manage, and make use of data in our React components. With that out of the way, we can move onto discussing the difference between the two.
State
State is just a piece of data that lives inside of a component. The component is responsible for managing this data. You can think of state the same way you think of variables inside of a function (hence functional components), where the function is responsible for managing and making use of the variables inside of it. State is optional — we make use of it when we need our component to hold some type of information.
Props
Similar to state, props (short for properties) is just another piece of data that we can make use of within a component — the difference being that it is a piece of data that is passed down to a component from another component, rather than the component itself being responsible for creating / maintaining it. You can think of props the same way you think of arguments that you pass to functions.
—-
To better showcase this, please check out the Repl.it I created — which includes additional comments within the code. The only files that matter here are App.js and Box.js — this is where you'll find all of the comments I added. I suggest starting with App.js
TLDR
State: data that lives inside a component
Props: data that is passed into another component
As always, refer to the docs for more detail:
State vs Props
Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.
Top comments (0)