You may have heard the terms "stateful" and "lifting props" thrown around in the community for a while.

Here's a TL;DR for you:

Props cannot change, but State can.

But wait-- what does that even mean?

Think of working with polymer clay: the type of clay you can bake to set its shape.

Brands you may recognize are Sculpey, Fimo, or Premo.

Think of the clay as information; let's say you want to create a figure of your D&D character. You mold the clay to your vision, bake it, and paint it. You know how your character looks like: their mannerisms, style-- you don't need anyone else's input on how to create your figure. You finish your character piece with confidence.

This would be an example of a prop: no one else but you influences the look of the figure.

However, if a friend commissions you for a custom D&D character piece, you need to mold and meld it to their vision; therefore, you need their input which could be changed in the middle of creation: "Pointy ears! Wait, no-- oh! Make them blonde--NO bald--NO! Covered in horns!"

This is an example of state: the state of the figure is constantly changing because your friend keeps changing their input.

I keep highlighting input because, when dealing with React states, a common element that you will find yourself using state for are text fields. That's because you will need input from the user to set the information the state will hold!

Whereas props (fun fact: it's short for "properties") are usually set pieces of information that the dev or client knows about and doesn't need user input to display.

So, TL;DR:

• props === your character that you designed. No one else but you can change it.

• state === your friend's character that you offered to design (and now probably regret because they keep changing their mind). It is mutable by the public.

Thanks for reading!!

I hope that wasn't confusing for you! If you have any questions or feedback, feel free to leave a comment below (and I will answer within 24-48 hours) or DM me on Twitter- @catballar!