Common lifting state patterns in React

Introduction

Lifting state helps share data between components by moving the state up to a common parent.

When two sibling components need to share and update the same data.

When a child component needs to update data that affects its parent or siblings.

When you want to keep state in one place to avoid duplication and bugs.

When you want to control form inputs from a parent component.

When you want to coordinate UI changes across multiple components.

Syntax

React

import React, { useState } from 'react';

function Parent() {
  const [value, setValue] = useState('');

  return (
    <>
      <ChildA value={value} onChange={setValue} />
      <ChildB value={value} />
    </>
  );
}

function ChildA({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

function ChildB({ value }) {
  return <p>{value}</p>;
}

State is stored in the parent component.

Child components receive state and update functions as props.

Examples

Parent holds the count state. Incrementer updates it. Display shows it.

React

import React, { useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Incrementer count={count} onIncrement={() => setCount(count + 1)} />
      <Display count={count} />
    </>
  );
}

function Incrementer({ count, onIncrement }) {
  return <button onClick={onIncrement}>Add 1 (current: {count})</button>;
}

function Display({ count }) {
  return <p>Count is {count}</p>;
}

Text input updates state in parent, preview shows the typed text.

React

import React, { useState } from 'react';

function Parent() {
  const [text, setText] = useState('');

  return (
    <>
      <TextInput text={text} onTextChange={setText} />
      <TextPreview text={text} />
    </>
  );
}

function TextInput({ text, onTextChange }) {
  return <input value={text} onChange={e => onTextChange(e.target.value)} />;
}

function TextPreview({ text }) {
  return <p>You typed: {text}</p>;
}

Sample Program

This example shows lifting state to a parent to share the typed name between input and greeting.

The input updates the parent's state, and the greeting updates automatically.

React

import React, { useState } from 'react';

export default function Parent() {
  const [name, setName] = useState('');

  return (
    <main>
      <NameInput name={name} onNameChange={setName} />
      <Greeting name={name} />
    </main>
  );
}

function NameInput({ name, onNameChange }) {
  return (
    <label htmlFor="nameInput">
      Enter your name:
      <input
        id="nameInput"
        type="text"
        value={name}
        onChange={e => onNameChange(e.target.value)}
        aria-label="Name input"
      />
    </label>
  );
}

function Greeting({ name }) {
  return <p>{name ? `Hello, ${name}!` : 'Please enter your name above.'}</p>;
}

Important Notes

Always keep state as high as needed but no higher to avoid unnecessary re-renders.

Use clear prop names like onChange or onNameChange for callbacks.

Remember to pass both the state value and the setter function down to children.

Summary

Lifting state means moving state up to a common parent to share it.

Child components get state and update functions as props.

This helps keep data in sync across components.