-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Daishi MD #1
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
To solve this issue,
useContextSelector
is proposed and later proposed
Speculative Mode
with context selector support.
This library provides the API in userland.
Prior to v1.3, it uses
changedBits=0
feature to stop propagation,v1.3 no longer depends on this undocumented feature.
Install
This package requires some peer dependencies, which you need to install by yourself.
Notes for library authors:
Please do not forget to keep
"peerDependencies"
andnote instructions to let users to install peer dependencies.
Technical memo
To make it work like original React context, it uses
useReducer cheat mode intentionally.
It also requires
useContextUpdate
to behave better in concurrent rendering.Its usage is optional and only required if the default behavior is unexpected.
Usage
API
createContext
This creates a special context for
useContextSelector
.Parameters
defaultValue
ValueExamples
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<Value>selector
function (value: Value): SelectedExamples
useContext
This hook returns the entire context value.
Use this instead of React.useContext for consistent behavior.
Parameters
context
Context<Value>Examples
useContextUpdate
This hook returns an update function that accepts a thunk 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<Value>Examples
BridgeProvider
This is a Provider component for bridging multiple react roots
Parameters
$0
{context: Context<any>, value: any, children: ReactNode}$0.context
$0.value
$0.children
Examples
useBridgeValue
This hook return a value for BridgeProvider
Parameters
context
Context<any>Limitations
children
of a context provider has to be either created outside of the provider or memoized withReact.memo
.useContextSelector
. If you use both props anduse-context-selector
to pass the same data, they may provide inconsistence data for a brief moment. (02_tearing_spec
fails)Examples
The examples folder contains working examples.
You can run one of them with
and open http://localhost:8080 in your web browser.
You can also try them in codesandbox.io:
01
02
03
Projects that use use-context-selector
The text was updated successfully, but these errors were encountered: