# Week 1 Recap: React + TypeScript Fundamentals

**Day 1 — Top 10 React Hooks You Should Know** Beyond `useState` and `useEffect`: `useContext`, `useReducer`, `useMemo`, `useCallback`, `useRef`, `useLayoutEffect`, `useImperativeHandle`, and `useId` each solve a specific problem. Knowing which problem each solves matters more than memorizing syntax.

**Day 2 — 5 Custom Hooks That Will Clean Up Your Codebase** `useLocalStorage`, `useDebounce`, `useFetch`, `useOnClickOutside`, `usePrevious`. The rule: if you've written the same `useState` + `useEffect` pattern twice, extract it.

**Day 3 — Why Your Component Re-Renders (And How to Stop It)** Three real triggers: state changes, parent re-renders, context changes. The trap: passing new function/object props on every render silently defeats `React.memo`. Diagnose with the Profiler before optimizing.

**Day 4 — 10 TypeScript Types Every Frontend Dev Should Know** Union types, generics, utility types (`Partial`, `Pick`, `Omit`), discriminated unions, `unknown` vs `any`. Good types are documentation that can't go stale — the compiler enforces it stays accurate.

**Day 5 — App Router vs Pages Router: What Actually Changed** The real shift isn't folder structure — it's Server Components by default. Instead of "client-side by default, opt into server rendering," it's now "server-side by default, opt into client-side when needed."

**Day 6 — Module Federation Explained Simply** Lets independently-deployed apps share code at runtime without a shared build step. Solves the "npm package version drift" problem for teams shipping on separate schedules — but adds real complexity around shared dependency versions.

**The thread connecting all six:**

Every post this week came back to the same idea from a different angle: understanding *why* something works changes how you use it, more than memorizing the API surface does. Knowing why `React.memo` needs `useCallback` to actually work, why Server Components changed the data-fetching model, why Module Federation trades build-time simplicity for deploy-time independence — that's the difference between using a tool and actually reasoning about it.

**A genuine question before Week 2:**

Week 2 covers state management, styling architecture, Nx monorepos, GraphQL, accessibility, and testing. Which of Week 1's six topics was most useful to you, and is there a specific angle on any of Week 2's topics you'd want covered?

**Takeaway:** Six posts, one underlying pattern: React and TypeScript features exist to solve specific problems, not to be used everywhere by default. Match the tool to the actual problem, every time.