Topic · 27 lessons in 3 series
React and Next.js
Components, hooks, rendering, server components, data fetching and the Next.js App Router, plus the deeper front-end lessons on state, concurrency and testing.
Senior Frontend DepthWhole series →
- React Rendering Model: Render, Commit, Reconciliation and KeysWhat “render” really means, how React finds what changed between renders, why keys matter and how batching works.18 min
- Hooks in Depth: Effects, Refs and the RulesEffect dependencies, stale closures, useRef vs state, useLayoutEffect and the idea behind “You Might Not Need an Effect”.18 min
- Concurrent React, Suspense and Server Components in Next.jsTransitions, Suspense boundaries, streaming SSR, hydration errors and the line between server and client components.20 min
- State Management Decisions: Local, Context, Server Cache, Global StoreHow to sort state into kinds (UI, server, URL, form) and pick a tool for each kind, instead of arguing about libraries.15 min
- Advanced TypeScript for Interviews: Generics, Narrowing, Utility and Conditional TypesGeneric constraints, discriminated unions, infer, mapped types, satisfies, and keeping API response types correct from the server to the UI.20 min
- Frontend Testing Strategy: Unit, Integration, E2E and What to SkipTest what users see, not how the code is built. Mock the network, not your modules. Keep end-to-end tests for the key flows only.15 min
- Accessibility Essentials Interviewers CheckSemantic HTML first, focus in modals, ARIA only when needed, and testing with the keyboard.12 min
React in DepthWhole series →
- Thinking in React: Components, Props and JSXWhat React is, how JSX becomes function calls, components as functions, props, and the one-way data flow.12 min
- State and Rendering: What Really Happens When State ChangesState, re-renders, batching, how React compares trees, keys, and the render-then-commit steps, with a traced example.15 min
- Effects and the Lifecycle: useEffect Without the ConfusionWhat an effect is, dependencies, cleanup, why effects run twice in development, and when you do not need an effect.15 min
- Hooks in Depth: useRef, useMemo, useCallback, useReducer and Custom HooksEach hook with one small reason to use it, the rules of hooks and why they exist, and how to write a custom hook.16 min
- Forms, Events and Controlled InputsControlled and uncontrolled inputs, form actions and useActionState in React 19, validation, and accessibility basics.14 min
- Data Fetching, Caching and Server Statefetch in effects and its bugs, race conditions, loading and error states, TanStack Query ideas, and Suspense with use().15 min
- Context, State Management and Choosing Where State LivesLifting state, context and its re-render cost, reducers, Zustand and Redux Toolkit at a glance, and a simple decision table.14 min
- Performance: Memoization, Lists, Code Splitting and the React CompilerFind slow renders with the Profiler, memo, virtualised lists, lazy loading, transitions, and what the React Compiler changes.16 min
- Patterns, Server Components and Testing ReactComposition patterns, error boundaries, portals, Server and Client Components in plain words, and testing with Testing Library.16 min
- React Interview Questions With Model AnswersThe questions asked at every level: rendering, keys, hooks, state, performance, and the traps, with first-person answers.18 min
Next.js App RouterWhole series →
- Next.js From Zero: Project Structure, Routing and LayoutsWhat Next.js adds to React, the app folder, pages, layouts, dynamic routes, links and navigation, and the files with special names.13 min
- Server Components and Client Components: What Runs WhereServer by default, what use client really means, the boundary, passing props across it, and the mistakes that leak secrets or bloat the bundle.16 min
- Data Fetching and Caching in the App RouterFetching in Server Components, parallel versus sequential requests, the caching layers, revalidation, and the current Next.js caching model from the bundled docs.16 min
- Server Actions, Forms and MutationsForms that call server functions, validation, pending and error states, revalidating after a change, and the security rules for actions.15 min
- Route Handlers, Middleware (Proxy) and APIsWriting API endpoints, request and response helpers, the request interception layer in this Next.js version, headers, redirects and rewrites.14 min
- Authentication and Authorization in Next.jsSessions with cookies, checking auth close to the data, protecting routes and actions, and the common mistakes.15 min
- Rendering Modes: Static, Dynamic, Streaming and SuspenseStatic and dynamic rendering, how Next.js decides, loading UI and streaming, partial prerendering ideas, and generateStaticParams.15 min
- Metadata, SEO, Images and FontsThe Metadata API, sitemap and robots, Open Graph images, next/image and next/font, and Core Web Vitals habits.14 min
- Environment, Configuration, Deploying and Production HabitsEnvironment variables and what reaches the browser, next.config, building and running, deploying to Vercel and to a container, logging and monitoring.14 min
- Next.js Interview Questions With Model AnswersRendering, caching, Server Components, actions, and the traps interviewers like, with model answers.16 min