After this lesson, you will be able to: Build and publish a custom React hooks library (or a profiled performance showcase) that demonstrates the rendering model, hook design, and performance work from this subtrack.
Passion project per Curriculum-Upgrade.md. The senior-React signal is reusable hook design and the ability to fix re-render problems. Publish something other developers could actually drop into their app.
Path A: a typed custom-hooks library (useLocalStorage, useDebouncedValue, useMediaQuery, useIntersectionObserver, useEventListener). Path B: a performance showcase app that stays smooth under load.
Path A milestones:
M1: scaffold TS + tsup, peerDependency on react, dual ESM/CJS, `.d.ts` emit.
M2: implement 4-6 hooks. Get the dependency arrays and cleanup right; type the generics so return values infer.
M3: tests with React Testing Library + the renderHook helper. Cover unmount cleanup and re-render behaviour.
M4: a docs/demo page (Storybook or a small Vite app) showing each hook live.
M5: README + JSDoc + `npm publish` + v0.1.0 release.
Path B milestones:
M1: build a UI that's slow on purpose (10K-100K rows / heavy list).
M2: profile with React DevTools; record the flamegraph and the culprit re-renders.
M3: fix with virtualization (TanStack Virtual), memo where it's justified, and state colocation.
M4: write up before/after numbers with screenshots. Deploy to Vercel with a live URL.
Hooks that re-create functions/objects every render and break consumer memoization. Missing cleanup in useEffect (listeners, observers, timers leak). Sprinkling React.memo everywhere instead of finding the actual cause. A perf showcase with no measured numbers. 'Feels faster' convinces no one. No deploy and no public artifact.
Sign in and purchase access to unlock this lesson.