Week 2 — Managing State, Escape Hatches & Data

Days 1–2 build React state and Effects fluency; days 3–5 apply Redux Toolkit and TanStack Query to Nest-backed data — then ship a Todo mini-project (RTK + Query).

1. Reacting to input with state
Controlled inputs, change events, and form submission.
Open
2. Choosing the state structure
Avoiding redundancy, duplication, and deeply nested state.
Open
3. Sharing state between components
Single source of truth, controlled children, and callbacks.
Open
4. Preserving and resetting state
Tree position, keys, remounting, and intentional resets.
Open
5. Extracting state logic into a reducer
useReducer, actions, and pure transition logic.
Open
6. Passing data deeply with context
createContext, providers, consumers, and focused context values.
Open
7. Scaling state with reducer and context
Provider composition, dispatch, and predictable actions.
Open
8. Referencing values with refs
useRef, mutable current, and state versus refs.
Open
9. Manipulating the DOM with refs
Ref assignment, focus management, and avoiding DOM conflicts.
Open
10. Synchronizing with Effects
useEffect setup, dependencies, and cleanup.
Open
11. You might not need an Effect
Derived state, memoization only when needed, and event logic.
Open
12. Lifecycle of reactive Effects
Setup, cleanup, dependency changes, and unmount.
Open
13. Separating events from Effects
Causal reasoning, handlers, and reactive synchronization.
Open
14. Removing Effect dependencies
Dependency honesty, stable values, and avoiding stale closures.
Open
15. Reusing logic with custom Hooks
Hook composition, inputs, returned APIs, and rules of Hooks.
Open
16. Caching calculations with useMemo
Memoized derived values, dependency lists, and when a plain calculation during render is enough.
Open
17. Caching functions with useCallback
Stable callbacks, memoized children, Effect dependencies, and avoiding needless wrapping.
Open
18. Redux Toolkit — official tutorial path
This course lesson mirrors https://redux-toolkit.js.org/tutorials/overview and the Quick Start steps, then maps them onto this monorepo (Next + TypeScript + Nest).
Open
19. RTK Essentials practice: client drafts
This is our Redux Essentials-style lab: use RTK for a composer draft after Quick Start, then ship it in Week 4 Notes projects.
Open
20. TanStack Query fundamentals
useQuery, useMutation, query keys, and invalidation.
Open
21. Axios, Nest, and cookies
Axios instances, withCredentials, CORS, and 401 handling.
Open
22. RTK Query vs TanStack Query (and when to use which)
Cover the RTK Query APIs from Getting Started, then the ownership rule for this course.
Open

End-of-week mini-project · practice only

Todo app (RTK + Query)

Ship a Todo UI where unfinished draft text lives in Redux Toolkit and the todo list comes from TanStack Query (Nest or a stub).

Definition. A Todo mini-project is a client that separates unfinished composer state (RTK) from server-backed todo rows (TanStack Query + Axios cookies), matching this course’s ownership rule.

In simpler words. Type a draft in Redux. When you save, Query talks to Nest (or a mock). Never store the Nest list in Redux.

Deliverables

configureStore + createSlice for draft text / selected todo id / filter chrome
typed useAppDispatch / useAppSelector; Provider on the client tree
useQuery list + useMutation create/toggle/delete with invalidateQueries on success
Axios withCredentials for cookie JWT; no JWT in localStorage
Honest loading / empty / error UI; disable submit while mutation pending

Acceptance checklist

- [ ] RTK owns draft + selection (not the Nest todos array)
- [ ] Query owns the list; onSuccess clears draft + invalidateQueries
- [ ] Redux DevTools shows draft updates as you type
- [ ] Cookie credentials path works (or documented stub)
- [ ] Empty ≠ loading; mutation errors visible on the form
- [ ] No JWT in localStorage

Tips

If Nest Todos API is not ready, mock the HTTP contract first, then swap the queryFn.
Reuse the same ownership table you will need for Week 4 Notes UI.
Practice filterDraft vs appliedFilters if you add search — typing should not refetch every keystroke.

Open example