Day 11 of 100days of code

Fundamentals of State management

What is state management:

State management involves making decisions about when to create pieces of state, determining the types of states that are necessary, figuring out where to place each piece of state, and defining how data flows through the app.

Types of state:

Local state:

Local state refers to data that is required by one or a few components, and it is defined within a specific component. Only that component and its child components have direct access to this data, often by passing it through props. Local state is commonly managed using the useState hook, enabling functional components to incorporate stateful logic.

Global state :

Global state refers to state that multiple components might need, making it suitable for managing data that requires sharing and access across various components, especially when those components are not directly connected in the component tree. Global state is commonly managed using the React Context API for simpler cases or external state management libraries like Redux for more complex applications.

When to create state:

Is there a need to store data?
- This question addresses the fundamental requirement of whether the component needs to manage some form of data.
Will this data undergo changes?
- If the data is dynamic and subject to changes, you need a mechanism to manage and update that data over time.
Can the data be calculated from an existing state?
- This question focuses on whether the data you need to store can be derived or calculated from existing state in the component. If the data is dependent on the current state of the component, using derived state (computed from existing state) might be a more efficient solution.
Does it necessitate triggering a re-render upon change?
- React components re-render when their state changes. If the data you're managing needs to trigger a re-render of the component when it changes, it's a strong indicator that a new piece of state should be created to handle that data. This ensures that React properly updates the component UI in response to changes in the underlying data.

Where to place state:

If the data is specific to a particular component and doesn't need to be shared with other components, use local state. Keep it in the component's state. If it needs to be accessed by a child component, pass it through props.
If the data is used by one or more sibling components, consider lifting the state up to their first common parent. This ensures that siblings can share the state effectively.
If the data is needed by more than just child or sibling components, it suggests a global state. However, for now, the focus will be on local state and its applications within the component."

This explanation outlines a practical approach to state management in React, emphasizing the importance of considering the scope and relationships between components when deciding where to store and manage state.

Thinking of lifting state up:

Lifting state up in React involves moving the state from a lower-level component to a higher-level common ancestor within the component tree. This is done to share the state among multiple child components or enable communication between sibling components through a common parent. The process includes identifying the most appropriate location for the shared state to optimize data flow and simplify the application's logic.

The expression "lifting state up" is commonly utilized to describe the process of transferring local state from a specific component to a shared ancestor. This method is implemented to ease communication between components or to enable the sharing of state among them. Despite the fact that the state being lifted is originally confined to a subtree, it becomes reachable by both the ancestor and its descendants.

Tomorrow, we'll go back to our travel list application and apply the idea of lifting state up. This way, the PackingList component will be able to reach and utilize the data from the Form.