https://github.com/ogm710811/manage-state-example-react
When building a React app, how do I manage state?
https://github.com/ogm710811/manage-state-example-react
createcontext react react-query restcountries-api state-management
Last synced: 11 months ago
JSON representation
When building a React app, how do I manage state?
- Host: GitHub
- URL: https://github.com/ogm710811/manage-state-example-react
- Owner: ogm710811
- Created: 2020-09-25T16:38:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-25T20:06:27.000Z (over 5 years ago)
- Last Synced: 2025-01-15T08:10:16.809Z (about 1 year ago)
- Topics: createcontext, react, react-query, restcountries-api, state-management
- Language: JavaScript
- Homepage:
- Size: 346 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to manage State in React.
When building a React app, how do I manage state?
The question should be: Is the UI state as same as Server cache?
The answer: Server cache is not the same as UI state, and they should be handled differently.
## App State
Keep state as low as possible.
1. Local State
2. Lift State
3. Global State (with contexts)
Once you are dealing with Global State, you are welcome to use:
MobX, Redux, Overmind, Zustand, Recoil, etc... or just stick with `useState`
## External Data or Server Cache
What happened when you take the data coming from the server and treat it like it was UI state. It mixes
in with the actual UI state (stuff that's not persisted. You know, the stuff that goes away when you refresh
the page), and this resulted in making both more complex. I would fail at state synchronization.
Found myself in "impossible" states that were difficult to debug.
Once you understand this, you are welcome to use:
React Query, SWR, Apollo Client, urql