{"id":25423680,"url":"https://github.com/raymondsze/react-hook-example","last_synced_at":"2026-03-06T04:31:30.035Z","repository":{"id":39557832,"uuid":"173411427","full_name":"raymondsze/react-hook-example","owner":"raymondsze","description":"React hook price feed example","archived":false,"fork":false,"pushed_at":"2023-01-03T17:14:43.000Z","size":3748,"stargazers_count":3,"open_issues_count":19,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T20:43:49.649Z","etag":null,"topics":["example","react","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":"https://raymondsze.github.io/react-hook-example","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raymondsze.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-02T06:20:45.000Z","updated_at":"2020-09-01T09:38:58.000Z","dependencies_parsed_at":"2023-02-01T08:00:31.401Z","dependency_job_id":null,"html_url":"https://github.com/raymondsze/react-hook-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/raymondsze/react-hook-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raymondsze%2Freact-hook-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raymondsze%2Freact-hook-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raymondsze%2Freact-hook-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raymondsze%2Freact-hook-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raymondsze","download_url":"https://codeload.github.com/raymondsze/react-hook-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raymondsze%2Freact-hook-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30161734,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T04:22:03.816Z","status":"ssl_error","status_checked_at":"2026-03-06T04:22:00.183Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["example","react","react-hooks","reactjs"],"created_at":"2025-02-16T22:40:14.226Z","updated_at":"2026-03-06T04:31:29.992Z","avatar_url":"https://github.com/raymondsze.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction \r\nReact MVVM architecture powered by pure React Hook.\r\n\r\n### Disclaimer\r\nThanks [gaplo917](https://github.com/gaplo917) demostrate the strength of Mobx in Show-Me-The-Code event in Hong Kong.  \r\nThis example is a hook version of a simple crypto-currency price feed application https://github.com/gaplo917/mobx-react-mvvm-example.  \r\nIt 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.  \r\n\r\nTo simplify the deomonstration, I use **useState** instead of **useReducer**. In real-world large application, useReducer would be better choice for state management.  \r\n\r\nI 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.\r\n\r\n### Objective:\r\n* Demostrate how to write MVVM architecture using React Hook.\r\n* Demostrate the possibility of pure React Hook to replace Mobx, we could still sepearate the 'View Model'.\r\n\r\n### The Heart of MVVM (Same as what [gaplo917](https://github.com/gaplo917) mentioned)\r\n* 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*)\r\n* A correct implementation of MVVM architecture should achieve 100% decoupled business logic / data flow from views.\r\n* 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.)\r\n* VMs should be light \u0026 cheap and be easily re-implemented with the same interface that consumed by the view.\r\n\r\n### Why Not Mobx ?\r\n* Mobx is very powelful tool for state/flow managment. However, it **track the getter/setter to forceUpdate your react component**.\r\nBy 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.\r\n* 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)\r\n* 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)\r\n\r\n### Run in local\r\n```\r\nyarn install\r\nyarn start\r\n\r\n// go to http://localhost:3000\r\n```\r\n\r\n### Credit\r\n[mobx-react-mvvm-example](https://github.com/gaplo917/mobx-react-mvvm-example) - [gaplo917](https://github.com/gaplo917)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraymondsze%2Freact-hook-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraymondsze%2Freact-hook-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraymondsze%2Freact-hook-example/lists"}