Home/ Questions/Q 413
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T00:53:22+00:00 In:

How can you share state between two child components in React?

  • 0
  • 0

Best way to manage shared state between multiple child components in React??

interviewquestionsreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Bryan Williamson
    Beginner

    Sharing state between two child components in React is a common scenario, and there are several approaches depending on the complexity of your app. Here are the best ways to manage shared state between multiple child components:

    🏆 1. Lifting State Up (Best for Simple Cases)

    Concept: Move the shared state to the nearest common parent component and pass it down via props.

    Example:

    import React, { useState } from 'react';

const Parent = () => {
const [sharedData, setSharedData] = useState('');

return (
<div>
<ChildA sharedData={sharedData} setSharedData={setSharedData} />
<ChildB sharedData={sharedData} />
</div>
);
};

const ChildA = ({ sharedData, setSharedData }) => {
return (
<input
type="text"
value={sharedData}
onChange={(e) => setSharedData(e.target.value)}
placeholder="Type something..."
/>
);
};

const ChildB = ({ sharedData }) => {
return <h2>ChildB received: {sharedData}</h2>;
};

export default Parent;

    📝 How it works:

    • The Parent holds the shared state (sharedData) and updates it via setSharedData.
    • ChildA updates the state.
    • ChildB reads and displays the updated state.

    ✅ Best for:

    • Small apps or simple components.
    • When only a few components need to share state.

    🌐 2. React Context API (For Medium Complexity)

    Concept: Use the Context API to create a global state that can be accessed by any child component without prop-drilling.

    Example:

    import React, { useState, createContext, useContext } from 'react';

// Create Context
const SharedContext = createContext();

const Parent = () => {
const [sharedData, setSharedData] = useState('');

return (
<SharedContext.Provider value={{ sharedData, setSharedData }}>
<ChildA />
<ChildB />
</SharedContext.Provider>
);
};

const ChildA = () => {
const { sharedData, setSharedData } = useContext(SharedContext);

return (
<input
type="text"
value={sharedData}
onChange={(e) => setSharedData(e.target.value)}
placeholder="Type here..."
/>
);
};

const ChildB = () => {
const { sharedData } = useContext(SharedContext);

return <h2>ChildB received: {sharedData}</h2>;
};

export default Parent;

    📝 How it works:

    • SharedContext provides the state to ChildA and ChildB.
    • No prop-drilling is needed.
    • ChildA updates the state, and ChildB consumes it.

    ✅ Best for:

    • Medium to large apps.
    • Avoiding prop-drilling when many nested components need access to shared data.

    ⚡ 3. State Management Libraries (For Complex Apps)

    For larger applications where state sharing becomes complex, consider using state management libraries like:

    • Redux 🛠️ (Popular for complex state logic)
    • Recoil 🌿 (Simpler and more modern)
    • Zustand 🐻 (Minimalistic and lightweight)
    • MobX ⚡ (Reactive state management)

    Example with Zustand:

    npm install zustand
    import create from 'zustand';

// Create Zustand store
const useStore = create((set) => ({
sharedData: '',
setSharedData: (data) => set({ sharedData: data }),
}));

const ChildA = () => {
const { sharedData, setSharedData } = useStore();

return (
<input
type="text"
value={sharedData}
onChange={(e) => setSharedData(e.target.value)}
placeholder="Type here..."
/>
);
};

const ChildB = () => {
const { sharedData } = useStore();

return <h2>ChildB received: {sharedData}</h2>;
};

const App = () => (
<div>
<ChildA />
<ChildB />
</div>
);

export default App;

    ✅ Best for:

    • Complex apps with deeply nested components.
    • Apps requiring global state management.

    🧠 4. URL Params / LocalStorage (For Persisted State)

    • If state needs to persist across page reloads or be shareable via URL, use:
      • URL query params with React Router.
      • LocalStorage/SessionStorage for browser persistence.

    🚀 Which Method to Choose?

    Use Case Recommended Approach
    Simple shared state between siblings Lifting State Up
    Multiple nested components needing shared state Context API
    Complex global state with advanced features Redux, Zustand, Recoil
    Need for persistence across reloads LocalStorage/SessionStorage
    State needs to be shareable via URL URL Params + React Router