A temporal workaround with useLayoutEffect in DEV (dai-shi/use-contex…

…t-selector#13)

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Change Log
 
 ## [Unreleased]
+### Changed
+- A workaround for React render warning (hopefully temporarily)
 
 ## [4.5.0] - 2020-02-03
 ### Changed

dist/Provider.js

@@ -63,14 +63,29 @@ var Provider = function Provider(_ref) {
       forceUpdate = _useReducer2[1];
 
   var state = store.getState();
-  var listeners = (0, _react.useRef)([]); // 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.current.forEach(function (listener) {
-    return listener(state);
-  });
+  var listeners = (0, _react.useRef)([]);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // we use layout effect to eliminate warnings.
+    // but, this leads tearing with startTransition.
+    // https://github.com/dai-shi/use-context-selector/pull/13
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useLayoutEffect)(function () {
+      listeners.current.forEach(function (listener) {
+        return listener(state);
+      });
+    });
+  } 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.current.forEach(function (listener) {
+      return listener(state);
+    });
+  }
+
   var subscribe = (0, _react.useCallback)(function (listener) {
     listeners.current.push(listener);
 
@@ -87,6 +102,8 @@ var Provider = function Provider(_ref) {
     var unsubscribe = store.subscribe(function () {
       forceUpdate();
     });
+    forceUpdate(); // in case it's already changed
+
     return unsubscribe;
   }, [store]);
   return (0, _react.createElement)(customContext.Provider, {

src/Provider.js

@@ -2,6 +2,7 @@ import {
   createContext,
   createElement,
   useCallback,
+  useLayoutEffect,
   useEffect,
   useRef,
   useReducer,
@@ -46,11 +47,22 @@ export const Provider = ({
   const [, forceUpdate] = useReducer((c) => c + 1, 0);
   const state = store.getState();
   const listeners = useRef([]);
-  // 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.current.forEach((listener) => listener(state));
+  if (process.env.NODE_ENV !== 'production') {
+    // we use layout effect to eliminate warnings.
+    // but, this leads tearing with startTransition.
+    // https://github.com/dai-shi/use-context-selector/pull/13
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      listeners.current.forEach((listener) => listener(state));
+    });
+  } 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.current.forEach((listener) => listener(state));
+  }
   const subscribe = useCallback((listener) => {
     listeners.current.push(listener);
     const unsubscribe = () => {
@@ -65,6 +77,7 @@ export const Provider = ({
     const unsubscribe = store.subscribe(() => {
       forceUpdate();
     });
+    forceUpdate(); // in case it's already changed
     return unsubscribe;
   }, [store]);
   return createElement(