- Topic Tracker System

✏️ Rename Sheet

Checklist Focus Group

➕ Add Topic Item

Topic Description	Status	Management Actions
1. Introduction To React 23		Edit
1. What is React 23		Edit
2. Why React? (Virtual DOM & Component-Based Architecture) 23		Edit
3. React vs Angular vs Vue 23		Edit
4. How Virtual DOM Works 23		Edit
5. React vs ReactDOM 23		Edit
6. Single Page Application (SPA) Concept 23		Edit
7. Setting Up with Create React App (CRA) 23		Edit
8. Setting up with Vite (recommended) 23		Edit
9. index.html, main.jsx, App.jsx 23		Edit
10. How React renders to DOM 23		Edit
11. Understanding React Project Folder Structure 23		Edit
12. React DevTools (browser extension) 23		Edit
----------------------------------------------------------------		Edit
2. JSX 24		Edit
13. What is JSX 24		Edit
14. JSX vs HTML differences 24		Edit
15. JSX expressions (curly braces {}) 24		Edit
16. JSX attributes (className, htmlFor) 24		Edit
17. Self-closing tags in JSX 24		Edit
18. Returning multiple elements (Fragment <>) 24		Edit
19. JSX comments 24		Edit
20. JSX is compiled to React.createElement() 24		Edit
21. Conditional rendering in JSX 24		Edit
22. Rendering lists in JSX 24		Edit
3. Components 25		Edit
23. What are Components 25		Edit
24. Functional Components 25		Edit
25. Class Components (basics) 25		Edit
26. Functional vs Class Components 25		Edit
27. Component Naming (PascalCase) 25		Edit
28. Exporting & Importing Components 25		Edit
29. Default vs Named exports 25		Edit
30. Nesting Components 25		Edit
31. Component Tree concept 25		Edit
32. Reusable Components 25		Edit
33. Presentational vs Container Components 25		Edit
4. Props 26		Edit
34. What are Props 26		Edit
35. Passing Props to Components 26		Edit
36. Receiving Props 26		Edit
37. Destructuring Props (Best Practice) 26		Edit
(i). Destructuring Arrays 26		Edit
38. props.children 26		Edit
39. Default Props (defaultProps) 26		Edit
40. Prop Types (PropTypes library) 26		Edit
41. PropTypes validation (string, number, func, array, object, bool) 26		Edit
42. isRequired in PropTypes 26		Edit
43. Passing functions as Props 26		Edit
44. Passing objects & arrays as Props 26		Edit
45. Immutability of Props 26		Edit
5. State 27		Edit
46. What is State (React) 27		Edit
47. useState Hook 27		Edit
48. Initializing State 27		Edit
49. Reading State 27		Edit
50. Updating State (setState) 27		Edit
51. State is asynchronous 27		Edit
52. Functional updates in useState 27		Edit
53. State with objects 27		Edit
54. State with arrays 27		Edit
55. Immutability in State updates 27		Edit
56. Multiple State variables 27		Edit
57. Lifting State Up 27		Edit
58. Derived State 27		Edit
6. Event Handling 28		Edit
59. Handling Events in React 28		Edit
60. onClick event 28		Edit
61. onChange event 28		Edit
62. onSubmit event 28		Edit
63. onFocus & onBlur 28		Edit
64. onMouseEnter & onMouseLeave 28		Edit
65. onKeyDown & onKeyUp 28		Edit
66. Synthetic Events in React 28		Edit
67. Passing arguments to event handlers 28		Edit
68. Preventing default behavior (e.preventDefault()) 28		Edit
69. Event Bubbling in React 28		Edit
70. Event Delegation in React 28		Edit
7. Conditional Rendering 29		Edit
71. if/else in JSX 29		Edit
72. Ternary Operator in JSX 29		Edit
73. Short Circuit (&&) rendering 29		Edit
74. Nullish Coalescing (??) in JSX 29		Edit
75. Switch case rendering 29		Edit
76. Rendering null (hiding component) 29		Edit
77. Dynamic class names based on condition 29		Edit
8. Lists & Keys 30		Edit
78. Rendering Lists with map() 30		Edit
79. What are Keys in React 30		Edit
80. Why Keys are Important 30		Edit
81. Using Unique IDs as Keys 30		Edit
82. Avoid Using Index as Key (When to Avoid) 30		Edit
83. Keys Must Be Unique Among Siblings 30		Edit
84. Rendering Lists of Objects 30		Edit
85. Nested Lists 30		Edit
9. Forms in React 31		Edit
86. Controlled Components 31		Edit
87. Uncontrolled Components 31		Edit
88. input, textarea, select handling 31		Edit
89. Form submission (onSubmit) 31		Edit
90. Handling multiple inputs with one handler 31		Edit
91. Checkbox & Radio inputs 31		Edit
92. File input handling 31		Edit
93. Form Reset 31		Edit
94. Basic form validation 31		Edit
95. React Hook Form library 31		Edit
96. Formik library 31		Edit
97. Yup validation schema 31		Edit
98. Zod validation schema 31		Edit
10. React Hooks (Core) 32		Edit
99. What are Hooks & Rules of Hooks 33		Edit
100. Only call Hooks at top level 33		Edit
101. Only call Hooks in React functions 33		Edit
102. useState 33		Edit
1) useState basics 33		Edit
2) Lazy initialization in useState 33		Edit
3) State batching (React 18) 33		Edit
103. useEffect 33		Edit
1) What is useEffect 33		Edit
2) useEffect with no dependency array (runs every render) 33		Edit
3) useEffect with empty array (runs once — componentDidMount) 33		Edit
4) useEffect with dependencies (runs when dependency changes) 33		Edit
5) Cleanup function in useEffect (componentWillUnmount) 33		Edit
6) Fetching data with useEffect 33		Edit
7) useEffect with async functions 33		Edit
8) Avoiding infinite loops in useEffect 33		Edit
9) Multiple useEffects 33		Edit
10) What is useRef 33		Edit
11) Accessing DOM elements with useRef 33		Edit
12) useRef vs useState (no re-render) 34		Edit
13) Storing previous state with useRef 34		Edit
14) Forwarding Refs (forwardRef) 34		Edit
15) useImperativeHandle 34		Edit
16) What is Context API 34		Edit
17) Creating Context (createContext) 34		Edit
18) Provider component 34		Edit
19) useContext Hook 34		Edit
20) When to use Context 34		Edit
21) Avoiding prop drilling with Context 34		Edit
22) Multiple Contexts 34		Edit
23) What is useReducer 34		Edit
24) useReducer syntax and parameters 34		Edit
25) State, action, and reducer concepts 34		Edit
26) Dispatching actions with useReducer 34		Edit
27) useReducer vs useState 34		Edit
28) Complex state management with useReducer 34		Edit
29) Combining useReducer with Context API 34		Edit
30) Lazy initialization in useReducer 34		Edit
31) Handling multiple actions in a reducer 35		Edit
32) Best practices for useReducer 35		Edit
33) What is useReducer 35		Edit
34) reducer function (state, action) 35		Edit
35) dispatch function 35		Edit
36) useReducer vs useState 35		Edit
37) When to use useReducer 35		Edit
38) useReducer with complex state 35		Edit
39) Combining useReducer with Context 35		Edit
104. useMemo 35		Edit
1) What is useMemo 35		Edit
2) Memoizing expensive calculations 35		Edit
3) useMemo dependency array 35		Edit
4) When to use useMemo 35		Edit
5) Avoiding premature optimization 35		Edit
105. useCallback 35		Edit
1) What is useCallback 35		Edit
2) Memoizing functions 35		Edit
3) useCallback vs useMemo 35		Edit
4) When to use useCallback 36		Edit
5) useCallback with event handlers 36		Edit
106. useLayoutEffect 36		Edit
1) What is useLayoutEffect 36		Edit
2) useEffect vs useLayoutEffect 36		Edit
3) When to use useLayoutEffect 36		Edit
107. useId (React 18) 36		Edit
1) Generating unique IDs 36		Edit
11. Custom Hooks 37		Edit
108. What are Custom Hooks 37		Edit
109. Creating Custom Hooks (useName convention) 37		Edit
110. useFetch Hook (data fetching) 37		Edit
111. useLocalStorage Hook 37		Edit
112. useDebounce Hook 37		Edit
113. useThrottle Hook 37		Edit
114. useOnClickOutside Hook 37		Edit
115. useWindowSize Hook 37		Edit
116. useToggle Hook 37		Edit
117. Sharing logic between components with Custom Hooks 37		Edit
12. React Router DOM 38		Edit
118. What is React Router 39		Edit
119. Installing React Router DOM 39		Edit
120. BrowserRouter setup 39		Edit
121. Routes & Route components 39		Edit
122. Link & NavLink components 39		Edit
123. useNavigate Hook 39		Edit
124. useParams Hook 39		Edit
125. useLocation Hook 39		Edit
126. useSearchParams Hook 39		Edit
127. Dynamic Routes (/users/:id) 39		Edit
128. Nested Routes 39		Edit
129. Outlet component 39		Edit
130. Index Routes 39		Edit
131. Protected Routes (Auth Guard) 39		Edit
132. Redirect (Navigate component) 39		Edit
133. 404 Page (catch-all route) 39		Edit
134. Lazy Loading Routes 39		Edit
135. React Router v6 vs v5 differences 39		Edit
13. State Management 41		Edit
136. Context API (built-in) 42		Edit
1) Context API for global state 42		Edit
2) Context with useReducer pattern 42		Edit
3) Performance issues with Context 42		Edit
4) What is Redux & why use it 42		Edit
5) Redux core concepts (store, action, reducer) 42		Edit
6) Installing Redux Toolkit 42		Edit
7) configureStore 42		Edit
8) createSlice (state + reducers + actions) 42		Edit
9) useSelector Hook 42		Edit
10) useDispatch Hook 42		Edit
11) Redux DevTools 42		Edit
12) Async actions with createAsyncThunk 42		Edit
13) extraReducers & builder pattern 42		Edit
14) RTK Query (data fetching) 42		Edit
15) RTK Query — createApi & fetchBaseQuery 42		Edit
16) RTK Query — endpoints (query & mutation) 42		Edit
17) RTK Query — useGetQuery & useMutation Hooks 42		Edit
18) Redux vs Context API (when to use what) 42		Edit
19) What is Zustand 43		Edit
20) Creating store with Zustand 43		Edit
21) Reading & updating state 43		Edit
22) Zustand vs Redux 43		Edit
23) Atomic state management concept (Jotai/Recoil basics) 43		Edit
14. Data Fetching 44		Edit
137. Fetch API in React 45		Edit
138. Axios in React 45		Edit
139. Axios instance & base URL 45		Edit
140. Axios interceptors (request & response) 45		Edit
141. Handling loading state 45		Edit
142. Handling error state 45		Edit
143. Handling success state 45		Edit
144. Cancelling requests (AbortController) 45		Edit
145. React Query (TanStack Query) 45		Edit
146. useQuery Hook 45		Edit
147. useMutation Hook 45		Edit
148. Query invalidation & refetching 45		Edit
149. React Query DevTools 45		Edit
150. Stale time & cache time 45		Edit
151. Pagination with React Query 45		Edit
152. Infinite scroll with useInfiniteQuery 45		Edit
153. React Query vs RTK Query vs Axios 45		Edit
15. Component Patterns 46		Edit
154. Higher Order Components (HOC) 46		Edit
155. Render Props Pattern 46		Edit
156. Compound Components Pattern 46		Edit
157. Controlled vs Uncontrolled Components 46		Edit
158. Container / Presentational Pattern 46		Edit
159. Custom Hook Pattern 46		Edit
160. Provider Pattern 46		Edit
161. Observer Pattern (basics) 46		Edit
16. Performance Optimization 47		Edit
162. React.memo (memoizing components) 47		Edit
163. useMemo (memoizing values) 47		Edit
164. useCallback (memoizing functions) 47		Edit
165. Lazy Loading components (React.lazy) 47		Edit
166. Suspense component 47		Edit
167. Code Splitting 47		Edit
168. Virtualization (react-window / react-virtual) 47		Edit
169. Avoiding unnecessary re-renders 47		Edit
170. Key prop optimization 47		Edit
171. Profiler API (React DevTools) 47		Edit
172. Debouncing & Throttling in React 47		Edit
173. Image optimization 47		Edit
174. Bundle size analysis 47		Edit
17. Styling in React 48		Edit
175. Plain CSS in React 48		Edit
176. CSS Modules 48		Edit
177. Inline Styles 48		Edit
178. Styled Components (CSS-in-JS) 48		Edit
179. Emotion library 48		Edit
180. Tailwind CSS with React 48		Edit
181. SASS/SCSS in React 48		Edit
182. Dynamic class names (clsx / classnames library) 48		Edit
183. Global styles vs Component styles 48		Edit
18. UI Component Libraries 49		Edit
184. Material UI (MUI) 49		Edit
185. Ant Design 49		Edit
186. Chakra UI 49		Edit
187. shadcn/ui 49		Edit
188. Radix UI (headless) 49		Edit
189. React Bootstrap 49		Edit
190. Mantine UI 49		Edit
191. When to use UI libraries vs custom components 49		Edit
19. Error Handling in React 50		Edit
192. Error Boundaries (class component) 50		Edit
193. componentDidCatch & getDerivedStateFromError 50		Edit
194. react-error-boundary library 50		Edit
195. Handling API errors 50		Edit
196. Fallback UI on error 50		Edit
197. Error handling with React Query 50		Edit
20. React with TypeScript 51		Edit
198. Setting up React with TypeScript 51		Edit
199. Typing Props (interface / type) 51		Edit
200. Typing State (useState<Type>) 51		Edit
201. Typing Events (React.ChangeEvent, React.MouseEvent) 51		Edit
202. Typing Refs (useRef<HTMLInputElement>) 51		Edit
203. Typing Context 51		Edit
204. Typing Custom Hooks 51		Edit
205. Typing API responses 51		Edit
206. Generic Components 51		Edit
21. Testing in React 52		Edit
207. What is Testing & why important 52		Edit
208. Types of Tests (unit, integration, e2e) 52		Edit
209. Jest setup 52		Edit
210. React Testing Library (RTL) 52		Edit
211. render() & screen queries 52		Edit
212. fireEvent & userEvent 52		Edit
213. Testing components 52		Edit
214. Testing Hooks 52		Edit
215. Testing API calls (mocking with MSW) 52		Edit
216. Snapshot testing 52		Edit
217. Cypress for E2E testing (basics) 52		Edit
22. Advanced React Concepts 53		Edit
218. Portals (rendering outside root) 53		Edit
219. Refs & forwardRef 53		Edit
220. Concurrent Mode (React 18) 53		Edit
221. Automatic Batching (React 18) 53		Edit
222. Transitions (useTransition, startTransition) 53		Edit
223. useDeferredValue Hook 53		Edit
224. Suspense for data fetching 53		Edit
225. Server Components (React 19 basics) 53		Edit
226. Strict Mode 53		Edit
227. Reconciliation algorithm 53		Edit
228. Fiber architecture (concept) 53		Edit
23. React with Backend (Full Stack) 54		Edit
229. Connecting React with Express API 54		Edit
230. Proxy setup (Vite / CRA) 54		Edit
231. Environment variables in React (.env) 54		Edit
232. CORS handling on frontend 54		Edit
233. JWT storage (localStorage vs httpOnly cookie) 54		Edit
234. Axios interceptors for auth headers 54		Edit
235. Refresh token logic on frontend 54		Edit
236. Protected routes with auth state 54		Edit
237. Role-based UI rendering 54		Edit
238. File upload from React (FormData) 54		Edit
24. Deployment 55		Edit
239. Building React app (npm run build) 55		Edit
240. Deploying on Vercel 55		Edit
241. Deploying on Netlify 55		Edit
242. Environment variables in production 55		Edit
243. Handling routing on deployment (404 fix) 55		Edit
244. Deploy with Docker (basics) 55		Edit

Tab Progress Metrics

Completed Task %: 0%

Remaining Task %: 100%

Total Topics in Tab 349

Completed Topics 0