selective-context-consumer v1.0.4
Installation
yarn: yarn add selective-context-consumer
npm: npm install selective-context-consumer
About
Only re-render if the selected values from the context update/change not when the context value changes.
Be sure to wrap the component which is using this library's component with
React.memo.
Repository
This library is meant to be open-source, for everyone to make it better.
Source code available at: Github Repo: arbaz52/react-selective-context-consumer
Example
Single Value Selector
<SelectiveContextConsumer
context={YourContext}
selector={(ValuesInContext) => ValuesInContext.ValueYouNeed}
>
{(selectedValue) => <b>render: {selectedValue}</b>}
</SelectiveContextConsumer>Multiple Values Selector
Most use-cases require extracting/selecting multiple values from the context. You can return an JSObject in the selector function but it will not have type definitions.
The workaround for it is to create a memoized callback for the selector function and pass it as the selector prop. This will make the parameters for the children function to have type definitions.
Selector Function:
const selectorFunc = useCallback((context: IStateContext) => {
const { beer, addBeer } = context;
return { beer, addBeer };
}, []);Usage:
<SelectiveContextConsumer context={StateContext} selector={selectorFunc}>
{({ beer, addBeer }) => (
<>
<button onClick={addBeer}>Beer: {beer}</button>
<RendersCounter />
</>
)}
</SelectiveContextConsumer>Why this Package?
This is a generic implementation for an issue that requires a workaround when using non-primitive value for context provider's value.
This library exports a component that can memoize the selected value (even an object) from the context. The child of this exported component will re-render if the selected value is changed/updated. The component follows Render Props pattern and expects a function that is passed the selected values from the context as parameters to function. The function is then expected to return a React.FC.