A2oz

How do you share an object between components in React?

Published in React 2 mins read

You can share an object between components in React using various methods, depending on the complexity and scope of the object's usage. Here are some common approaches:

1. Props

  • Concept: Props are the primary way to pass data down the component tree. You can simply pass the object as a prop to child components.
  • Example:
function ParentComponent() {
  const sharedObject = { name: 'John', age: 30 };
  return <ChildComponent sharedObject={sharedObject} />;
}

function ChildComponent({ sharedObject }) {
  return <div>Name: {sharedObject.name}, Age: {sharedObject.age}</div>;
}

2. Context API

  • Concept: The Context API provides a way to share data across the entire component tree without explicitly passing props through every level.
  • Example:
const UserContext = createContext({ name: '', age: 0 });

function ParentComponent() {
  const sharedObject = { name: 'John', age: 30 };
  return (
    <UserContext.Provider value={sharedObject}>
      <ChildComponent />
    </UserContext.Provider>
  );
}

function ChildComponent() {
  const { name, age } = useContext(UserContext);
  return <div>Name: {name}, Age: {age}</div>;
}

3. State Management Libraries

  • Concept: Libraries like Redux, MobX, and Recoil provide centralized state management solutions that allow you to share data across your entire application.
  • Example:
import { useSelector, useDispatch } from 'react-redux';

function ParentComponent() {
  const dispatch = useDispatch();
  dispatch({ type: 'SET_USER', payload: { name: 'John', age: 30 } });
  return <ChildComponent />;
}

function ChildComponent() {
  const user = useSelector((state) => state.user);
  return <div>Name: {user.name}, Age: {user.age}</div>;
}

4. Global Variables (Avoid)

  • Concept: While possible, using global variables for sharing data is generally discouraged due to potential side effects and difficulty in managing state.

Choosing the appropriate method depends on factors like the object's complexity, the scope of its usage, and the overall architecture of your application.

Related Articles