Context Free React Component

Requirement

Generally, when we start creating react components that are dependent on some common props we try to share these props through the react context API.

Another case is that if we want to prevent dipper props drilling then again we try to solve this issue with the help of React context API.

But in order to solve both of the above problems, we create new problems.

Problems

1. Components that use context becomes tightly coupled code ( We have required parent dependency of provider context)
2. Components are no more memoizable (Even we use React.memo it is not going to work if context value will be updated).

So how can we create a context-free react component?

Solution

As of now, we know how we use react context API to solve some problems and loses the re-usability of components because it depends on its parent context.

We should be having some kind of intermediator so that components should not depend directly on the context.

Now we will create an intermediator named MapContextToProps so as to make the context-free components.

const accumulatorMethod = (accumaulator, currentValue) => {
  const newAppend = subscribingProps.includes(currentValue)
   ? { [currentValue]: contextValue[currentValue] } : {};
  return { ...accumaulator, ...newAppend };
}

const MapContextToProps = ({
  dependentContext,
  Component,
  subscribingProps
}) => {

   const contextValue = useContext(dependentContext);
   const componentProps = Object.keys(contextValue)
                          .reduce(accumulatorMethod ,{});
   return <Component {...componentProps} />;

};

const ContextValueDependentComponet = ({
subscribedProp1,
subscribedProp2
}) => {
  return <div>{subscribedProp1}</div>
}

<MapContextToProps
dependentContext={ContextObj}
Component={IndirectContextDependentComponent}
subscribingProps={["subscribedProp1", "subscribedProp2"]}
/>