Week 1 Recap: React + TypeScript Fundamentals
Week 1 is done. Six posts, six concepts most developers use daily but rarely stop to actually understand. Quick recap before Week 2.
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.
