For example, consider a simple application that has a parent component called App
and two child components called ComponentA
and ComponentB
. If both ComponentA
and ComponentB
need access to a piece of state called text
, it would be better to lift the state up to the App
component, rather than keeping it in both child components.
class App extends React.Component { state = { text: '' } handleTextChange = (text) => { this.setState({ text }); } render() { return ( <div> <ComponentA text={this.state.text} onTextChange={this.handleTextChange} /> <ComponentB text={this.state.text} onTextChange={this.handleTextChange} /> </div> ); } }
In this example, the App
component is the common ancestor of ComponentA
and ComponentB
, and it holds the state for the text. The handleTextChange
method is used to update the state in response to events in the child components. The text
state and the handleTextChange
method are passed down as props to the child components, so they can access and update the state.
Lifting state up makes it easy to track and update shared state in one place and also makes sure that any component that needs the state has access to the most recent version of it. This pattern is used to make the state management in react more predictable and maintainable.
Social Plugin