{"id":17440919,"url":"https://github.com/neonsy/react-learning-state-management","last_synced_at":"2026-04-11T19:35:51.485Z","repository":{"id":257869739,"uuid":"858975806","full_name":"Neonsy/React-Learning-State-Management","owner":"Neonsy","description":"This repository holds projects I've created, in order to learn specific things, working with react.","archived":false,"fork":false,"pushed_at":"2024-10-22T16:58:09.000Z","size":4949,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T04:15:36.175Z","etag":null,"topics":["dnd-kit","jotai","learning-react","react","react-hook-form","reactjs","typescript","vite","vitejs","zod","zustand","zustandjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Neonsy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-09-17T21:23:12.000Z","updated_at":"2024-10-22T16:58:13.000Z","dependencies_parsed_at":"2024-12-07T04:33:55.462Z","dependency_job_id":null,"html_url":"https://github.com/Neonsy/React-Learning-State-Management","commit_stats":{"total_commits":87,"total_committers":1,"mean_commits":87.0,"dds":0.0,"last_synced_commit":"68ed08b10600b0a6e25b24ebc5c3f4953038cc66"},"previous_names":["neonsy/react-learning-state-management"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Neonsy%2FReact-Learning-State-Management","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Neonsy%2FReact-Learning-State-Management/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Neonsy%2FReact-Learning-State-Management/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Neonsy%2FReact-Learning-State-Management/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Neonsy","download_url":"https://codeload.github.com/Neonsy/React-Learning-State-Management/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245960668,"owners_count":20700777,"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":["dnd-kit","jotai","learning-react","react","react-hook-form","reactjs","typescript","vite","vitejs","zod","zustand","zustandjs"],"created_at":"2024-10-17T15:05:14.616Z","updated_at":"2025-12-30T23:21:02.999Z","avatar_url":"https://github.com/Neonsy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React State Management Exploration\n\n![JavaScript](https://img.shields.io/badge/JavaScript-031321?style=for-the-badge\u0026logo=javascript\u0026logoColor=yellow)\n![NodeJS](https://img.shields.io/badge/NodeJS-031321?style=for-the-badge\u0026logo=node.js\u0026logoColor=green)\n![React](https://img.shields.io/badge/React-031321?style=for-the-badge\u0026logo=react\u0026logoColor=cyan)\n![Vite](https://img.shields.io/badge/Vite-031321?style=for-the-badge\u0026logo=vite\u0026logoColor=yellow)\n![TypeScript](https://img.shields.io/badge/TypeScript-031321?logo=typescript\u0026logoColor=3178C6\u0026style=for-the-badge)\n![Tailwind](https://img.shields.io/badge/Tailwind-031321?logo=tailwindcss\u0026logoColor=38B2AC\u0026style=for-the-badge)\n\n## **Overview**\n\nWelcome to the third chapter of my journey into the React ecosystem! 🚀 Click [here](#projects) to jump to the project list, where you can also find live demos for the completed projects.\n\n\u003e [!NOTE]\n\u003e The Projects are being designed on the fly, without responsiveness in mind. \u003cbr\u003e\n\u003e Therefore, demo results may vary on different devices.\n\nIn my [first repository](https://github.com/Neonsy/React-First-Steps), I dove into the basics of React, exploring it's vanilla form.\nThen, in the [second repository](https://github.com/Neonsy/NextJS-Server-Steps), I ventured into the world of Next.js, discovering it's powerful features.\n\nI initially planned to work on my personal portfolio site, but I've decided to put that on hold and take time to gather more knowledge.\nNow, it's time to tackle state management, and to put focus on it!\nWhile `useState`, **`useContext`**, and **`useReducer`** are great tools in vanilla React, they can become cumbersome for more complex applications, or even just mid sized ones.\n\n## **Goals**\n\nThis repository has two main objectives:\n\n1. **Master State Management**: I aim to gain a deeper understanding of state management techniques.\n2. **Working with Zustand and Jotai**: I'm excited to get practical experience with **[Zustand](https://github.com/pmndrs/zustand)** and **[Jotai](https://github.com/pmndrs/jotai)**.\n\nAlthough Redux is a well-known option, it's verbosity makes it less appealing for smaller or even mid-sized projects.\nInstead, I'll be using Zustand for it's simplicity and Jotai for it's atomic state management capabilities.\n\n\u003e [!NOTE]\n\u003e Yes, I know that next to Jotai is [Recoil](https://github.com/facebookexperimental/Recoil), developed by Facebook.\n\n## **Approach**\n\nI'm going to create a series of small projects utilizing these packages.\nUnlike my earlier **`React First Steps`**, I'll incorporate TypeScript to enhance my coding skills.\n\nSince this project focuses on React, I'll use Vite instead of Next.js, allowing me to experiment with [TanStack/ReactRouter](https://github.com/TanStack/router).\n\nTo simulate remote data interactions, I'll likely use JSON-Server and leverage [TanStack/ReactQuery](https://github.com/TanStack/query) for efficient data fetching.\n\n## **Projects**\n\n- [ShopCompare](https://github.com/Neonsy/React-Learning-State-Management/blob/Shop-Compare/Shop%20Compare/README.md)\n- [TaskSnapSpace](https://github.com/Neonsy/React-Learning-State-Management/blob/Task-Snap-Space/Task%20Snap%20Space/README.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneonsy%2Freact-learning-state-management","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneonsy%2Freact-learning-state-management","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneonsy%2Freact-learning-state-management/lists"}