Introduction
Explore how React components hold and manage their own state, triggering re-renders when state changes. Understand the role of lifecycle methods in class components and how function components use hooks to handle state and lifecycle events.
We'll cover the following...
We will look at state and lifecycle methods briefly.
State
Components can:
- Hold
- Manage
- Change their own state.
But if the state within a component changes, it always triggers a re-render of the component. This behavior can be avoided by opting for a PureComponent, which might be useful in some cases.
The foundational logic remains, though.
Relying on the state to change our interface is extremely useful. It means that we do not need to rely on manually calling ReactDOM.render() to update our interface and that components manage their own re-renders independently.
Lifecycle methods
The state is tightly connected to the lifecycle methods. These comprise several optional methods that can be called at different times and for different use cases in class components. For example, there are lifecycle methods for when a component is first mounted, or if a component receives new props, or if the state within a component changes.
Since React 16.8.0, function components can also manage their own state through hooks. Hooks can also react to certain lifecycle events.