Sharing state between components in React - Performance & Optimization

Performance: Sharing state between components

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed when components update shared data.

Sharing state between sibling components

React

const CountContext = React.createContext();

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildA />
      <ChildB />
    </CountContext.Provider>
  );
}

function ChildA() {
  const { setCount } = React.useContext(CountContext);
  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

function ChildB() {
  const { count } = React.useContext(CountContext);
  return <div>{count}</div>;
}

Using context avoids prop drilling and allows components to subscribe only to needed state, reducing unnecessary re-renders.

📈 Performance GainReduces re-renders to only components consuming changed state, improving INP and CPU efficiency.

Sharing state between sibling components

React

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildA count={count} setCount={setCount} />
      <ChildB count={count} />
    </>
  );
}

function ChildA({ count, setCount }) {
  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

function ChildB({ count }) {
  return <div>{count}</div>;
}

Passing state and setters down multiple levels causes all children to re-render on any state change, even if they don't need to update.

📉 Performance CostTriggers re-render of all children on each state update, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Prop drilling shared state	Many props passed down	Multiple re-renders on update	High paint cost due to many updates	[X] Bad
Context API with focused state	Minimal prop passing	Re-renders only subscribed components	Lower paint cost	[OK] Good
Global state with full object updates	Broad state access	Triggers many re-renders	High paint and layout cost	[X] Bad
Split contexts and memoized callbacks	Scoped updates	Minimal re-renders	Low paint and layout cost	[OK] Good

Rendering Pipeline

When shared state updates, React schedules re-renders for components consuming that state. Excessive or broad state sharing causes many components to re-render, increasing layout and paint work.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Layout due to many components re-rendering and recalculating styles.

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed when components update shared data.

Optimization Tips

1Avoid passing shared state through many component layers to prevent excessive re-renders.

2Use React Context or state management libraries to scope state updates efficiently.

3Memoize callbacks and split state to minimize components re-rendering unnecessarily.

Performance Quiz - 3 Questions

What is a common performance issue when sharing state by passing props down many component levels?

A State updates are delayed by network latency.

B All child components re-render on any state change, even if they don't use that state.

C The browser blocks rendering until all props are passed.

D CSS styles are recalculated only once.

DevTools: React DevTools Profiler

How to check: Open React DevTools, go to Profiler tab, record while interacting with components that share state, then analyze which components re-render and how long they take.

What to look for: Look for unnecessary re-renders of components that do not depend on changed state, and long render durations indicating performance bottlenecks.

Practice

1. What is the main reason to share state between React components?

easy

A. To keep data consistent and allow multiple components to use the same information

B. To make each component have its own separate data

C. To avoid using props in components

D. To prevent components from rendering

Solution

1. Step 1: Understand the purpose of shared state

   Sharing state means keeping data in one place so multiple components can access and update it.

2. Step 2: Identify the benefit of shared state

   This helps keep the app consistent and easier to manage because all components see the same data.

3. Final Answer:

   To keep data consistent and allow multiple components to use the same information -> Option A

4. Quick Check:

   Sharing state = data consistency [OK]

Hint: Shared state means one source of truth for data [OK]

Common Mistakes:

• Thinking each component should have its own separate state always
• Confusing props with state sharing
• Believing sharing state prevents rendering

2. Which of the following is the correct way to pass state and its updater from a parent to a child component in React?

easy

A. <Child state=setState />

B. <Child state={state} setState={setState} />

C. <Child>{setState}</Child>

D. <Child state>{state}</Child>

Solution

1. Step 1: Recall how props are passed in JSX

   Props are passed as attributes with values, like propName={value}.

2. Step 2: Identify correct syntax for passing state and updater

   The parent passes both state and setState as props: <Child state={state} setState={setState} />.

3. Final Answer:

   <Child state={state} setState={setState} /> -> Option B

4. Quick Check:

   Props syntax = attribute=value [OK]

Hint: Props use attribute={value} syntax [OK]

Common Mistakes:

• Using children tags incorrectly to pass props
• Passing updater as a child instead of prop
• Missing curly braces around JavaScript expressions

3. Given this React code, what will be displayed when the button is clicked?

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Child count={count} setCount={setCount} />;
}

function Child({ count, setCount }) {
  return <>
    <p>Count: {count}</p>
    <button onClick={() => setCount(count + 1)}>Increment</button>
  </>;
}

medium

A. Count: 0 initially, but button does nothing

B. Count: 1 initially, then stays the same on click

C. Count: 0 initially, then increases by 1 each click

D. Error because setCount is not defined

Solution

1. Step 1: Understand initial state and props

   The parent sets count to 0 initially and passes count and setCount to Child.

2. Step 2: Analyze button click behavior

   Clicking the button calls setCount(count + 1), increasing count by 1 each time.

3. Final Answer:

   Count: 0 initially, then increases by 1 each click -> Option C

4. Quick Check:

   useState count increments on click [OK]

Hint: State updates cause re-render with new value [OK]

Common Mistakes:

• Thinking count starts at 1
• Assuming button does not update state
• Confusing setCount usage or scope

4. Identify the error in this React code that tries to share state between components:

function Parent() {
  const [value, setValue] = React.useState('');
  return <Child value={value} setValue={value} />;
}

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

medium

A. value state is not initialized properly

B. onChange handler syntax is invalid

C. Child component should not receive props

D. setValue prop is passed incorrectly as value instead of the updater function

Solution

1. Step 1: Check props passed from Parent

   Parent passes setValue={value} instead of setValue={setValue}, so setValue is a string, not a function.

2. Step 2: Understand effect on Child component

   Child tries to call setValue as a function on input change, but it is a string, causing an error.

3. Final Answer:

   setValue prop is passed incorrectly as value instead of the updater function -> Option D

4. Quick Check:

   Updater function must be passed, not state value [OK]

Hint: Pass updater function, not state value, as setState prop [OK]

Common Mistakes:

• Passing state value instead of updater function
• Ignoring prop names mismatch
• Assuming onChange syntax is wrong

5. You want to share a counter state between two sibling components in React. Which approach correctly shares the state so both siblings update together?

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <SiblingA count={count} setCount={setCount} />
      <SiblingB count={count} setCount={setCount} />
    </>
  );
}

What is the key reason this works?

hard

A. State is lifted to the common parent and passed down, so both siblings share the same source

B. Each sibling has its own state, so they update independently

C. Using context API is required for siblings to share state

D. State is stored inside each sibling, but synchronized automatically

Solution

1. Step 1: Understand state lifting

   The parent holds the state and updater, passing them as props to both siblings.

2. Step 2: Explain shared state effect

   Because both siblings receive the same state and updater, changes in one update the parent's state, causing both to re-render with the new value.

3. Final Answer:

   State is lifted to the common parent and passed down, so both siblings share the same source -> Option A

4. Quick Check:

   Lift state up for shared data [OK]

Hint: Lift state to parent to share between siblings [OK]

Common Mistakes:

• Thinking siblings can share state without lifting or context
• Believing context API is always required
• Assuming state sync happens automatically without shared source