Package Exports
- use-context-selector
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-context-selector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
use-context-selector
React useContextSelector hook in userland
Introduction
React Context and useContext is often used to avoid prop drilling, however it's known that there's a performance issue. When a context value is changed, all components that useContext will re-render.
useContextSelector is recently proposed. While waiting for the process, this library provides the API in userland.
Install
npm install use-context-selector
Usage
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { createContext, useContextSelector } from 'use-context-selector';
const context = createContext(null);
const Counter1 = () => {
const count1 = useContextSelector(context, v => v[0].count1);
const setState = useContextSelector(context, v => v[1]);
const increment = () => setState(s => ({
...s,
count1: s.count1 + 1,
}));
return (
<div>
{Math.random()}
<span>Count1: {count1}</span>
<button type="button" onClick={increment}>+1</button>
</div>
);
};
const Counter2 = () => {
const count2 = useContextSelector(context, v => v[0].count2);
const setState = useContextSelector(context, v => v[1]);
const increment = () => setState(s => ({
...s,
count2: s.count2 + 1,
}));
return (
<div>
{Math.random()}
<span>Count2: {count2}</span>
<button type="button" onClick={increment}>+1</button>
</div>
);
};
const StateProvider = ({ children }) => {
const [state, setState] = useState({ count1: 0, count2: 0 });
return (
<context.Provider value={[state, setState]}>
{children}
</context.Provider>
);
};
const App = () => (
<StateProvider>
<Counter1 />
<Counter2 />
</StateProvider>
);
ReactDOM.render(<App />, document.getElementById('app'));
Technical memo
React context by nature triggers propagation of component re-rendering
if a value is changed. To avoid this, this libraries use undocumented
feature of calculateChangedBits
. It then uses a subscription model
to force update when a component needs to re-render.
Limitations
- Subscriptions are context-based. So, even if there are multiple context providers in a component tree, all components are subscribed to all providers. This may lead false positives (extra re-renders).
- In order to stop propagation,
children
of a context provider has to be either created outside of the provider or memoized withReact.memo
. - Context consumers are not supported.
Examples
The examples folder contains working examples. You can run one of them with
PORT=8080 npm run examples:minimal
and open http://localhost:8080 in your web browser.
You can also try them in codesandbox.io: 01 02