Sharing state between components in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean to share state between components in React?

It means making some data available to more than one component so they can all use or update it together, like sharing a common notebook between friends.

beginner

How can you share state between a parent and its child component?

The parent holds the state and passes it down to the child using props. The child can also receive functions from the parent to update that state.

intermediate

What is 'lifting state up' in React?

It means moving the shared state to the closest common parent of components that need it, so they can all access and update the same state.

intermediate

Name a React hook commonly used to share state across many components without passing props deeply.

The useContext hook lets components access shared state from a context provider without passing props through every level.

beginner

Why is it better to avoid duplicating state in multiple components?

Duplicating state can cause inconsistencies and bugs because changes in one place won’t update the others. Sharing state keeps data in sync everywhere.

Which React feature helps share state without passing props through many components?

A useRef hook

B useEffect hook

C useContext hook

D useState hook

The useContext hook allows components to access shared state from a context provider without prop drilling.

What does 'lifting state up' mean?

A Moving state to the closest common parent component

B Passing state down as props

C Using local component state only

D Duplicating state in multiple components

Lifting state up means moving shared state to the nearest common parent so multiple components can access it.

If a parent component holds state and passes it to a child, how can the child update that state?

A By using useEffect hook

B By directly changing the parent's state variable

C By creating its own state variable

D By calling a function passed from the parent as a prop

The parent can pass a function to the child that updates the parent's state when called.

Why should you avoid duplicating state in multiple components?

A It reduces code complexity

B It can cause inconsistent data and bugs

C It makes the app faster

D It helps components work independently

Duplicated state can get out of sync, causing bugs and inconsistent UI.

Which of these is NOT a way to share state between React components?

A Using local variables inside each component

B Using React Context with useContext hook

C Using props to pass state from parent to child

D Lifting state up to a common parent

Local variables inside components are not shared state; they are private to each component.

Explain how you would share a piece of state between two sibling components in React.

Think about where the state should live so both siblings can access it.

Describe the role of React Context and useContext hook in sharing state.

Imagine a shared storage accessible by many components.