Skip to content

Commit 4a2c97e

Browse files
committed
docs(v5): update readme
1 parent c9e8afb commit 4a2c97e

File tree

1 file changed

+69
-0
lines changed

1 file changed

+69
-0
lines changed

README.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,12 @@ npm install react-model
7979
- [SSR with Next.js](#ssr-with-nextjs)
8080
- [Middleware](#middleware)
8181
- [Expand Context](#expand-context)
82+
- [Concurrent Mode Support](#concurrent-mode-support)
8283
- [Other Concept required by Class Component](#other-concept-required-by-class-component)
8384
- [Provider](#provider)
8485
- [connect](#connect)
8586
- [FAQ](#faq)
87+
- [Migrate from 4.1.x to 5.x.x](#migrate-from-41x-to-5xx)
8688
- [Migrate from 4.0.x to 4.1.x](#migrate-from-40x-to-41x)
8789
- [Migrate from 3.1.x to 4.x.x](#migrate-from-31x-to-4xx)
8890
- [How can I disable the console debugger?](#how-can-i-disable-the-console-debugger)
@@ -587,6 +589,46 @@ actions.ext()
587589

588590
[⇧ back to top](#table-of-contents)
589591

592+
### Concurrent Mode Support
593+
594+
To achieve [level-3 support](https://github.com/reactwg/react-18/discussions/70#discussion-3450022) for concurrent mode for specific state, you should only only depend on React state.
595+
596+
react-model provide `useModel` for developers out-of-box.
597+
598+
It only needs a few changes for the startup example.
599+
600+
```tsx
601+
import { Provider, useModel, createStore } from 'react-model'
602+
603+
// define model
604+
const useTodo = () => {
605+
// changes 1: model -> useModel
606+
const [items, setItems] = useModel(['Install react-model', 'Read github docs', 'Build App'])
607+
return { items, setItems }
608+
}
609+
610+
// Model Register
611+
// NOTE : getState is only valid inside hooks component if Todo contains custom hooks like useModel / useState
612+
const { useStore } = createStore(Todo)
613+
614+
const App = () => {
615+
// changes 2: wrap root components with Provider
616+
return (
617+
<Provider>
618+
<TodoList />
619+
</Provider>
620+
)
621+
}
622+
623+
const TodoList = () => {
624+
const { items, setItems } = useStore()
625+
return <div>
626+
<Addon handler={setItems} />
627+
{state.items.map((item, index) => (<Todo key={index} item={item} />))}
628+
</div>
629+
}
630+
```
631+
590632
## Other Concept required by Class Component
591633

592634
### Provider
@@ -695,6 +737,33 @@ export default connect(
695737
696738
## FAQ
697739
740+
### Migrate from 4.1.x to 5.x.x
741+
742+
1. replace useModel with model
743+
744+
```tsx
745+
import { model } from 'react-model'
746+
const useTodo = () => {
747+
// useModel -> model
748+
const [items, setItems] = model(['Install react-model', 'Read github docs', 'Build App'])
749+
return { items, setItems }
750+
}
751+
```
752+
753+
2. wrap root component with Provider (required for concurrent mode)
754+
755+
```tsx
756+
import { Provider } from 'react-model'
757+
const App = () => {
758+
// changes 2: wrap root components with Provider
759+
return (
760+
<Provider>
761+
<TodoList />
762+
</Provider>
763+
)
764+
}
765+
```
766+
698767
### Migrate from 4.0.x to 4.1.x
699768
700769
1. replace Model with createStore

0 commit comments

Comments
 (0)