Codecademy - Learn React: State Management

React Programming Patterns

When a component has too many responsibilities and becomes difficult to maintain, it's a good idea to split it into multiple simpler components.
The pattern of splitting components into stateful (container) and stateless (presentational) components helps reduce complexity.
Stateful components handle complex state management and logic, while stateless components focus on rendering JSX.
By separating concerns, we can improve code organization and maintainability.

The container component is responsible for the functional part of a component, such as maintaining state and performing calculations based on props.
It is also known as a stateful component because it manages the state of the application.
The container component passes the state and other necessary data to the components it renders through props.
By separating the functional logic into a container component, we can keep the presentational components focused on rendering JSX and improve code organization.

A presentational component, also known as a stateless component, is responsible for rendering JSX.
It should only contain JSX and should not handle any state or logic.
The presentational component should be exported so that it can be used by the container component.
The container component will be responsible for rendering the presentational component and passing the necessary props to it.
Even though a presentational component doesn't maintain state, it can still be reactive. Changes in props can trigger a re-rendering of the JSX.

In the example provided, the presentational component is exported and imported by the container component, which is responsible for rendering it.

Presentational components communicate changes to container components by invoking a change handler function passed to them as a prop.

Components should never directly update their props, as React functional components should be pure functions.
The container component defines and provides the change handler function to the presentational component through a prop.

In the example provided, the Container component maintains the isActive state and passes the setIsActive function to the Presentational component through the toggle prop.
When the Presentational component needs to communicate a change to the active prop, it calls the function provided through the toggle prop, passing the updated value.
The change in the active prop triggers a re-rendering of both the Presentational component and any other sibling components that receive the active prop from the Container component.
This pattern enables communication between parent and child components and indirectly results in communication between sibling components with a common parent.
It promotes a unidirectional flow of data, with state and change handlers defined in the container component and passed down to presentational components as props.