Common lifting state patterns in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does "lifting state up" mean in React?

It means moving shared state from child components to their closest common parent so that the parent can manage the state and pass it down as props.

beginner

Why do we lift state up in React?

We lift state up to keep data consistent between components that need to share or sync the same information.

beginner

In a parent component, how do you pass state and state updater to child components?

You pass the state value as a prop and the state updater function as another prop, so children can read and update the state via callbacks.

intermediate

What is a common pattern when two sibling components need to share state?

Lift the shared state up to their nearest common parent and pass the state and updater down to both siblings as props.

intermediate

How can lifting state up improve component reusability?

By moving state management to a parent, child components become simpler and focused on UI, making them easier to reuse with different data.

What is the main reason to lift state up in React?

A To create more components

B To make components heavier

C To avoid using props

D To share state between components

Lifting state up helps share state between components that need the same data.

Where should you lift state up to when two sibling components need to share data?

A To the nearest common parent component

B To the child component

C To the root of the app always

D To a random unrelated component

The nearest common parent is the best place to hold shared state for siblings.

How do child components update lifted state in the parent?

A By calling a state updater function passed as a prop

B By directly changing the parent's state

C By using global variables

D By reloading the page

Parents pass down a function to update state, which children call to change the state.

What happens if you don’t lift state up when needed?

A State is shared globally

B Components may have inconsistent or out-of-sync data

C You get automatic data sharing

D The app runs faster

Without lifting state, components can have different versions of the same data causing bugs.

Which React hook is commonly used to hold state that you might lift up?

A useRef

B useEffect

C useState

D useMemo

useState is the hook to create and manage state in functional components.

Explain how lifting state up helps two sibling components share data in React.

Think about where the shared state lives and how siblings get access.

Describe the steps to lift state up from a child component to a parent component in React.

Focus on how state and functions move between parent and child.