Full Stack Web Development Front-End Development with React Syllabus

When should you use useReducer instead of useState?

When state logic is complex, involves multiple sub-values, or the next state depends on the previous one. useReducer centralizes update logic in a reducer function: (state, action) => newState.

What is the useReducer signature and what does it return?

const [state, dispatch] = useReducer(reducer, initialState). It returns the current state and a dispatch function used to send actions to the reducer.

What does the useMemo hook do?

It memoizes the result of an expensive calculation, recomputing it only when its dependencies change, to avoid unnecessary recalculation on every render.

What does the useCallback hook do?

It memoizes a function definition so the same function reference is kept between renders unless dependencies change—useful to prevent unnecessary re-renders of memoized child components.

What is the difference between useMemo and useCallback?

useMemo memoizes and returns a computed value; useCallback memoizes and returns a function. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

What is a custom hook?

A reusable JavaScript function whose name starts with 'use' and that calls other hooks, allowing you to extract and share stateful logic between components.

What are the Rules of Hooks?

1) Only call hooks at the top level (not inside loops, conditions, or nested functions). 2) Only call hooks from React function components or other custom hooks.

How do you attach an event handler to a JSX element?

Pass a function to a camelCased event prop, e.g. <button onClick={handleClick}>. Pass the function reference, not its call result (handleClick, not handleClick()).

What is a SyntheticEvent in React?

A cross-browser wrapper around the browser's native event that React passes to handlers, providing a consistent API (e.g., e.preventDefault(), e.target) across browsers.

How do you pass an argument to an event handler in JSX?

Wrap it in an arrow function, e.g. onClick={() => handleClick(id)}, so the handler is called with the argument only when the event fires.

What is a controlled component in a React form?

A form input whose value is driven by React state via the value prop and updated through an onChange handler, making React the single source of truth.

What is an uncontrolled component, and how do you read its value?

A form input that maintains its own internal state in the DOM. You read its value with a ref (e.g., inputRef.current.value) instead of React state.

How do you prevent a form's default page-reload on submit in React?

Call event.preventDefault() inside the onSubmit handler attached to the <form> element.

For a controlled checkbox, which prop holds its state instead of 'value'?

The 'checked' prop holds the boolean state, updated via onChange (using e.target.checked).

What is client-side routing?

Rendering different views/components based on the URL without full page reloads from the server; the JavaScript app intercepts navigation and swaps content, enabling SPA navigation.

In React Router, what component is used to create navigation links without reloading the page?

The <Link> component (or <NavLink> for active styling), which renders an anchor and updates the URL via the History API instead of triggering a full reload.

In React Router v6, how do you define routes?

Wrap <Route> elements inside a <Routes> component, e.g. <Routes><Route path='/' element={<Home/>}/></Routes>, all inside a router like <BrowserRouter>.

How do you read a dynamic URL parameter in React Router (e.g., /users/:id)?

Use the useParams hook: const { id } = useParams();

How do you navigate programmatically in React Router v6?

Use the useNavigate hook: const navigate = useNavigate(); then call navigate('/path').

What is prop drilling, and what is one solution?

Passing props through many intermediate components that don't use them, just to reach a deep child. Solutions include the Context API or a state-management library.

What two parts make up the React Context API for sharing global state?

A Provider (created via React.createContext()) that supplies a value to the tree, and consumers that read it via useContext (or a Context.Consumer).

What is Redux, in one sentence?

A predictable state-management library that stores all application state in a single immutable store, updated only by dispatching actions to pure reducer functions.

What are the three core principles of Redux?

1) Single source of truth (one store). 2) State is read-only (changed only by dispatching actions). 3) Changes are made with pure reducer functions.

What are the three main ways to style React components?

1) CSS stylesheets with className. 2) Inline styles via the style prop (a JS object with camelCased properties). 3) CSS-in-JS / CSS Modules (scoped styles).

What format does React's inline 'style' prop expect?

A JavaScript object with camelCased CSS property names and string/number values, e.g. style={{ backgroundColor: 'red', fontSize: 16 }}.

What problem do CSS Modules solve?

They locally scope class names by default (generating unique names), preventing global CSS naming collisions between components.

What does React.memo do?

It is a higher-order component that memoizes a functional component, skipping re-renders when its props are unchanged (shallow comparison), to optimize performance.

Why does React require a 'key' prop when rendering lists?

Keys give each list item a stable identity so React can efficiently track, reorder, add, or remove items during reconciliation. Keys should be unique and stable—avoid using the array index when the list can change.

What is code splitting in React, and which APIs enable it?

Splitting the bundle so code loads on demand rather than all upfront. React.lazy() loads a component lazily, and <Suspense fallback={...}> shows a fallback while it loads.

What is the role of a bundler/build tool like Vite or Webpack in a React project?

It transpiles JSX/modern JS (via Babel), bundles modules, and optimizes assets (minification, tree-shaking, dev server with hot reload) for development and production. Vite is known for fast startup using native ES modules; Webpack is the long-established bundler.

What library is commonly used to test React components by simulating user behavior, and what is its guiding principle?

React Testing Library (often with Jest). Its principle is to test components the way a user interacts with them—querying by visible text/role rather than implementation details.