The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To keep React components in sync, move the shared state to their closest common parent. The parent passes the current value to each child as props and, when children need to change it, passes down a handler they can call. This pattern is called lifting state up.
Why components need a shared state owner
State belongs to the component that declares it. A parent cannot directly change a child’s private local state. If two children each keep their own copy of a value, they can display different results and cannot reliably coordinate a shared rule.
React’s guidance is to choose one owner for each unique piece of state: “For each unique piece of state, you will choose the component that ‘owns’ it.” The owner is typically the closest common parent of the components that need the value. This is a single source of truth for that value, not a requirement to move every piece of state to the top of the application.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesHow to lift state up
- Remove the coordinated value from the children. Instead of each child maintaining its own
isActivestate, have it acceptisActiveas a prop. - Find the closest common parent. If an
Accordionrenders twoPanelcomponents, the accordion is a natural owner of their shared selection. - Store the shared state in that parent. The parent computes each panel’s props from its state and passes a handler such as
onShowto the panels. - Let a child request a change through the handler. When a user interacts with a panel, the child calls the handler. The parent updates its state, then React renders the children with updated props.
The flow is parent to child for the current value, and child to parent through a callback for a requested update. The child does not directly edit the parent’s state.
#1 Best Overall
Choose state that represents the interface rule
Suppose two panels can each be open or closed independently. Two local booleans can represent that arrangement, but they do not coordinate the panels. If the rule changes to “only one panel may be open,” storing a separate boolean for each panel also permits combinations that contradict the rule, such as both being open.
Instead, let the parent store one selection, such as activeIndex. For panels numbered 0 and 1, the parent derives each prop as activeIndex === 0 or activeIndex === 1. Selecting a panel updates the single index. The state shape itself now expresses the one-open-panel constraint.
Example: keep two inputs synchronized
For two text inputs that should always show the same text, give their common parent one text value and pass that value and a change handler to both inputs. Editing either input requests an update from the parent; after the parent updates its value, both inputs receive and display the same prop.
This differs from two unrelated inputs, where each can own its own state. Share a value only when the interface requires the components to stay coordinated.
When props are enough—and when context may help
For a small group of nearby components, lifting state to their common parent and passing props is explicit: the components that need the value receive it directly. If the common ancestor is far away or many descendants need the value, forwarding props through components that do not use them can become verbose. React documents context as an option for making information available to descendants without passing it through every intermediate component.
That is a choice about the shape of the component tree, not a claim that context is always better or faster. React’s documentation describes the tradeoff but does not provide a performance benchmark comparing context with lifted state.
Keep unrelated state local
Lifting state up is for coordination, not a rule to centralize everything. A child can keep local state for information no other component needs to read or control. Components are often described as controlled when important information is driven by props and uncontrolled when they manage it with their own state. These are useful design terms rather than strict technical categories; a component can use props for some information and local state for other details.
Recommended Free Tools
A quick decision guide
- One component needs a value: keep it local unless another requirement calls for a different owner.
- Several nearby components must agree: lift the value to their closest common parent and pass it down as props.
- A UI rule limits valid combinations: choose a state shape that encodes the rule, such as one active index for a single-open-panel accordion.
- Many descendants need a value across intermediate layers: consider context to avoid repetitive prop forwarding.
React’s official guides explain sharing state between components, state as a component’s memory, and passing data deeply with context. The pages do not specify a React version or publication date, so this explanation is not tied to a particular release.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
