Skip to content

Tracks Drills Topics Technologies Tech stacks Skill areas

Tracks Drills Topics

Loading

Aporeon

Technical interview practice, from one developer to another.

About Privacy Terms

.NET Full Stack

Frontend Foundations

React and Next.js mechanics: state, effects, data fetching, rendering, accessibility, performance, and testing.

30 drillsPractice one at a timeOrdered pathConcept questionArchitecture scenarioComparison question

Recommended start

Rendering, Props, State

Explains how React components render from props and state, and how updates flow through a component tree.

Easy~5 minStep 1 of 30

Practice this drill Choose another

Search

30 of 30 shown

1Rendering, Props, StateRecommended startExplains how React components render from props and state, and how updates flow through a component tree.Concept questionEasy~5 minReactTypeScriptPractice 2Controlled InputsExplains controlled inputs, uncontrolled inputs, validation, refs, and when each form approach fits.Concept questionEasy~5 minReactTypeScriptPractice 3Derived StateExplains when to derive values during render instead of storing duplicate state that can drift.Concept questionMedium~7 minReactTypeScriptPractice 4Keys and IdentityExplains why list keys matter for reconciliation, state preservation, reordering, and predictable UI behavior.Concept questionMedium~7 minReactTypeScriptPractice 5State Update MechanicsExplains asynchronous-looking state updates, batching, functional setters, and avoiding stale values.Concept questionMedium~7 minReactTypeScriptPractice 6Component BoundariesExplains how to split components around ownership, reuse, readability, state, and API-like prop contracts.Concept questionMedium~7 minReactTypeScriptPractice 7useEffect DependenciesExplains what useEffect is for, how dependencies work, and how to avoid stale or runaway effects.Concept questionMedium~7 minReactTypeScriptPractice 8Effect CleanupExplains cleanup for subscriptions, timers, event listeners, and aborting stale fetches.Concept questionMedium~7 minReactTypeScriptPractice 9Stale ClosuresExplains stale closures in callbacks, effects, timers, subscriptions, and how to fix them cleanly.Concept questionHard~9 minReactTypeScriptPractice 10Client Data FetchingExplains loading, error, empty, success, refetch, stale data, and request lifecycle in client-rendered React.Concept questionMedium~7 minReactTypeScriptPractice 11Frontend CacheExplains client cache keys, freshness, invalidation, refetching, optimistic updates, and server truth.Concept questionMedium~7 minReactTypeScriptPractice 12Server vs Client ComponentsExplains Next.js server/client component boundaries, interactivity, data access, serialization, and bundle impact.Concept questionMedium~7 minNext.jsReactTypeScriptPractice 13Rendering ModesExplains server rendering, client rendering, static rendering, freshness, SEO, personalization, and performance trade-offs.Concept questionMedium~7 minNext.jsReactTypeScriptPractice 14Hydration MismatchExplains why server HTML and client render can disagree, how to debug it, and how to avoid mismatch-prone code.Concept questionHard~9 minNext.jsReactTypeScriptPractice 15Route Handler BoundaryExplains route handlers as a frontend server boundary for cookies, API adaptation, auth, and backend calls.Concept questionMedium~7 minASP.NET CoreNext.jsReactPractice 16Next.js CachingExplains caching and revalidation choices for static, dynamic, user-specific, and frequently changing data.Concept questionHard~9 minNext.jsReactTypeScriptPractice 17Accessibility BasicsExplains labels, keyboard behavior, focus, semantic HTML, errors, color contrast, and accessible custom controls.Concept questionMedium~7 minReactTypeScriptPractice 18Frontend PerformanceExplains practical frontend performance work: measuring, render cost, memoization, bundle splitting, images, and hydration.Concept questionHard~9 minNext.jsReactTypeScriptPractice 19Component TestingExplains component tests that assert user-visible behavior instead of implementation details.Concept questionMedium~7 minNext.jsPlaywrightReactPractice 20Error BoundariesExplains how React error boundaries, route errors, safe fallbacks, logging, and recovery work together.Concept questionMedium~7 minNext.jsReactTypeScriptPractice 21Unknown at BoundariesExplains why external data needs runtime validation even when the application uses TypeScript.Concept questionMedium~7 minTypeScriptPractice 22UI State UnionsUses discriminated unions to represent valid UI states and make transitions exhaustive.Concept questionMedium~7 minReactTypeScriptPractice 23Browser Event LoopConnects JavaScript tasks and microtasks to rendering, responsiveness, and practical performance fixes.Concept questionMedium~7 minTypeScriptPractice 24Responsive LayoutExplains a constraint-first approach to responsive layout, intrinsic sizing, overflow, and content resilience.Architecture scenarioMedium~10 minReactTypeScriptPractice 25Browser Auth SecurityExplains token storage, cookies, XSS, CSRF, and why browser UI never replaces server authorization.Architecture scenarioHard~12 minASP.NET CoreNext.jsReactPractice 26State OwnershipPlaces state according to who owns it, how long it must live, and whether the URL or server is the source of truth.Architecture scenarioMedium~10 minReactTypeScriptPractice 27React ReducersExplains when a reducer clarifies related state transitions and when independent state remains simpler.Comparison questionMedium~7 minReactTypeScriptPractice 28Custom Hook DesignExplains how custom hooks share stateful behavior while preserving ownership, lifecycle, and a focused contract.Concept questionMedium~7 minReactTypeScriptPractice 29Suspense and StreamingExplains how Suspense boundaries stream useful page regions while coordinating loading, errors, and data ownership.Architecture scenarioHard~12 minNext.jsReactTypeScriptPractice 30URL StateExplains when filters, sorting, pagination, and selection belong in search parameters and how to keep navigation predictable.Architecture scenarioMedium~10 minNext.jsReactTypeScriptPractice

Practice order

30 drillsOne at a time

1Rendering, Props, StateUp next / Easy / ~5 min
2Controlled InputsEasy / ~5 min
3Derived StateMedium / ~7 min
4Keys and IdentityMedium / ~7 min
5State Update MechanicsMedium / ~7 min
6Component BoundariesMedium / ~7 min
7useEffect DependenciesMedium / ~7 min
8Effect CleanupMedium / ~7 min

+22 more drills in this section