Introduction
Lifting State Up is a common React pattern used when multiple components need to work with the same state. Instead of keeping the state inside one child component, we move it to their closest common parent component. The parent then passes the required data and event handlers to its children through props. In this chapter, we will solve practical questions to understand how Lifting State Up works in React applications. React js Lifting State Up practice questions with solutions help to understand the concepts.
1. What is Lifting State Up in React?
Lifting State Up means moving state from a child component to its closest common parent component so that multiple components can use and update the same state.
For example, suppose two components need access to the same value:
function InputOne() {
// State here
}
function InputTwo() {
// Same state needed here
}
Instead of keeping separate state in both components, we can move the state to their common parent:
function Parent() {
const [value, setValue] = useState("");
return (
<>
<InputOne value={value} setValue={setValue} />
<InputTwo value={value} />
</>
);
}
This pattern is called Lifting State Up.
2. Why is Lifting State Up used in React?
Lifting State Up is used when two or more components need to share or coordinate the same state.
For example:
function Parent() {
const [name, setName] = useState("");
return (
<>
<NameInput name={name} setName={setName} />
<NameDisplay name={name} />
</>
);
}
Here:
Parentowns the state.NameInputupdates the state.NameDisplayreads the state.- Both components stay synchronized.
This avoids keeping separate copies of the same state in different components.
3. How do you lift state from a child component to a parent?
Suppose a child component has this state:
function Child() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>+</button>;
}
If the parent also needs the count, we can move the state to the parent:
function Parent() {
const [count, setCount] = useState(0);
return <Child count={count} setCount={setCount} />;
}
The child can then use the state passed by the parent:
function Child({ count, setCount }) {
return (
<button onClick={() => setCount(c => c + 1)}>
Count: {count}
</button>
);
}
The state is now owned by the parent.
4. How do you share state between two sibling components?
Sibling components cannot directly share state with each other.
Instead, move their shared state to their common parent.
Example:
function Parent() {
const [message, setMessage] = useState("");
return (
<>
<Sender message={message} setMessage={setMessage} />
<Receiver message={message} />
</>
);
}
The first child can update the state:
function Sender({ message, setMessage }) {
return (
<input
value={message}
onChange={e => setMessage(e.target.value)}
placeholder="Enter message"
/>
);
}
The second child can display it:
function Receiver({ message }) {
return <h2>{message}</h2>;
}
The parent acts as the common owner of the state.
5. How do you pass a state value from the parent to a child?
After lifting state, the parent can pass the state value to a child through props.
Example:
function Parent() {
const [name, setName] = useState("Riya");
return <Child name={name} />;
}
The child receives it:
function Child({ name }) {
return <h2>Hello, {name}</h2>;
}
Here, name is owned by the parent and passed to the child through props.
The child should not directly modify the parent’s state value.
6. How do you update parent state from a child component?
A parent can pass a state setter or an event handler function to the child.
Example:
function Parent() {
const [count, setCount] = useState(0);
return (
<>
<h2>{count}</h2>
<Child onIncrease={() => setCount(c => c + 1)} />
</>
);
}
Child component:
function Child({ onIncrease }) {
return (
<button onClick={onIncrease}>
Increase
</button>
);
}
The child does not own the state. It requests an update by calling the function provided by the parent.
This is an important React pattern:
Parent owns the state → Child receives data and callback through props.
7. How do you use Lifting State Up with a controlled input?
A common example is a controlled input.
function Parent() {
const [username, setUsername] = useState("");
return (
<>
<UsernameInput
username={username}
setUsername={setUsername}
/>
<h2>Username: {username}</h2>
</>
);
}
The child component:
function UsernameInput({ username, setUsername }) {
return (
<input
value={username}
onChange={e => setUsername(e.target.value)}
placeholder="Enter username"
/>
);
}
Now the input value is controlled by the parent state.
Whenever the user types:
onChangeruns.- Parent state is updated.
- Parent renders again.
- Updated
usernameis passed to the child.
8. How do you use Lifting State Up with two inputs?
Suppose we have two inputs that need to work with the same parent state.
function Parent() {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
return (
<>
<NameForm
firstName={firstName}
setFirstName={setFirstName}
lastName={lastName}
setLastName={setLastName}
/>
<Preview
firstName={firstName}
lastName={lastName}
/>
</>
);
}
The form component:
function NameForm({
firstName,
setFirstName,
lastName,
setLastName
}) {
return (
<div>
<input
value={firstName}
onChange={e => setFirstName(e.target.value)}
placeholder="First Name"
/>
<input
value={lastName}
onChange={e => setLastName(e.target.value)}
placeholder="Last Name"
/>
</div>
);
}
The preview component:
function Preview({ firstName, lastName }) {
return (
<h2>
{firstName} {lastName}
</h2>
);
}
The parent owns the data, while different children use that data for different purposes.
9. What is the difference between separate state and lifted state?
Suppose two components have their own state:
function ComponentOne() {
const [count, setCount] = useState(0);
}
function ComponentTwo() {
const [count, setCount] = useState(0);
}
These are two independent state values.
Updating ComponentOne does not automatically update ComponentTwo.
With lifted state:
function Parent() {
const [count, setCount] = useState(0);
return (
<>
<ComponentOne count={count} setCount={setCount} />
<ComponentTwo count={count} />
</>
);
}
Both components can work with the same state owned by the parent.
Therefore:
Separate State: Each component manages its own state.
Lifted State: A common parent manages the shared state.
10. How do you build a practical Temperature Converter using Lifting State Up?
A temperature converter is a good example of Lifting State Up.
The parent stores the temperature:
import { useState } from "react";
function TemperatureApp() {
const [temperature, setTemperature] = useState("");
return (
<div>
<h2>Temperature Converter</h2>
<TemperatureInput
temperature={temperature}
setTemperature={setTemperature}
/>
<TemperatureResult temperature={temperature} />
</div>
);
}
Input component:
function TemperatureInput({ temperature, setTemperature }) {
return (
<input
type="number"
value={temperature}
onChange={e => setTemperature(e.target.value)}
placeholder="Enter Celsius"
/>
);
}
Result component:
function TemperatureResult({ temperature }) {
const celsius = Number(temperature);
const fahrenheit = temperature === ""
? ""
: (celsius * 9) / 5 + 32;
return (
<h3>
Fahrenheit: {fahrenheit}
</h3>
);
}
How it works
TemperatureAppowns thetemperaturestate.TemperatureInputreceives the value and update function.- When the user enters a temperature, the parent state changes.
TemperatureResultreceives the updated temperature.- The result is recalculated and displayed.
This is the basic idea of Lifting State Up: keep shared state in the closest common parent and pass the required data and callbacks to child components.
Key Takeaways
- Lifting State Up means moving state to a common parent.
- It is useful when multiple components need the same state.
- Sibling components can share state through their common parent.
- The parent becomes the owner of the shared state.
- State values can be passed to children using props.
- Children can request state updates through callback functions.
- Controlled inputs commonly use the Lifting State Up pattern.
- Each component calling
useState()normally has its own independent state. - Lifting state avoids keeping multiple unsynchronized copies of the same data.
- Keep state at the lowest common ancestor that needs to coordinate the components.
FAQs
1. What is Lifting State Up in React?
Lifting State Up is the process of moving state from a child component to its closest common parent so that multiple components can use the same state.
2. Why is Lifting State Up important in React?
It helps multiple components share and coordinate the same state while keeping a single source of truth.
3. Can sibling components share state directly?
No. Sibling components do not directly share state. Their common parent can own the state and pass the required values and callbacks to both siblings.
4. How does a child update state owned by its parent?
The parent can pass a callback function to the child through props. The child calls that function when an update is needed.
5. Is Lifting State Up the same as using Context API?
No. Lifting State Up uses a common parent and props to coordinate state. Context can provide values to components deeper in the component tree without passing props through every intermediate component.
6. When should state be lifted up?
State should generally be lifted when multiple components need to read or coordinate the same state.
7. Does lifting state make the state global?
No. Lifting state does not make state global. The state remains owned by the component where it is declared, usually the closest common parent of the components that need it.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
