React Interview Questions

In React, sibling components do not have a direct way to communicate with each other. However, you can pass data between sibling components by lifting the shared state up to their common parent component and then passing the necessary data down to the sibling components as props. Here's how you can achieve this:

Step-by-Step Guide

1. Lift State Up: Move the shared state to the parent component.
2. Pass State and Callbacks: Pass the state and callback functions from the parent to the child components as props.
3. Update State: Use the callback functions in the child components to update the state in the parent component.

Example

Let's consider two sibling components, SiblingA and SiblingB, that need to share data.

Step 1: Create the Parent Component

First, create a parent component that will hold the shared state.

import React, { useState } from 'react';
import SiblingA from './SiblingA';
import SiblingB from './SiblingB';

function ParentComponent() {
  const [sharedData, setSharedData] = useState('');

  const updateSharedData = (data) => {
    setSharedData(data);
  };

  return (
    <div>
      <SiblingA sharedData={sharedData} updateSharedData={updateSharedData} />
      <SiblingB sharedData={sharedData} updateSharedData={updateSharedData} />
    </div>
  );
}

export default ParentComponent;

Step 2: Create Sibling Components

Create the sibling components that will receive the shared state and the update function as props.

SiblingA Component

import React from 'react';

function SiblingA({ sharedData, updateSharedData }) {
  const handleChange = (event) => {
    updateSharedData(event.target.value);
  };

  return (
    <div>
      <h2>Sibling A</h2>
      <input type="text" value={sharedData} onChange={handleChange} />
    </div>
  );
}

export default SiblingA;

SiblingB Component

import React from 'react';

function SiblingB({ sharedData }) {
  return (
    <div>
      <h2>Sibling B</h2>
      <p>Shared Data: {sharedData}</p>
    </div>
  );
}

export default SiblingB;

Explanation

1. ParentComponent:

   • Manages the shared state sharedData and provides a function updateSharedData to update this state.
   • Passes sharedData and updateSharedData as props to both SiblingA and SiblingB.

2. SiblingA:

   • Receives sharedData and updateSharedData as props.
   • Updates the shared state in the parent component through the updateSharedData function when the input value changes.

3. SiblingB:

   • Receives sharedData as a prop and displays it.

Benefits of This Approach

• Single Source of Truth: The state is managed in a single place (the parent component), which makes it easier to track and debug.
• Data Synchronization: The data is synchronized between sibling components because they share the same state from the parent.
• Scalability: This pattern is scalable and can be applied to more complex component structures.

By lifting the state up to the parent component and passing it down as props, sibling components can effectively share and update data without direct communication. This approach leverages React's unidirectional data flow, ensuring that state management remains predictable and maintainable.