https://github.com/raymondsze/react-hook-example
React hook price feed example
https://github.com/raymondsze/react-hook-example
example react react-hooks reactjs
Last synced: 3 months ago
JSON representation
React hook price feed example
- Host: GitHub
- URL: https://github.com/raymondsze/react-hook-example
- Owner: raymondsze
- Created: 2019-03-02T06:20:45.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:14:43.000Z (about 3 years ago)
- Last Synced: 2023-03-08T17:12:40.608Z (almost 3 years ago)
- Topics: example, react, react-hooks, reactjs
- Language: TypeScript
- Homepage: https://raymondsze.github.io/react-hook-example
- Size: 3.57 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Introduction
React MVVM architecture powered by pure React Hook.
### Disclaimer
Thanks [gaplo917](https://github.com/gaplo917) demostrate the strength of Mobx in Show-Me-The-Code event in Hong Kong.
This example is a hook version of a simple crypto-currency price feed application https://github.com/gaplo917/mobx-react-mvvm-example.
It is not full replacement to Mobx (At least it is not an observer pattern), if you want to use Mobx like what we could do in React Hook, please check out https://github.com/mobxjs/mobx-react-lite.
To simplify the deomonstration, I use **useState** instead of **useReducer**. In real-world large application, useReducer would be better choice for state management.
I use lots of **useMemo** to achieve the approximate rendering performance that we have in Mobx. In real-world application, you do not use **useMemo** heavily for all the attributes unless you hit the performance bottleneck.
### Objective:
* Demostrate how to write MVVM architecture using React Hook.
* Demostrate the possibility of pure React Hook to replace Mobx, we could still sepearate the 'View Model'.
### The Heart of MVVM (Same as what [gaplo917](https://github.com/gaplo917) mentioned)
* A ViewModel Hook should have **NO** dependency of React and should have no idea what the view looks like. (*Hook is perfect solution we could handle any side-effect that does not require any UI rendering*)
* A correct implementation of MVVM architecture should achieve 100% decoupled business logic / data flow from views.
* A pure VM is much easier to test than a "React components with state logic". (PS: I didn't write any unit test, but it should be easily achieved. See https://medium.com/@dawchihliou/testing-react-hooks-6d3ae95cd838.)
* VMs should be light & cheap and be easily re-implemented with the same interface that consumed by the view.
### Why Not Mobx ?
* Mobx is very powelful tool for state/flow managment. However, it **track the getter/setter to forceUpdate your react component**.
By this way, it is no longer the unidirectional flux pattern which Facebook recommend. If you are fan of Flux pattern, you may not want it.
* Mobx hack the **getter/setter** which you may get trouble for enumerable / serialzable issue. (i.e you may want pass the whole object with { ...observableObj }, but it won't work)
* Mobx use decorator and class heavily, you may feel bad if you are not fan of OOP pattern. (PS: https://github.com/mobxjs/mobx-react-lite introduce the possibility to use mobx like hook in pure functional component)
### Run in local
```
yarn install
yarn start
// go to http://localhost:3000
```
### Credit
[mobx-react-mvvm-example](https://github.com/gaplo917/mobx-react-mvvm-example) - [gaplo917](https://github.com/gaplo917)