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

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

Yarn

1yarn add @fluentui/react-context-selector

Usage

Getting started

1import * as React from 'react';
2import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';
3
4interface CounterContextValue {
5  count1: number;
6  count2: number;
7  incrementCount1: () => void;
8  incrementCount2: () => void;
9}
10
11// 💡 The same syntax as native React context API
12//    https://reactjs.org/docs/context.html#reactcreatecontext
13const CounterContext = createContext<CounterContextValue>({} as CounterContextValue);
14
15const CounterProvider = CounterContext.Provider;
16
17// not necessary but can be a good layer to mock for unit testing
18const useCounterContext = <T,>(selector: ContextSelector<CounterContextValue, T>) =>
19  useContextSelector(CounterContext, selector);
20
21const Counter1 = () => {
22  // 💡 Context updates will be propagated only when result of a selector function will change
23  //    "Object.is()" is used for internal comparisons
24  const count1 = useCounterContext(context => context.count1);
25  const increment = useCounterContext(context => context.incrementCount1);
26
27  return <button onClick={increment}>Counter 1: {count1}</button>;
28};
29
30const Counter2 = () => {
31  const count2 = useCounterContext(context => context.count2);
32  const increment = useCounterContext(context => context.incrementCount2);
33
34  return <button onClick={increment}>Counter 2: {count2}</button>;
35};
36
37export default function App() {
38  const [state, setState] = React.useState({ count1: 0, count2: 0 });
39
40  const incrementCount1 = React.useCallback(() => setState(s => ({ ...s, count1: s.count1 + 1 })), [setState]);
41  const incrementCount2 = React.useCallback(() => setState(s => ({ ...s, count2: s.count2 + 1 })), [setState]);
42
43  return (
44    <div className="App">
45      <CounterProvider
46        value={{
47          count1: state.count1,
48          count2: state.count2,
49          incrementCount1,
50          incrementCount2,
51        }}
52      >
53        <Counter1 />
54        <Counter2 />
55      </CounterProvider>
56    </div>
57  );
58}

useHasParentContext

This helper hook will allow you to know if a component is wrapped by a context selector provider

1const Foo = () => {
2  // An easy way to test if a context provider is wrapped around this component
3  // since it's more complicated to compare with a default context value
4  const isWrappedWithContext = useHasParentContext(CounterContext);
5
6  if (isWrappedWithContext) {
7    return <div>I am inside context selector provider</div>;
8  } else {
9    return <div>I can only use default context value</div>;
10  }
11};

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)

Related projects

The implementation is heavily inspired by:

• use-context-selector
• react-tracked