https://github.com/mohitjaiswal28/performance-react
This project demonstrates best practices like useMemo, useCallback, React.memo, and clean folder structure.
https://github.com/mohitjaiswal28/performance-react
react react-performance typescript
Last synced: 6 months ago
JSON representation
This project demonstrates best practices like useMemo, useCallback, React.memo, and clean folder structure.
- Host: GitHub
- URL: https://github.com/mohitjaiswal28/performance-react
- Owner: mohitjaiswal28
- Created: 2025-05-19T16:49:23.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-05-31T14:44:08.000Z (7 months ago)
- Last Synced: 2025-06-01T02:48:37.319Z (7 months ago)
- Topics: react, react-performance, typescript
- Language: TypeScript
- Homepage:
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Performance-React 🔥
This demonstrates **authentication and protected routing** in a modern React application using `Context API`, `useReducer`, and `React Router`. It also introduces a custom `useLocalStorage` hook to persist user login across page reloads.
---
## 🔐 Authentication Flow
### 1. **Login**
- User credentials are mocked for simplicity.
- On login, user data is saved to:
- `React Context` (for app-wide access)
- `localStorage` (for persistence on refresh)
### 2. **Profile (Protected Route)**
- Only accessible when a user is authenticated.
- Redirects to `/login` if user is not logged in.
---
## 💡 Key Concepts Covered
| Feature | Description |
| ----------------- | ----------------------------------------------------- |
| `Context API` | Central store for user & auth state |
| `useReducer` | Used for scalable auth state management |
| `localStorage` | Data persists even after refresh |
| `useLocalStorage` | Custom reusable hook for local storage get/set/remove |
| `React Router` | Dynamic routing with protected routes |
---
## 🗂️ File Structure
```
src/
│
├── components/
│ ├── Login.tsx
│ └── Profile.tsx
│
├── context/
│ └── AuthContext/
│ ├── AuthContext.tsx
│ ├── AuthContextType.ts
│ └── authReducer.ts
│
├── hooks/
│ ├── useAuth.ts ← Custom hook to access AuthContext
│ └── useLocalStorage.ts ← Custom hook to resue localStorage logic
│
├── routes/
│ ├── constant.ts
│ ├── publicRoutes.ts
│ └── privateRoutes.ts
│
├── styles/
│ ├── Login.ts
│ └── Profile.ts
│
├── types/
│ └── User.ts
│
└── App.tsx
```
---
## 💡 Topics Covered
- react
- react-router
- auth-context
- role-based-access
- localstorage
- context-api
- use-reducer
- protected-routes
- react-hooks
---
This project helps you understand React application with **global state**, and **protected routes**.
---
> Feel free to fork and ⭐️ this repo if it helps!