Experiment: Context Selectors

For internal experimentation only.

This implements `unstable_useContextSelector` behind a feature flag.
It's based on [RFC 119](reactjs/rfcs#119) and
[RFC 118](reactjs/rfcs#118) by @gnoff.

Usage:

```js
const context = useContextSelector(Context, c => c.selectedField);
```

The key feature is that if the selected value does not change between
renders, the component will bail out of rendering its children, a la
`memo`, `PureComponent`, or the `useState` bailout mechanism. (Unless
some other state, props, or context was updated in the same render.)

One difference from the RFC is that it does not return the selected
value. It returns the full context object. This serves a few purposes:
it discourages you from creating any new objects or derived values
inside the selector, because it'll get thrown out regardless. Instead,
all the selector will do is return a subfield. Then you can compute
the derived value inside the component, and if needed, you memoize that
derived value with `useMemo`.

If all the selectors do is access a subfield, they're (theoretically)
fast enough that we can call them during the propagation scan and bail
out really early, without having to visit the component during the
render phase.

Another benefit is that it's API compatible with `useContext`. So we can
put it behind a flag that falls back to regular `useContext`.

The longer term vision is that these optimizations (in addition to other
memoization checks, like `useMemo` and `useCallback`) are inserted
automatically by a compiler. So you would write code like this:

```js
const {a, b} = useContext(Context);
const derived = computeDerived(a, b);
```

and it would get converted to something like this:

```js
const {a} = useContextSelector(Context, context => context.a);
const {b} = useContextSelector(Context, context => context.b);
const derived = useMemo(() => computeDerived(a, b), [a, b]);
```

(Though not this exactly. Some lower level compiler output target.)

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -129,6 +129,18 @@ function useContext<T>(
   return context._currentValue;
 }
 
+function useContextSelector<C, S>(
+  context: ReactContext<C>,
+  selector: C => S,
+): C {
+  hookLog.push({
+    primitive: 'ContextSelector',
+    stackError: new Error(),
+    value: context._currentValue,
+  });
+  return context._currentValue;
+}
+
 function useState<S>(
   initialState: (() => S) | S,
 ): [S, Dispatch<BasicStateAction<S>>] {
@@ -322,6 +334,7 @@ const Dispatcher: DispatcherType = {
   useCacheRefresh,
   useCallback,
   useContext,
+  useContextSelector,
   useEffect,
   useImperativeHandle,
   useDebugValue,

packages/react-dom/src/server/ReactPartialRendererHooks.js

@@ -251,6 +251,19 @@ function useContext<T>(
   return context[threadID];
 }
 
+function useContextSelector<C, S>(
+  context: ReactContext<C>,
+  selector: C => S,
+): C {
+  if (__DEV__) {
+    currentHookNameInDev = 'useContextSelector';
+  }
+  resolveCurrentlyRenderingComponent();
+  const threadID = currentPartialRenderer.threadID;
+  validateContextBounds(context, threadID);
+  return context[threadID];
+}
+
 function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
   // $FlowFixMe: Flow doesn't like mixed types
   return typeof action === 'function' ? action(state) : action;
@@ -503,6 +516,7 @@ export function setCurrentPartialRenderer(renderer: PartialRenderer) {
 export const Dispatcher: DispatcherType = {
   readContext,
   useContext,
+  useContextSelector,
   useMemo,
   useReducer,
   useRef,

packages/react-reconciler/src/ReactFiberHooks.new.js

@@ -55,7 +55,11 @@ import {
   higherLanePriority,
   DefaultLanePriority,
 } from './ReactFiberLane.new';
-import {readContext, checkIfContextChanged} from './ReactFiberNewContext.new';
+import {
+  readContext,
+  readContextWithSelector,
+  checkIfContextChanged,
+} from './ReactFiberNewContext.new';
 import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
   Update as UpdateEffect,
@@ -2113,6 +2117,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
 
   useCallback: throwInvalidHookError,
   useContext: throwInvalidHookError,
+  useContextSelector: throwInvalidHookError,
   useEffect: throwInvalidHookError,
   useImperativeHandle: throwInvalidHookError,
   useLayoutEffect: throwInvalidHookError,
@@ -2138,6 +2143,7 @@ const HooksDispatcherOnMount: Dispatcher = {
 
   useCallback: mountCallback,
   useContext: readContext,
+  useContextSelector: readContextWithSelector,
   useEffect: mountEffect,
   useImperativeHandle: mountImperativeHandle,
   useLayoutEffect: mountLayoutEffect,
@@ -2163,6 +2169,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
 
   useCallback: updateCallback,
   useContext: readContext,
+  useContextSelector: readContextWithSelector,
   useEffect: updateEffect,
   useImperativeHandle: updateImperativeHandle,
   useLayoutEffect: updateLayoutEffect,
@@ -2188,6 +2195,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
 
   useCallback: updateCallback,
   useContext: readContext,
+  useContextSelector: readContextWithSelector,
   useEffect: updateEffect,
   useImperativeHandle: updateImperativeHandle,
   useLayoutEffect: updateLayoutEffect,
@@ -2256,6 +2264,17 @@ if (__DEV__) {
       mountHookTypesDev();
       return readContext(context, observedBits);
     },
+    useContextSelector<C, S>(context: ReactContext<C>, selector: C => S): C {
+      currentHookNameInDev = 'useContextSelector';
+      mountHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return readContextWithSelector(context, selector);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
     useEffect(
       create: () => (() => void) | void,
       deps: Array<mixed> | void | null,
@@ -2390,6 +2409,17 @@ if (__DEV__) {
       updateHookTypesDev();
       return readContext(context, observedBits);
     },
+    useContextSelector<C, S>(context: ReactContext<C>, selector: C => S): C {
+      currentHookNameInDev = 'useContextSelector';
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return readContextWithSelector(context, selector);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
     useEffect(
       create: () => (() => void) | void,
       deps: Array<mixed> | void | null,
@@ -2520,6 +2550,17 @@ if (__DEV__) {
       updateHookTypesDev();
       return readContext(context, observedBits);
     },
+    useContextSelector<C, S>(context: ReactContext<C>, selector: C => S): C {
+      currentHookNameInDev = 'useContextSelector';
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return readContextWithSelector(context, selector);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
     useEffect(
       create: () => (() => void) | void,
       deps: Array<mixed> | void | null,
@@ -2651,6 +2692,17 @@ if (__DEV__) {
       updateHookTypesDev();
       return readContext(context, observedBits);
     },
+    useContextSelector<C, S>(context: ReactContext<C>, selector: C => S): C {
+      currentHookNameInDev = 'useContextSelector';
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnRerenderInDEV;
+      try {
+        return readContextWithSelector(context, selector);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
     useEffect(
       create: () => (() => void) | void,
       deps: Array<mixed> | void | null,
@@ -2784,6 +2836,18 @@ if (__DEV__) {
       mountHookTypesDev();
       return readContext(context, observedBits);
     },
+    useContextSelector<C, S>(context: ReactContext<C>, selector: C => S): C {
+      currentHookNameInDev = 'useContextSelector';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
+      try {
+        return readContextWithSelector(context, selector);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
     useEffect(
       create: () => (() => void) | void,
       deps: Array<mixed> | void | null,
@@ -2929,6 +2993,18 @@ if (__DEV__) {
       updateHookTypesDev();
       return readContext(context, observedBits);
     },
+    useContextSelector<C, S>(context: ReactContext<C>, selector: C => S): C {
+      currentHookNameInDev = 'useContextSelector';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return readContextWithSelector(context, selector);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
     useEffect(
       create: () => (() => void) | void,
       deps: Array<mixed> | void | null,
@@ -3075,6 +3151,18 @@ if (__DEV__) {
       updateHookTypesDev();
       return readContext(context, observedBits);
     },
+    useContextSelector<C, S>(context: ReactContext<C>, selector: C => S): C {
+      currentHookNameInDev = 'useContextSelector';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
+      try {
+        return readContextWithSelector(context, selector);
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    },
     useEffect(
       create: () => (() => void) | void,
       deps: Array<mixed> | void | null,