do not notify children in render

Author: dai-shi

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Change Log
 
 ## [Unreleased]
+### Changed
+- Notify child components updates in callback and effect not in render
 
 ## [4.7.0] - 2020-03-01
 ### Changed

dist/Provider.js

@@ -7,8 +7,6 @@ exports.Provider = exports.defaultContext = exports.createCustomContext = void 0
 
 var _react = require("react");
 
-var _utils = require("./utils");
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
@@ -58,36 +56,17 @@ var Provider = function Provider(_ref) {
       customContext = _ref$customContext === void 0 ? defaultContext : _ref$customContext,
       children = _ref.children;
 
-  var _useReducer = (0, _react.useReducer)(function (c) {
-    return c + 1;
-  }, 0),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      forceUpdate = _useReducer2[1];
+  var _useState = (0, _react.useState)(store.getState()),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
 
-  var state = store.getState();
   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, _utils.useIsomorphicLayoutEffect)(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
+  (0, _react.useEffect)(function () {
     listeners.current.forEach(function (listener) {
       return listener(state);
     });
-  }
-
+  }, [state]);
   var subscribe = (0, _react.useCallback)(function (listener) {
     listeners.current.push(listener);
 
@@ -101,10 +80,16 @@ var Provider = function Provider(_ref) {
     return unsubscribe;
   }, [store]);
   (0, _react.useEffect)(function () {
-    var unsubscribe = store.subscribe(function () {
-      forceUpdate();
-    });
-    forceUpdate(); // in case it's already changed
+    var callback = function callback() {
+      var nextState = store.getState();
+      listeners.current.forEach(function (listener) {
+        return listener(nextState);
+      });
+      setState(nextState);
+    };
+
+    var unsubscribe = store.subscribe(callback);
+    callback(); // in case it's already changed
 
     return unsubscribe;
   }, [store]);

src/Provider.js

@@ -4,11 +4,9 @@ import {
   useCallback,
   useEffect,
   useRef,
-  useReducer,
+  useState,
 } from 'react';
 
-import { useIsomorphicLayoutEffect } from './utils';
-
 // -------------------------------------------------------
 // context
 // -------------------------------------------------------
@@ -45,25 +43,11 @@ export const Provider = ({
   customContext = defaultContext,
   children,
 }) => {
-  const [, forceUpdate] = useReducer((c) => c + 1, 0);
-  const state = store.getState();
+  const [state, setState] = useState(store.getState());
   const listeners = 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
-    useIsomorphicLayoutEffect(() => {
-      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
+  useEffect(() => {
     listeners.current.forEach((listener) => listener(state));
-  }
+  }, [state]);
   const subscribe = useCallback((listener) => {
     listeners.current.push(listener);
     const unsubscribe = () => {
@@ -75,10 +59,13 @@ export const Provider = ({
     return unsubscribe;
   }, [store]);
   useEffect(() => {
-    const unsubscribe = store.subscribe(() => {
-      forceUpdate();
-    });
-    forceUpdate(); // in case it's already changed
+    const callback = () => {
+      const nextState = store.getState();
+      listeners.current.forEach((listener) => listener(nextState));
+      setState(nextState);
+    };
+    const unsubscribe = store.subscribe(callback);
+    callback(); // in case it's already changed
     return unsubscribe;
   }, [store]);
   return createElement(