https://github.com/gabriel-jesusvix/state-manager-react

This repository contains the implementation of a custom state manager for React, built from scratch. During development.
https://github.com/gabriel-jesusvix/state-manager-react

Last synced: 1 day ago
JSON representation

This repository contains the implementation of a custom state manager for React, built from scratch. During development.

• Host: GitHub
• URL: https://github.com/gabriel-jesusvix/state-manager-react
• Owner: Gabriel-Jesusvix
• Created: 2024-10-25T00:26:33.000Z (23 days ago)
• Default Branch: develop
• Last Pushed: 2024-10-28T02:51:10.000Z (19 days ago)
• Last Synced: 2024-10-28T06:25:35.601Z (19 days ago)
• Language: TypeScript
• Size: 81.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React + TypeScript + Vite

# Custom State Manager with React

This project implements a custom state manager for React applications, built from scratch without relying on external libraries. The goal is to understand key concepts behind state management and how to apply them in real-world projects.

The course/project covers various stages of building a state manager, focusing on solving common issues with existing tools like Context API and exploring advanced techniques such as the Observable pattern and useSyncExternalStore.

## Key Topics Covered

1. **Problems with using Context API for global states**

   Understanding the limitations of Context API when handling global states in large applications.

2. **Creating the store**

   Initial implementation of a custom store to centralize and manage the global state of the application.

3. **Understanding and applying the Observable Pattern**

   Using the Observable design pattern to enhance reactivity and state change notifications.

4. **Implementing actions**

   Creating and implementing actions to modify the global state predictably and scalable.

5. **Using useSyncExternalStore and optimizing unnecessary renders**

   Leveraging React's `useSyncExternalStore` hook to reduce unnecessary re-renders and improve application performance.

6. **Refactoring actions and components**

   Refactoring the codebase to improve the interaction between actions and React components for better maintainability.

## Screen

![Screenshot 2024-10-27 at 23 49 46](https://github.com/user-attachments/assets/b335ca6d-068e-43cb-a584-66240088740c)