Core Fundamentals ✅

What is React? Why React?
SPA vs MPA
Unidirectional data flow
Component-based architecture
functional and class components
JSX
- not mandatory
- transpiles to React.createElement
- injection protection
React vs ReactDOM
Virtual DOM
Reconciliation
Diffing algorithm
Importance of key
Synthetic events
Fragments <></> / React.Fragment
Composition over inheritance
{MyFunction()} vs <MyFunction />
CDN usage vs build tools
Webpack, Babel, npm basics

Rendering Model & Lifecycle (🔥 VERY IMPORTANT) ✅

Mount → Update → Unmount lifecycle
Render phase vs Commit phase
Use {MyRefactoredComponent()} instead of
when refactoring inside the component; but use
when refactored outside.
Pure component and pure functions
When does a component re-render?
- state change
- props change
- parent render
- context change
Why children re-render by default
StrictMode double rendering (dev only)
Batching (React 18 automatic batching)
State snapshot behavior
Cleanup functions
useEffect vs useLayoutEffect vs useInsertionEffect
Hydration
createRoot vs hydrateRoot

State & Props ✅

Props (immutable)
State (mutable via setter)
setState async behavior
Functional updates (callback form)
State immutability patterns
Lifting state to common ancestor
Colocation of state
Derived state pitfalls
Controlled vs uncontrolled components
Render props
props.children
HOC vs render props
Pure components
Pure functions
setInterval/setTimeout stale state issues
Functional setState inside timers
higher order function
setCount((prevCount) => prevCount + 1); vs setCount(count + 1);
using state inside setinterval or settimeout

Hooks (Core + Advanced) ✅

Core#

useState
useEffect and lifecycle
useRef
useMemo
useCallback
useContext
useReducer
differnece between instance variables in class components and variables declared in functional componets; usecase of useRef in this Case

Advanced#

forwardRef
useImperativeHandle
Custom hooks
useRef as instance variable
useId
useDebugValue
useSyncExternalStore
useLayoutEffect use cases
stale closures (deep understanding + fixes using ref)

Performance Optimization (🔥 Highly asked) ✅

React.memo
useMemo
useCallback
Differences between them
When memoization is useless/harmful
Prevent unnecessary re-renders
Stable references
Inline functions myth
Keys causing re-mounts
Virtualized lists (react-window/react-virtualized)
Code splitting
Lazy loading
Suspense fallback
React Profiler (DevTools)
Avoid expensive calculations inside render
Large context causing re-renders

React 18+ Modern Features (🔥 MUST KNOW) ✅

Concurrent rendering (non-blocking UI)
- startTransition (mark low priority)
- useTransition (same + loadingState)
- useDeferredValue (delay value)
Automatic batching (fewer renders)
Suspense for data fetching (built-in loading UI)
Streaming SSR (faster server render)
Server Components (server-only logic, no js, only rendered html sent) vs SSR
selective hydration (faster interaction, enabled using Suspense)

Event Handling & Edge Cases ✅

Synthetic events
Event delegation
Stale closures in listeners
Cleanup listeners
Debouncing/throttling
Passive listeners
Prevent memory leaks

(Include your stale state example here)

Forms (Common interview topic) ✅

Controlled inputs
Uncontrolled inputs
useRef with forms
Form validation
Debouncing input
Preventing re-renders
Form libraries
- React Hook Form (uses uncontrolled i.e refs internally, Useful for big forms, as it wont cause re-render much)
- Formik (uses controlled inputs, useful for small forms)

Context API ✅

Props drilling problem
createContext
useContext
Provider pattern
When context causes re-renders
Splitting contexts
memo with context
Context vs Redux tradeoffs
Passing functions via context

State Management Libraries

Redux Core#

Store
Reducer
Action
Dispatch
combineReducers
applyMiddleware

react-redux#

connect
mapStateToProps
mapDispatchToProps
useSelector
useDispatch

Redux Toolkit#

createSlice
configureStore
extraReducers
Immer
RTK Query

Async#

Thunk
Saga (takeLatest, call, put, race)

Others#

Zustand
MobX
Recoil

Data Fetching & Server State (🔥 modern interviews love this) ✅

fetch/axios
useEffect fetch pitfalls
server state vs client state
React Query (solves all below) vs SWR
- race conditions
- abort controllers
- memory leaks
- caching
- pagination
- optimistic updates
- retry logic
- background refetch
- deduplication

Routing

React Router
Nested routes
Layout routes
Protected routes
Lazy loaded routes
Route-based code splitting

Design Patterns & Architecture

Container vs Presentational
Compound components
Provider pattern
Controlled vs uncontrolled components
HOC
Render props
Headless components
Passing components as props
Smart vs dumb components
Feature-based folder structure
Colocation strategy
Microfrontends (concept)
Design systems

Communication between components

pass props from parent to child
State Management Libraries
Context API
forwardRef + useImperativeHandle (Calling child's function from parent using exposing ref)
pass Callback Functions as props from parent to child (for communication from child to parent)
Event Bus or Pub/Sub (using a third-party library or custom code)
Using props.children to use composition (don't use inheritance)

Styling ✅

Global CSS
CSS Modules
SCSS
Styled Components and Emotion (dynamic UI or theming)
JSS
CSS-in-JS tradeoffs
classNames library (for conditional styling)
Styling pitfalls with modules
nth-child issues
Theming

Accessibility (🔥 underrated but important)

semantic HTML
aria attributes
keyboard navigation
focus management
screen readers
accessible modals/portals

Portals

Rendering outside DOM hierarchy
Modals
Tooltips
stacking context issues
focus trapping

Error Handling

Error boundaries
What they catch vs don’t catch
Fallback UI
Logging (Sentry)
Async error handling

SSR / Frameworks ✅

CSR vs SSR vs SSG vs ISR
Hydration
SEO implications
Next.js basics
Streaming
Server vs client components

Testing ✅

Jest
React Testing Library
Mocking
Spying
Mocha and chai
Snapshot testing
Integration testing
Cypress (E2E)
Testing user behavior vs implementation

TypeScript with React (modern requirement) ✅

typing props
typing children
generics
forwardRef typing
discriminated unions
React.FC pros/cons
typing custom hooks

Redux

redux
- Store, Redux, CreateStore, applyMiddleware,
- reducer, action, action creators
- rootReducer, combineReducer({r1, r2})
react-redux lib ,
- mapStateToProps, mapDispatchToProps, connect, dispatch
- export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
- Redux Toolkit
  - lib thats simplifies the use of redux, reduces boilerplate
  - already integrated with redux-thunk; can be integrated with saga if required
  - createSlice({name, initalState, reducer, extraReducer}),
  - mySlice.actions, mySlice.reducer,configureStore
Redux thunk
- returning a function from action creator, automatically handled by thunk
- handling async function calls in action creators
- const store = createStore(rootReducer, applyMiddleware(thunk));
Redux saga
- More modular, and appropriate for complex react app than Redux thunk
- uses generators functions in JS, yield and *
- yield works like await; put is used to make internally call dispatch
- takeEvery, put, call, race, takeLatest, take
- yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
- const data = yield call(api.fetchData, action.payload);

Tools & Ecosystem ✅

React DevTools (browser extension)
Profiler (tab in react devtools for performance)
ESLint rules for hooks (eslint-plugin-react-hooks, exhaustive-deps)
plop.js scaffolding (file generator using template)
axios cancellation (using abort controller)
React Query DevTools (Enable it in code, to debug react query, inspect cached queries, stale states, refetching behavior, and manually trigger invalidations.)
bundlers (Vite/Webpack)
tree shaking
React profiling for performance ccheck with react dev tools