{"id":24089595,"url":"https://github.com/hugocruzlfc/nextjs-state-management","last_synced_at":"2026-05-08T03:06:38.807Z","repository":{"id":237701053,"uuid":"795085475","full_name":"hugocruzlfc/nextjs-state-management","owner":"hugocruzlfc","description":"This tutorial is all about how to manage mutable data no matter what state management system you use. We'll look at examples with React Hooks and Context, as well as global management systems like Redux, Zustand, and Jotai.","archived":false,"fork":false,"pushed_at":"2024-05-04T08:14:54.000Z","size":566,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-10T04:39:40.608Z","etag":null,"topics":["app-router","jotai","nextjs14","react-context","redux-toolkit","state-management","typescript","zustand"],"latest_commit_sha":null,"homepage":"","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/hugocruzlfc.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":"2024-05-02T14:56:25.000Z","updated_at":"2024-08-06T17:29:04.000Z","dependencies_parsed_at":"2024-05-03T01:40:21.985Z","dependency_job_id":"47c654c8-dd1a-447c-9940-b609c6cdbc62","html_url":"https://github.com/hugocruzlfc/nextjs-state-management","commit_stats":null,"previous_names":["hugocruzlfc/nextjs-state-management"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hugocruzlfc%2Fnextjs-state-management","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hugocruzlfc%2Fnextjs-state-management/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hugocruzlfc%2Fnextjs-state-management/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hugocruzlfc%2Fnextjs-state-management/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hugocruzlfc","download_url":"https://codeload.github.com/hugocruzlfc/nextjs-state-management/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240987442,"owners_count":19889335,"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":["app-router","jotai","nextjs14","react-context","redux-toolkit","state-management","typescript","zustand"],"created_at":"2025-01-10T04:39:57.785Z","updated_at":"2026-05-08T03:06:38.765Z","avatar_url":"https://github.com/hugocruzlfc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Quick Start\n\n### Initialize the project\n\nClone the project and install the dependencies for each example.\n\n### Summarizing State Management Options in Next.js App Router\n\nThe state management model has changed with the advent of Next.js App Router.\n\nThe traditional Redux store, which held both immutable and mutable data, has been replaced.\n\nNow, the mutable data only resides on the client, which means that the volume of data is much less. As a result, you may find that you can get by with just the basic React Hooks.\n\nYou can handle state with useState, useReducer, and useRef, and watch for changes with useEffect, useMemo, and useCallback. Pairing these hooks with query libraries like React Query or SWR can take you even further.\n\n### Categories of State Managers\n\nIf you need more than what React Hooks offer, there are four categories of state managers to consider:\n\n- Unidirectional State Managers, such as [Redux](https://github.com/reduxjs/redux) and [Zustand](https://github.com/pmndrs/zustand) that we worked with in this tutorial.\n- Bidirectional State Managers, like [MobX](https://github.com/mobxjs/mobx).\n- Event-based State Managers like [Effector](https://github.com/effector/effector), often used with RxJS.\n- Atomic State Managers: Like [Recoil](https://github.com/facebookexperimental/Recoil) and [Jotai](https://github.com/pmndrs/jotai), which was covered in a previous lesson.\n\n### Conclusion\n\nState management has evolved. There are a lot of different options out there, so it's important to evaluate them before you pick one for your application. Choose wisely to ensure that you're using the most appropriate model for your specific use case.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugocruzlfc%2Fnextjs-state-management","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhugocruzlfc%2Fnextjs-state-management","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugocruzlfc%2Fnextjs-state-management/lists"}