👷Context API

🤔 Why Context API is better than Prop Drilling??

• 👉 Avoids Prop Drilling: Prop drilling occurs when you need to pass data through multiple layers of components. With Context, you can avoid this issue by providing the data directly to the components that need it, regardless of their position in the component tree.

• 👉 Reduces Coupling: Using Context allows components to be more loosely coupled since they don't need to rely on specific props being passed down. Components can focus on their own responsibilities without having to worry about passing data down through multiple levels.

• 👉 Global Data Sharing: Context provides a way to share state across multiple components without the need to pass props down through intermediate components. It allows you to establish a global data flow in your application, making the state accessible to any component that needs it.

🌱 Main Component calling sub-component with passing parameter.

// 1. Importing (createContext)
import { createContext } from "react";
import ComponentA from "./ComponentA";

// 2. Creating instance of (createContext)
export const Data = createContext();
export const Data1 = createContext();

const App = () => {
  const name = "HuXn";
  const age = 19;

  return (
    <>
      {/* 3. Wrapping our components into Provider component */}
      <Data.Provider value={name}>
        <Data1.Provider value={age}>
          <ComponentA />
        </Data1.Provider>
      </Data.Provider>
    </>
  );
};

export default App;

🗝️ Executing Component A and returning to main component

Here as A don't need to access the parameters to call Component C

import ComponentC from "./ComponentC";

const ComponentA = () => {
  return <ComponentC />;
};

export default ComponentA;

🗝️ Executing Component C and returning to component A

import { Data, Data1 } from "./App";

const ComponentC = () => {
  return (
    <>
      {/* 4. Consuimg/Accessing Data */}
      <Data.Consumer>
        {(name) => {
          // return <h1>My name is: {name}</h1>;
          return (
            <Data1.Consumer>
              {(age) => {
                return (
                  <h1>
                    My name is: {name} and I'm {age} years old.
                  </h1>
                );
              }}
            </Data1.Consumer>
          );
        }}
      </Data.Consumer>
    </>
  );
};

export default ComponentC;

🤔 Drawbacks of Using Context API

• 👉 Reduced Performance: Updating the context value can potentially cause unnecessary re-renders in consuming components, even if the changes are not relevant to them. This can impact performance, especially in larger component trees. Careful consideration of when and how to update the context value is necessary to mitigate this issue.

• 👉 Complexity in Testing: Testing components that consume context can be more complex compared to testing components with props-based state management. Mocking or providing the correct context values during testing may require additional setup and can make unit tests more cumbersome.

• 👉 Potential for Overuse: The simplicity and ease of use of the Context API can lead to its overuse, causing excessive coupling between components and making the codebase harder to understand and maintain. Overusing context for every piece of shared state, especially for unrelated concerns, can make the codebase less modular and harder to reason about.

• 👉 Lack of Type Safety: Context values are not type-checked by default, which means that incorrect usage or changes in the shape of the context value may not be caught by the compiler or development tools. This can lead to runtime errors and debugging challenges.

State Management in React –Props vs the Context APIfreeCodeCamp.org

To Learn More : Read This....