Explain React State & Props Like I'm Five

Comments

[Peter Shaker]

Imagine a component is any person of us ..

You have your own inherited Characteristics from you parents (hair color , place of birth , ... ) .
You have no hands in them , you just have to accept them as they are ... these are called PROPS .

and you can Acquire some other Characteristics ( make exercise , eat well ,brush your teeth, ... ) .
These are called STATE

That's it ;)

[Amin]

Imagine you have a Star Wars lego kit. The Cantina would be the component, and the props would be the chairs and maybe some music instruments played by the musicians. There can be multiple Cantinas in the same planet, which have differents setup (two chairs, four musicians, ...).

Now, imagine that the Cantina is only opened the day. So you put a sign outside before going to bed indicating that this is time to close the bar. The fact that the sign is there or not (boolean) would be your state. Of course, only the bar manager would be able to change the state of this boolean (you don't want other's component like the Jedi temple to dicate when to open or close your bar, don't you?)

May the force be with you.

[Oğuzhan Olguncu]

Let's suppose you are an elementary school kid and you have a lunchbox. Food in your lunchbox may change or vary like apples, oranges, bagel this is Props. And your lunchbox may be empty, half-full or full. This is your State of the lunchbox.

[Sylwia Vargas]

One of my friends once used this analogy:
Imagine you're in your room — that's our component.
The room has a closet (state) where you can put whatever you want, e.g. some jumper or blanket (objects), some money (other data types like integer), but there's also a switch that switches on and off the light in your room (boolean).
Now, imagine that you take the blanket out of the closet and bring it to the sofa — you have just passed the props! The blanket is the prop from your room to its child, the sofa.
Let me know whether this analogy works for you!

[Rocky Kev]

I always love explainlikeimfive concepts - thanks for kicking off this convo.

Sometimes, knowing the explanation doesn't help with when it's developing time!

So to use some real-world react examples. Note, I'm going to assume hooks and ignore downward data flow to make this a bit easier to digest. If that doesn't make sense... just ignore for now!

Your web site has two states: a light mode and a dark mode.

You have a button on your site that is a light switch graphic (on/off). The light switch is a component. The on/off are two values that you can pass as props into the light switch component.


<Lightswitch light=true />


Inside your Lightswitch component, you can have a conditional that changes which mode.

[Ian Mostar]

Food.

The food prepared outside the house is Props.
You DON'T have control to the food delivered at your house.

The food you make inside the house is State.
You HAVE control of your food you make.

[Calvin Lang]

Okay kids stand in line and face me! Each of you has 3 cards, one blue, one yellow, and one, oh eww, pink!

Now that you're all in a line, look at the person at your right and the person to your left. Now, whenever someone on your right tells you to change your color, it's your job to change your color and to tell the person on your left what the new color!

OMG now you all have pink cards! Ewwww! Okay now person number 2 you change your card and, remember to tell the person on your left what you did. Wait for kids to pass their props. Now all of you are blue except person number 1!

[James Young]

Component state is what's remembered (if anything). A stateful software component remembers information, that is, the set of its variables and constants and their values. Program state also includes its execution state.

For example in ye olden days before multicore CPUs, the kernel would give the illusion of multiprogramming by rapidly switching between running programs so it would appear as if all your programs are running at the same time on your CPU.

The kernel could do this by saving the program state, that is, saving the program registers and a copy of its data (variables and other stuff). That way, it could resume execution of the program later by running it from where it left off, by restoring its state.

React state is the same sort of idea, but for React components. A component with state has data that changes. React props are the same thing, but are immutable (they can't change, and remain constant).

A React component with state might be a counter. It's not a static component that just sits there and only needs to be repainted (for example if moved, resized, etc). A counter component updates its count value and is repainted with its new value (its state) every so often.

A good example of React state and props might be a chat window component on the page. The title of the chat window remains the same and is part of the chat component props. The state of the window would be the history of the chat at any point in time. Both props and state are updated in the component lifecycle, although state is more dynamic because it can change.

See also: flaviocopes.com/react-state-vs-props/

[Nested Software]

To briefly add to the other comments...

Any given React component may keep track of its own state - so that's the "state" part of your question. For example, a "Calendar" component might keep the selected date and the view mode (e.g. week, month) as part of its state.

React components are often nested inside other react components. Often when you create a component inside of another one, you may wish to pass some information from your parent component to the child component you are creating. That's the "props" part of your question.