Lifting State Up

Sharing State Between Components

When two or more components need to share the same state, you "lift" the state to their closest common ancestor. The parent holds the state and passes it down as props.

Pattern

Parent owns the state and the setter function. It passes both as props to children that need them.

function Parent() {

const [value, setValue] = useState("")

return <Child value={value} onChange={setValue} />

}

Why This Matters

Lifting state up is a core React pattern. It keeps data flow predictable — data flows down via props, events flow up via callbacks. This makes your app easier to reason about and debug.