{"id":20384765,"url":"https://github.com/ogm710811/manage-state-example-react","last_synced_at":"2025-03-04T23:13:54.469Z","repository":{"id":97190404,"uuid":"298627242","full_name":"ogm710811/manage-state-example-react","owner":"ogm710811","description":"When building a React app, how do I manage state?","archived":false,"fork":false,"pushed_at":"2020-09-25T20:06:27.000Z","size":354,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-15T08:10:16.809Z","etag":null,"topics":["createcontext","react","react-query","restcountries-api","state-management"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ogm710811.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-25T16:38:21.000Z","updated_at":"2022-08-24T21:28:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"f5dd575d-1da2-4062-98a6-1af4211001fc","html_url":"https://github.com/ogm710811/manage-state-example-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogm710811%2Fmanage-state-example-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogm710811%2Fmanage-state-example-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogm710811%2Fmanage-state-example-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogm710811%2Fmanage-state-example-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ogm710811","download_url":"https://codeload.github.com/ogm710811/manage-state-example-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241935267,"owners_count":20044827,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["createcontext","react","react-query","restcountries-api","state-management"],"created_at":"2024-11-15T02:29:41.178Z","updated_at":"2025-03-04T23:13:54.444Z","avatar_url":"https://github.com/ogm710811.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to manage State in React.\n\nWhen building a React app, how do I manage state?\u003cbr /\u003e\nThe question should be: Is the UI state as same as Server cache?\u003cbr /\u003e\nThe answer: Server cache is not the same as UI state, and they should be handled differently.\n\n## App State\n\nKeep state as low as possible.\n1. Local State\n2. Lift State\n3. Global State (with contexts)\n\nOnce you are dealing with Global State, you are welcome to use:\u003cbr /\u003e\nMobX, Redux, Overmind, Zustand, Recoil, etc... or just stick with `useState`\n\n## External Data or Server Cache\n\nWhat happened when you take the data coming from the server and treat it like it was UI state. It mixes\nin with the actual UI state (stuff that's not persisted. You know, the stuff that goes away when you refresh \nthe page), and this resulted in making both more complex. I would fail at state synchronization.\nFound myself in \"impossible\" states that were difficult to debug.\n\nOnce you understand this, you are welcome to use:\u003cbr /\u003e\nReact Query, SWR, Apollo Client, urql\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogm710811%2Fmanage-state-example-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fogm710811%2Fmanage-state-example-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogm710811%2Fmanage-state-example-react/lists"}