Which of the following describes 'lifting state up' in React data flow?

Which of the following describes 'lifting state up' in React data flow?

• A. Moving shared state to the nearest common ancestor to share with multiple children.
• B. Storing all state in each component independently.
• C. Using local storage to persist state.
• D. Using CSS to style components.

Answer: (A)

Lifting state up means placing the shared data in the nearest common parent so multiple components can access and update it. In React, data flows from parents to children via props, and when a child needs to change that data, it calls a function provided by the parent. By keeping the state in one place—the parent—you create a single source of truth that all relevant components rely on, which keeps the UI consistent when parts of it need to reflect changes together. This approach is essential when siblings need to coordinate or share information. For example, if two components must display and update the same value, you store that value in the parent and pass it down as a prop, along with a callback to update it. The child components render based on the prop and use the callback to notify the parent of changes; the parent then updates its state, and the new value propagates down. Why the other ideas don’t fit: having each component store its own state leads to duplicated state and drift between components that should stay in sync. LocalStorage is about persisting state across sessions, not about coordinating state between components during a single render cycle. CSS is about styling and has no role in managing or sharing data. Implementation-wise, you define the state in the parent (for example, with a state hook), pass the current value and a setter or handler down to children, and have the children invoke the handler to request updates. This keeps the UI in sync and maintains a clear, top-down data flow.

Lifting state up means placing the shared data in the nearest common parent so multiple components can access and update it. In React, data flows from parents to children via props, and when a child needs to change that data, it calls a function provided by the parent. By keeping the state in one place—the parent—you create a single source of truth that all relevant components rely on, which keeps the UI consistent when parts of it need to reflect changes together.

This approach is essential when siblings need to coordinate or share information. For example, if two components must display and update the same value, you store that value in the parent and pass it down as a prop, along with a callback to update it. The child components render based on the prop and use the callback to notify the parent of changes; the parent then updates its state, and the new value propagates down.

Why the other ideas don’t fit: having each component store its own state leads to duplicated state and drift between components that should stay in sync. LocalStorage is about persisting state across sessions, not about coordinating state between components during a single render cycle. CSS is about styling and has no role in managing or sharing data.

Implementation-wise, you define the state in the parent (for example, with a state hook), pass the current value and a setter or handler down to children, and have the children invoke the handler to request updates. This keeps the UI in sync and maintains a clear, top-down data flow.