Package Exports

@fluentui/react-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 (@fluentui/react-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

`@fluentui/react-context-selector`

React useContextSelector() and useContextSelectors() hooks 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 are subscribed with useContext() will re-render.

useContextSelector is recently proposed. While waiting for the process, this library provides the API in userland.

Installation

NPM

npm install --save @fluentui/react-context-selector

Yarn

yarn add @fluentui/react-context-selector

Technical memo

React context by nature triggers propagation of component re-rendering if a value is changed. To avoid this, this library uses undocumented feature of calculateChangedBits. It then uses a subscription model to force update when a component needs to re-render.

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.
<Consumer /> components are not supported.
The stale props issue can't be solved in userland. (workaround with try-catch)

The implementation is heavily inspired by: