Lifting State Up in React

Key Concepts

• Lifting State Up
• Shared State
• Parent-Child Communication

Lifting State Up

Lifting State Up is a technique in React where state is moved from a child component to a common parent component. This allows multiple child components to share the same state and ensures that they are in sync. By lifting state up, you centralize the state management, making it easier to manage and update.

Shared State

Shared state refers to the state that is used by multiple components. When components need to share data, it is often beneficial to lift the state up to a parent component. This ensures that all child components receive the same data and updates when the state changes.

Parent-Child Communication

Parent-Child Communication in React involves passing data and functions from a parent component to its child components. When lifting state up, the parent component manages the state and passes it down to the child components as props. Child components can then update the state by calling functions passed down from the parent.

Example

Consider a simple temperature converter application where two input fields allow users to enter temperatures in Celsius and Fahrenheit. The two input fields need to stay in sync, meaning if one changes, the other should update accordingly.

        function TemperatureInput(props) {
            return (
                <fieldset>
                    <legend>Enter temperature in {props.scale}:</legend>
                    <input value={props.temperature} onChange={props.onTemperatureChange} />
                </fieldset>
            );
        }

        function toCelsius(fahrenheit) {
            return (fahrenheit - 32) * 5 / 9;
        }

        function toFahrenheit(celsius) {
            return (celsius * 9 / 5) + 32;
        }

        function tryConvert(temperature, convert) {
            const input = parseFloat(temperature);
            if (Number.isNaN(input)) {
                return '';
            }
            const output = convert(input);
            const rounded = Math.round(output * 1000) / 1000;
            return rounded.toString();
        }

        function Calculator() {
            const [temperature, setTemperature] = React.useState('');
            const [scale, setScale] = React.useState('c');

            const handleCelsiusChange = (e) => {
                setTemperature(e.target.value);
                setScale('c');
            };

            const handleFahrenheitChange = (e) => {
                setTemperature(e.target.value);
                setScale('f');
            };

            const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
            const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

            return (
                <div>
                    <TemperatureInput scale="C" temperature={celsius} onTemperatureChange={handleCelsiusChange} />
                    <TemperatureInput scale="F" temperature={fahrenheit} onTemperatureChange={handleFahrenheitChange} />
                </div>
            );
        }
    

Analogies

Think of lifting state up as moving the control panel of a machine to a central location. Instead of each part of the machine having its own control panel, all parts now share a single control panel. This ensures that all parts operate in sync and respond to the same inputs.

Another analogy is a classroom where the teacher (parent component) manages the attendance sheet (state). The teacher passes the attendance sheet to each student (child component) to mark their attendance. When a student marks their attendance, the teacher updates the sheet, ensuring all students see the same updated information.