State vs Props

State and props confused me at first with determining when yo use what. So here’s a simple breakdown:

Props: Variables passed to it by its parent component.

State: Also variables, but directly initialized and managed by the component.

State is only reserved for the data that changed in out component and is visible in the UI. However, both state and props trigger a render of our React Component. Changed in state happen internally due to components changing their own state. But components cannot change its props. The change in props happens externally; in the parent/grandparent component. That is where the prop changes and those changes are then passed down to the children.

State all around seems more flexible. It has this option of setState when updated a component’s state. Events are used to trigger these changes which results in asynchronous code. It merges the existing state with whatever object is is passed in.

Some uses of setState include: Tracking incrementing values, toggle boolean values, track timestamps, user input, in-line style setting, array storage, etc.

Both state and props are valuable tools to have at our disposal and import to be able to tell the difference which I unfortunately struggled with to start. I’d get their uses mixed up, but now that my understanding of them as solidified I know I can use them to create powerful JS apps and tools.