Lifting State Up in ReactJS

In ReactJS, "lifting state up" is a fundamental concept that plays an important role in managing the state efficiently across different components. When building React applications, it is common for multiple components to need access to the same piece of data or state.

In such cases, instead of duplicating the state across multiple components, React allows us to "lift" the state up to a common ancestor. In this article we will cover the basics of lifting state up in ReactJS, how it works, and examples to clarify its use.

What Does Lifting State Up Mean in React?

In React, lifting state up refers to the technique of moving a shared state to a common ancestor of the components that need to access or modify it. Instead of maintaining separate state values in each component, the state is kept in the parent component. This parent component then passes the state and any necessary functions as props to its child components.

By doing this, the child components can access and interact with the shared state, ensuring consistency across the application.

Why Do We Lift State Up in React?

React is built around the idea of components and unidirectional data flow, meaning data flows down from parent to child through props. However, sometimes two or more sibling components need to share the same state. If each component manages its own version of the state, inconsistencies can arise.

Here are some common scenarios where lifting state up is necessary:

• Synchronization: When multiple components need to stay in sync with a shared state (e.g., form inputs).
• Communication Between Components: If sibling components need to communicate, the state is lifted to the parent so that it can manage the flow of data between them.
• Centralized State Management: It keeps the state centralized, making it easier to debug, maintain, and modify as the app grows.

How to Lift State Up in React?

Lifting state up involves a few simple steps:

1. Identify the shared state: Determine which state values need to be accessed or modified by multiple components.
2. Move the state to the common ancestor: Find the nearest parent component that can hold the state.
3. Pass the state as props: The parent component will pass the shared state and any relevant handler functions (e.g., for updating the state) to its child components via props.
4. Handle state updates: The child components will use the passed-down functions to update the parent component’s state.

Example 1: If we have 2 components in our App. A -> B where, A is parent of B. keeping the same data in both Component A and B might cause inconsistency of data. 

Example 2: If we have 3 components in our App.

        A
       / \
      B   C

Where A is the parent of B and C. In this case, If there is some Data only in component B but, component C also wants that data. We know Component C cannot access the data because a component can talk only to its parent or child (Not cousins).

Example: Let's Implement this with a simple but general example.

To create the React Application you can refer to Create a New React App.

Folder Structure:

Approach: To solve this, we will Lift the state of component B and component C to component A. Make A.js as our Main Parent by changing the path of App in the index.js file

Before:

import App from './App';

After:

import App from './A';

Filename- A.js:

import React, { Component } from 'react';
import B from './B'
import C from './C'

class A extends Component {

    constructor(props) {
        super(props);
        this.handleTextChange = this.handleTextChange.bind(this);
        this.state = { text: '' };
    }

    handleTextChange(newText) {
        this.setState({ text: newText });
    }

    render() {
        return (
            <React.Fragment>
                <B text={this.state.text}
                    handleTextChange={this.handleTextChange} />
                <C text={this.state.text} />
            </React.Fragment>
        );
    }
}

export default A;

Filename- B.js:

import React, { Component } from 'react';

class B extends Component {

    constructor(props) {
        super(props);
        this.handleTextChange = this.handleTextChange.bind(this);
    }

    handleTextChange(e) {
        this.props.handleTextChange(e.target.value);
    }

    render() {
        return (
            <input value={this.props.text}
                onChange={this.handleTextChange} />
        );
    }
}

export default B;

Filename- C.js:

import React,{ Component } from 'react';

class C extends Component {

render() {
    return (
        <h3>Output: {this.props.text}</h3>
    );
}
}
    
export default C;

Output: Now, component C can Access text in component B through component A.