Building Real Apps

Organise complex state, share it across the app, add multiple pages and make everything fast: the architecture skills companies hire for.

useReducer & Context API

As apps grow, state gets complicated and must be shared far and wide. useReducer organises complex updates; Context delivers data to any component without prop drilling.

• When useState gets messy
• Reducers: (state, action) → new state
• dispatch, action type & payload (animated)
• The prop drilling problem
• createContext, Provider, useContext
• Context + reducer = a mini global store
• Custom hooks for context
• Performance & splitting contexts

function reducer(state, action) {
  switch (action.type) {
    case 'deposit':
      return state + action.amount;
    default: return state;
  }
}

React Router

Real apps have many pages: Home, Courses, Course details, Cart, Dashboard. React Router maps URLs to components, without ever reloading the page.

• How SPA routing works (animated)
• BrowserRouter, Routes, Route
• Link vs <a> (no page reload)
• NavLink for active menus
• URL parameters: /courses/:id
• Nested routes & Outlet layouts
• useNavigate & useSearchParams
• 404 pages & protected routes

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/courses/:id"
         element={<CourseDetail />} />
  <Route path="*" element={<NotFound />} />
</Routes>

Redux Toolkit (Global State)

Big apps (e-commerce, ERPs, dashboards) keep shared data in one central store. Redux Toolkit is the official, modern way to do that, and it is asked about in many React job interviews.

• Why a global store?
• The Redux flow (animated)
• Slices: state + reducers + actions
• configureStore and Provider
• useSelector and useDispatch
• Async data with createAsyncThunk
• Selectors & createSelector
• Redux vs Context vs Zustand

const cartSlice = createSlice({
  name: 'cart',
  initialState: [],
  reducers: {
    add: (state, action) => {
      state.push(action.payload);
    },
  },
});

Performance Optimization

React is fast by default, but big apps with thousands of rows or heavy calculations can feel slow. Learn to measure, then fix with the right tool.

• Why components re-render (animated)
• Measure first: React DevTools Profiler
• React.memo
• useMemo for expensive calculations
• useCallback for stable functions
• Code splitting: lazy + Suspense
• useTransition & useDeferredValue
• Virtualizing huge lists

const ProductCard = memo(function ProductCard({ p }) {
  return <div>{p.name}</div>;
});

const sorted = useMemo(
  () => sortBig(list), [list]);