Learn TypeScript 3 by Building Web Applications

Component state

Creating stateless components is ideal for simplicity and testability (among other benefits), but of course, it isn't always possible. React allows components to maintain their own internal state as an object with arbitrary keys.

Whenever the state or props of a component change, a rendering cycle is triggered for that component and its children.

Unlike props, the component state is mutable by the component itself (since it owns its state), but mutations have to be done in a specific way; otherwise, React will not detect the changes and won't re-render the component sub-tree. Don't worry though: defining and managing the internal state of a React component is really simple to do.

Let's see how it works!

For now, we'll only ...