Merge pull request #13 from dai-shi/more-hacked-provider

A temporal workaround with useLayoutEffect in DEV

README.md

@@ -114,7 +114,7 @@ Returns **React.Context**
 
 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 referencially changed.
+It will trigger re-render if only the selected value is referentially changed.
 
 #### Parameters
 
@@ -150,6 +150,7 @@ Returns **any**
 
 -   Subscriptions are per-context basis. So, even if there are multiple context providers in a component tree, all components are subscribed to all providers. This may lead false positives (extra re-renders).
 -   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.
 -   Context consumers are not supported.
 -   The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland. (workaround with try-catch)
 

__tests__/02_tearing.js

@@ -0,0 +1,48 @@
+import React, { useState, StrictMode } from 'react';
+
+import { render, fireEvent, cleanup } from '@testing-library/react';
+
+import { createContext, useContextSelector } from '../src/index';
+
+describe('tearing spec', () => {
+  afterEach(cleanup);
+
+  it('should not tear with parent', () => {
+    const initialState = {
+      count: 0,
+    };
+    const context = createContext(initialState);
+    const Counter = ({ parentCount }) => {
+      const count = useContextSelector(context, (v) => v.count);
+      if (parentCount !== count) throw new Error('tears!!!');
+      return (
+        <div>
+          <div>{parentCount}</div>
+          <div>{count}</div>
+        </div>
+      );
+    };
+    const Parent = () => {
+      const [state, setState] = useState(initialState);
+      const increment = () => setState((s) => ({
+        ...s,
+        count: s.count + 1,
+      }));
+      return (
+        <context.Provider value={state}>
+          <Counter parentCount={state.count} />
+          <button type="button" onClick={increment}>+1</button>
+        </context.Provider>
+      );
+    };
+    const App = () => (
+      <StrictMode>
+        <Parent />
+      </StrictMode>
+    );
+    const { getAllByText } = render(<App />);
+    expect(() => {
+      fireEvent.click(getAllByText('+1')[0]);
+    }).not.toThrow();
+  });
+});

src/index.js

@@ -6,13 +6,24 @@ const CONTEXT_LISTENERS = (
 );
 
 const createProvider = (OrigProvider, listeners) => React.memo(({ value, children }) => {
-  // we call listeners in render intentionally.
-  // listeners are not technically pure, but
-  // otherwise we can't get benefits from concurrent mode.
-  // we make sure to work with double or more invocation of listeners.
-  listeners.forEach((listener) => {
-    listener(value);
-  });
+  if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
+    // we use layout effect to eliminate warnings.
+    // but, this leads tearing with startTransition.
+    React.useLayoutEffect(() => {
+      listeners.forEach((listener) => {
+        listener(value);
+      });
+    });
+  } else {
+    // we call listeners in render for optimization.
+    // although this is not a recommended pattern,
+    // so far this is only the way to make it as expected.
+    // we are looking for better solutions.
+    // https://github.com/dai-shi/use-context-selector/pull/12
+    listeners.forEach((listener) => {
+      listener(value);
+    });
+  }
   return React.createElement(OrigProvider, { value }, children);
 });
 
@@ -38,7 +49,7 @@ export const createContext = (defaultValue) => {
 /**
  * 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 referencially changed.
+ * It will trigger re-render if only the selected value is referentially changed.
  * @param {React.Context} context
  * @param {Function} selector
  * @returns {*}
@@ -47,12 +58,9 @@ export const createContext = (defaultValue) => {
  */
 export const useContextSelector = (context, selector) => {
   const listeners = context[CONTEXT_LISTENERS];
-  if (!listeners) {
-    if (process.env.NODE_ENV !== 'production') {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!listeners) {
       throw new Error('useContextSelector requires special context');
-    } else {
-      // for production
-      throw new Error();
     }
   }
   const [, forceUpdate] = React.useReducer((c) => c + 1, 0);