-
A common question from React beginners is how to share state between two sibling components.
-
The answer is to Lift the state which basically amounts to finding the lowest common parent shared between the two components and placing the state management there, and then passing the state and a mechanism for updating that state down into the components that need it.
-
As a community we’re pretty good at doing this and it becomes natural over time. One thing that we typically have trouble remembering to do is to push state back down (or colocate state).
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
<script type="text/babel">
function Name({ name, onNameChange }) {
return (
<div>
<label>Name: </label>
<input value={name} onChange={onNameChange} />
</div>
);
}
// In React, sharing state is accomplished by moving it up to the closest
// common ancestor of the components that need it.
// This is called “lifting state up”.
function FavoriteAnimal() {
const [animal, setAnimal] = React.useState('');
return (
<div>
<label>Favorite Animal: </label>
<input
value={animal}
onChange={event => setAnimal(event.target.value)}
/>
</div>
);
}
// Since any state “lives” in some component and that
// component alone can change it, the surface area for bugs is greatly reduced.
function Display({ name }) {
return <div>{`Hey ${name}, you are great!`}</div>;
}
function App() {
const [name, setName] = React.useState('');
return (
<form>
<Name
name={name}
onNameChange={event => setName(event.target.value)}
/>
<FavoriteAnimal />
<Display name={name} />
</form>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>- Lifting state involves writing more “boilerplate” code than two-way binding approaches, but as a benefit, it takes less work to find and isolate bugs.
Kent's Blog - State Colocation will make your React app faster Kent's Blog - Application State Management with React React Docs - Lifting State Up