State lives inside one component by default, invisible to every other component — including its own siblings. When two components need to share or coordinate on the same piece of state, the standard fix is lifting state up: moving it to their closest common parent.
Two sibling components, each with their own separate state, can't see or affect each other at all:
function TemperatureInput() {
const [value, setValue] = useState('');
return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}
function App() {
return (
<div>
<TemperatureInput />
<TemperatureInput /> {/* Completely separate state — they can't stay in sync */}
</div>
);
}Move the useState call up to App, and pass both the value and a way to change it down as props:
function TemperatureInput({ value, onChange }) {
return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}
function App() {
const [temperature, setTemperature] = useState('');
return (
<div>
<TemperatureInput value={temperature} onChange={setTemperature} />
<p>Current: {temperature}</p> {/* Now this can see it too */}
</div>
);
}TemperatureInput no longer owns any state at all — it just displays whatever value it's given, and reports changes upward through onChange. A component like this, with no state of its own, is often called a controlled component — the same idea as a controlled form input from the earlier Forms lesson, generalized to any component.
This is the general shape of how data moves through a React tree, and it's worth naming explicitly: data flows down through props, and changes flow up through callback functions passed as props. React deliberately has no built-in way for a child to directly reach up and change a parent's state — this one-way flow is what keeps a large component tree's behavior traceable.
When lifting state up isn't enough
The Context API lesson later in this section covers the other tool for sharing state — useful specifically when lifting state up would mean passing props through many layers of components that don't otherwise need them.