What is Lifting State Up in React?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Spot the shared data

   Identify state that two or more components need to read or update together.

2. Step 2

   Find the common parent

   Locate the closest ancestor that renders all the components needing the state.

3. Step 3

   Move state upward

   Remove the state from the children and declare it in that common parent with useState.

4. Step 4

   Pass value and callback down

   Send the state value and an updater function to children through props.

5. Step 5

   Update via callbacks

   Have children call the passed-in callback to change state, so the parent stays the single source of truth.

Code Example

import { useState } from 'react'

function TemperatureInput({ label, value, onChange }) {
  return (
    <label>
      {label}:
      <input value={value} onChange={(e) => onChange(e.target.value)} />
    </label>
  )
}

export default function Calculator() {
  const [temperature, setTemperature] = useState('')
  return (
    <div>
      <TemperatureInput label="Celsius" value={temperature} onChange={setTemperature} />
      <TemperatureInput label="Mirror" value={temperature} onChange={setTemperature} />
      <p>Both inputs share one value: {temperature}</p>
    </div>
  )
}

Follow-up Questions

• How does lifting state up relate to a single source of truth?
• What is prop drilling and how does it connect to lifting state?
• When should you use Context instead of lifting state up?
• Why does React use one-way (top-down) data flow?
• How do children request state changes from a parent?