DEV Community

Discussion on: Explain React State & Props Like I'm Five

Collapse
 
jamesyoung_au profile image
James Young • Edited

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/