React Core Concepts

Grounded in modern React with function components, hooks, and data-fetching patterns. Start after solid JS/TS fundamentals.

Components and rendering

• Function components only: Keep components small; lift state sparingly and prefer composition over prop drilling.
• Props and state: Treat props as immutable; use state for local UI data. Derive state when possible instead of duplicating props.
• Keys: Use stable keys for lists to avoid state leaks during reconciliation.

Hooks

• Core hooks: useState, useEffect, useMemo, useCallback, useRef, useContext.
• Rules of hooks: Call at the top level; consistent order across renders.
• Effects: Use for side effects; avoid data derivations or event handlers inside effects when unnecessary. Clean up subscriptions and timers.
• Custom hooks: Encapsulate reusable data fetching, subscriptions, or state machines; return stable APIs.

Data fetching and caching

• Server data: Use React Query/SWR-style libraries for cache keys, background refresh, retries, and de-duping.
• Error/loading states: Always render loading/error UI; expose retry handlers.
• Suspense (forward-looking): Plan for async boundaries and streaming when applicable.

State management

• Local vs global: Keep most state local; use Context for cross-cutting concerns; reach for Redux Toolkit/Zustand/Recoil only when shared, cross-page state grows.
• Reducers: Use useReducer for complex local flows; ensure actions are serializable and predictable.
• Derived data: Compute with useMemo to avoid recomputation during renders.

Routing

• React Router data APIs: Prefer loaders/actions for data + mutations; co-locate route elements and data requirements.
• Code splitting: Lazy-load routes/components with React.lazy + Suspense for better TTI.

Performance

• Rendering costs: Avoid unnecessary re-renders with memoization (memo, useMemo, useCallback) when downstream components are expensive.
• Lists: Virtualize long lists (e.g., react-window), batch updates, and avoid heavy sync work in render paths.
• Hydration/SSR: For SSR/SSG, plan for hydration boundaries and avoid client-only APIs during SSR.

Testing

• React Testing Library: Test user-observable behavior; avoid implementation details.
• Async UI: Use findBy* queries for async elements; fake timers for scheduled updates when needed.
• Accessibility assertions: Prefer role/name-based queries to encode a11y expectations.

Error handling and resilience

• Error boundaries: Catch render-time errors; show fallback UI and log details.
• Retries and fallbacks: Re-render on refetch/retry; degrade gracefully on partial data.

Interview-ready drills

• Trace render order for parent/child components with changing props and memoized callbacks.
• Implement a custom hook that debounces an input value.
• Model optimistic updates with rollback using React Query (mutations with onMutate/onError/onSettled).