Skip to content

Commit e741b3c

Browse files
awmleerawmleer
committed
fix react 16.13 compatibility: Cannot update a component from inside the function body of a different component.
1 parent a573b2b commit e741b3c

File tree

5 files changed

+78
-6
lines changed

5 files changed

+78
-6
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "reto",
3-
"version": "0.9.0",
3+
"version": "0.9.1",
44
"main": "index.js",
55
"repository": "https://github.com/awmleer/reto",
66
"description": "React store with hooks.",

‎src/__tests__/__snapshots__/store.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -129,10 +129,10 @@ exports[`provider initialize with args 2`] = `
129129
exports[`provider memo 1`] = `
130130
<DocumentFragment>
131131
<p>
132-
2
132+
1
133133
</p>
134134
<p>
135-
2
135+
1
136136
</p>
137137
<p>
138138
1

‎src/executor.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {FC, memo} from 'react'
1+
import {FC, memo, useEffect} from 'react'
22
import {Store, StoreP, StoreV} from './store'
33

44
interface Props {
@@ -8,8 +8,12 @@ interface Props {
88
memo?: boolean
99
}
1010

11-
export const Executor: FC<Props> = memo((props) => {
12-
props.onChange((props.args ? props.useStore(...props.args) : props.useStore()))
11+
export const Executor: FC<Props> = memo(function Executor(props) {
12+
const args = props.args ?? []
13+
const result = props.useStore(...args)
14+
useEffect(() => {
15+
props.onChange(result)
16+
})
1317
return null
1418
}, (prevProps, nextProps) => {
1519
if (!nextProps.memo) {

‎src/provider.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ export const Provider = function<S extends Store>(props: PropsWithChildren<Props
3838
)
3939
}
4040

41+
Provider.displayName = 'Provider'
42+
4143
Provider.defaultProps = {
4244
args: [],
4345
}

‎test.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Hello World</title>
6+
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
7+
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
8+
9+
<!-- Don't use this in production: -->
10+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
11+
<script src="./lib/umd/reto.js"></script>
12+
</head>
13+
<body>
14+
<div id="root"></div>
15+
<script type="text/babel">
16+
const {Provider, useStore} = reto
17+
const {useState} = React
18+
19+
function FooStore(initial = 1) {
20+
const [x, setX] = useState(initial)
21+
return {
22+
x,
23+
setX
24+
}
25+
}
26+
27+
const App = (props) => {
28+
const fooStore = useStore(FooStore)
29+
30+
function changeStore() {
31+
fooStore.setX(fooStore.x + 1)
32+
}
33+
return (
34+
<div>
35+
<button onClick={changeStore}>Change</button>
36+
{fooStore.x}
37+
</div>
38+
)
39+
}
40+
41+
ReactDOM.render(
42+
<h1>
43+
Hello, world!
44+
<Provider of={FooStore}>
45+
<App/>
46+
</Provider>
47+
</h1>,
48+
document.getElementById('root')
49+
);
50+
51+
</script>
52+
<!--
53+
Note: this page is a great way to try React but it's not suitable for production.
54+
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
55+
56+
Read this section for a production-ready setup with JSX:
57+
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
58+
59+
In a larger project, you can use an integrated toolchain that includes JSX instead:
60+
https://reactjs.org/docs/create-a-new-react-app.html
61+
62+
You can also use React without JSX, in which case you can remove Babel:
63+
https://reactjs.org/docs/react-without-jsx.html
64+
-->
65+
</body>
66+
</html>

0 commit comments

Comments
 (0)