fix react 16.13 compatibility: Cannot update a component from inside …

…the function body of a different component.
awmleer · Feb 28, 2020 · e741b3c · e741b3c
1 parent a573b2b
commit e741b3c
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reto",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "main": "index.js",
   "repository": "https://github.com/awmleer/reto",
   "description": "React store with hooks.",

diff --git a/src/__tests__/__snapshots__/store.test.tsx.snap b/src/__tests__/__snapshots__/store.test.tsx.snap
@@ -129,10 +129,10 @@ exports[`provider initialize with args 2`] = `
 exports[`provider memo 1`] = `
 <DocumentFragment>
   <p>
-    2
+    1
   </p>
   <p>
-    2
+    1
   </p>
   <p>
     1

diff --git a/src/executor.tsx b/src/executor.tsx
@@ -1,4 +1,4 @@
-import {FC, memo} from 'react'
+import {FC, memo, useEffect} from 'react'
 import {Store, StoreP, StoreV} from './store'
 
 interface Props {
@@ -8,8 +8,12 @@ interface Props {
   memo?: boolean
 }
 
-export const Executor: FC<Props> = memo((props) => {
-  props.onChange((props.args ? props.useStore(...props.args) : props.useStore()))
+export const Executor: FC<Props> = memo(function Executor(props) {
+  const args = props.args ?? []
+  const result = props.useStore(...args)
+  useEffect(() => {
+    props.onChange(result)
+  })
   return null
 }, (prevProps, nextProps) => {
   if (!nextProps.memo) {

diff --git a/src/provider.tsx b/src/provider.tsx
@@ -38,6 +38,8 @@ export const Provider = function<S extends Store>(props: PropsWithChildren<Props
   )
 }
 
+Provider.displayName = 'Provider'
+
 Provider.defaultProps = {
   args: [],
 }
diff --git a/test.html b/test.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Hello World</title>
+  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
+  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
+
+  <!-- Don't use this in production: -->
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="./lib/umd/reto.js"></script>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+  const {Provider, useStore} = reto
+  const {useState} = React
+
+  function FooStore(initial = 1) {
+    const [x, setX] = useState(initial)
+    return {
+      x,
+      setX
+    }
+  }
+
+  const App = (props) => {
+    const fooStore = useStore(FooStore)
+
+    function changeStore() {
+      fooStore.setX(fooStore.x + 1)
+    }
+    return (
+      <div>
+        <button onClick={changeStore}>Change</button>
+        {fooStore.x}
+      </div>
+    )
+  }
+
+  ReactDOM.render(
+    <h1>
+      Hello, world!
+      <Provider of={FooStore}>
+        <App/>
+      </Provider>
+    </h1>,
+    document.getElementById('root')
+  );
+
+</script>
+<!--
+  Note: this page is a great way to try React but it's not suitable for production.
+  It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+
+  Read this section for a production-ready setup with JSX:
+  https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
+
+  In a larger project, you can use an integrated toolchain that includes JSX instead:
+  https://reactjs.org/docs/create-a-new-react-app.html
+
+  You can also use React without JSX, in which case you can remove Babel:
+  https://reactjs.org/docs/react-without-jsx.html
+-->
+</body>
+</html>