);
};
const StateProvider = ({ children }) => (
{children}
);
const App = () => (
);
createRoot(document.getElementById('app')).render();
```
## API
### createContext
This creates a special context for `useContextSelector`.
#### Parameters
* `defaultValue` **Value**
#### Examples
```javascript
import { createContext } from 'use-context-selector';
const PersonContext = createContext({ firstName: '', familyName: '' });
```
### useContextSelector
This hook returns context selected value by selector.
It will only accept context created by `createContext`.
It will trigger re-render if only the selected value is referentially changed.
The selector should return referentially equal result for same input for better performance.
#### Parameters
* `context` **Context\**
* `selector` **function (value: Value): Selected**
#### Examples
```javascript
import { useContextSelector } from 'use-context-selector';
const firstName = useContextSelector(PersonContext, (state) => state.firstName);
```
### useContext
This hook returns the entire context value.
Use this instead of React.useContext for consistent behavior.
#### Parameters
* `context` **Context\**
#### Examples
```javascript
import { useContext } from 'use-context-selector';
const person = useContext(PersonContext);
```
### useContextUpdate
This hook returns an update function to wrap an updating function
Use this for a function that will change a value in
concurrent rendering in React 18.
Otherwise, there's no need to use this hook.
#### Parameters
* `context` **Context\**
#### Examples
```javascript
import { useContextUpdate } from 'use-context-selector';
const update = useContextUpdate();
// Wrap set state function
update(() => setState(...));
// Experimental suspense mode
update(() => setState(...), { suspense: true });
```
### BridgeProvider
This is a Provider component for bridging multiple react roots
#### Parameters
* `$0` **{context: Context\, value: any, children: ReactNode}**
* `$0.context`
* `$0.value`
* `$0.children`
#### Examples
```javascript
const valueToBridge = useBridgeValue(PersonContext);
return (
{children}
);
```
### useBridgeValue
This hook return a value for BridgeProvider
#### Parameters
* `context` **Context\**
## Limitations
* In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.
* Provider trigger re-renders only if the context value is referentially changed.
* Neither context consumers or class components are supported.
* The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland.
* Tearing is only avoided if all consumers get data using `useContextSelector`. If you use both props and `use-context-selector` to pass the same data, they may provide inconsistence data for a brief moment. (`02_tearing_spec` fails)
## Examples
The [examples](examples) folder contains working examples.
You can run one of them with
```bash
PORT=8080 yarn run examples:01_counter
```
and open in your web browser.
You can also try them in codesandbox.io:
[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/01_counter)
[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/02_person)
[03](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/03_suspense)
## Projects that use use-context-selector
* [react-tracked](https://github.com/dai-shi/react-tracked)
* [use-atom](https://github.com/dai-shi/use-atom)
* [react-hooks-fetch](https://github.com/dai-shi/react-hooks-fetch)
---
_Source: https://npm.io/package/use-context-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._