Interview Q&A

Short answer: The Virtual DOM is a lightweight in-memory representation of the real DOM. React updates the Virtual DOM first and compares it with the previous version, only applying the necessary changes to the real DOM. ✅ Benefit: Improves performance by reducing real DOM operations.

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: State is data that is local to a component and can change over time. ✅ Example using useState: import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0);

Example code

return <button onClick={() => setCount(count + 1)}>{count}</button>; }

Real-world example (ShopNest)

ProductCard receives price via props. The parent Catalog owns selected filters in state and passes them down.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Feature Props State Mutable? ❌ No (read-only) ✅ Yes Who sets it? Parent component Component itself Used for Passing data Handling internal data

Real-world example (ShopNest)

ProductCard receives price via props. The parent Catalog owns selected filters in state and passes them down.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Keys help React identify which items have changed, been added, or removed. ✅

Example code

{items.map(item => ( <li key={item.id}>{item.name}</li> ))} 🛑 Avoid using array index as key unless absolutely necessary.

Real-world example (ShopNest)

When rendering cart lines, use a stable key={item.id}—not the array index—so React updates the right row after delete.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Feature Controlled Uncontrolled Input value managed by React state DOM itself Access value via useState ref Example use case Forms with validation Quick, simple input fields ✅ Controlled: <input value={value} onChange={e => setValue(e.target.value)} /> ✅ Uncontrolled: <input ref={inputRef} />

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ccess value via useState ref Example use case Forms with validation Quick, simple input fields ✅ Controlled: <input value={value} onChange={e => setValue(e.target.value)} /> ✅ Uncontrolled: <input ref={inputRef} /> ccess value via useState ref Example use case Forms with validation Quick, simple input fields ✅ Controlled: <input… value={value} onChange={e…… => setValue(e.target.value)} /> ✅ Uncontrolled: <input…

Explain a bit more

ref={inputRef} /> ccess value via useState ref Example use case Forms with validation Quick, simple input fields ✅ Controlled: <input value={value} onChange={e => setValue(e.target.value)} /> ✅ Uncontrolled: <input ref={inputRef} /> ccess value via useState ref Example use case Forms with validation Quick, simple input fields ✅ Controlled: <input… value={value} onChange={e => setValue(e.target.value)} /> ✅ Uncontrolled: <input ref={inputRef} />

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Lifting state up means moving state to the nearest common ancestor when multiple components need to share or modify it. ✅ Example: function Parent() { const [value, setValue] = useState("");

Example code

return ( <> <Input value={value} onChange={setValue} /> <Display value={value} /> </> ); } function Input({ value, onChange }) { return <input value={value} onChange={e => onChange(e.target.value)} />; } function Display({ value }) { return <p>{value}</p>;
} React Hooks

Real-world example (ShopNest)

ProductCard receives price via props. The parent Catalog owns selected filters in state and passes them down.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: useEffect lets you run side effects in functional components (like data fetching, subscriptions, etc.). ✅ Syntax: useEffect(() => { // Side effect return () => { // Cleanup }; }, [dependencies]); ✅ Common use cases: Fetching data Event listeners Updating DOM directly Subscribing to services

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Feature useEffect useLayoutEffect When it runs After paint Before paint (after DOM mutation) Use for Async tasks, data fetching Measuring DOM, sync layout Blocking paint? ❌ No ✅ Yes (can cause jank) 🔍 Use useLayoutEffect only when layout measurement or synchronously modifying DOM is necessary.

Real-world example (ShopNest)

ShopNest’s cart icon uses useState for count and useEffect to load the cart once on mount.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: useCallback memoizes a function to avoid unnecessary re-creations. ✅ Syntax: const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]); ✅ Use case: Prevents unnecessary re-renders of child components receiving functions as props. const handleClick = useCallback(() => { console.log("Clicked!"); }, []);

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Redux is a predictable state container for JavaScript apps, often used with React. ✅ Why use Redux? Centralizes app state Makes state predictable and traceable Useful in large-scale apps with deeply nested components Works well with middleware for async tasks (like API calls)

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Local State (useState) Global State (Redux/Context) Exists within a component Shared across multiple components Ideal for UI-level concerns Ideal for app-wide data (e.g., auth, theme) Cannot be accessed by siblings Easily accessible across app

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Context API is a built-in way to pass data globally without prop drilling. Feature Context API Redux Built-in? ✅ Yes ❌ No (external lib) Use case Small to medium apps Large/complex apps Boilerplate Minimal More (simplified by RTK) Async support Manual Built-in via middleware DevTools ❌ Limited ✅ Excellent support

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: sync support Manual Built-in via middleware DevTools ❌ Limited ✅ Excellent support

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: React Router is the standard library for routing in React applications. It enables navigation between different components or views without full page reloads, helping build single-page applications (SPA). Declarative routing: Allows you to define routes using JSX. Dynamic routing: Routes can be dynamically rendered based on the state, props, or URL.

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Applications (SPA). Declarative routing: Allows you to define routes using JSX. Dynamic routing: Routes can be dynamically rendered based on the state, props, or URL.

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Feature BrowserRouter HashRouter URL structure Clean URLs (e.g., /home, /about) URLs include a # (e.g., /home#about) Usage Preferred for modern apps on a web server Useful for apps without server-side routing (e.g., static sites) History API support Uses the HTML5 history API Uses the URL's hash to manage routing SEO friendliness SEO-friendly (with server-side configuration) Less SEO-friendly due to # in the URL

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: web server Useful for apps without server-side routing (e.g., static sites) History API support Uses the HTML5 history API Uses the URL's hash to manage routing SEO friendliness SEO-friendly (with server-side configuration) Less SEO-friendly due to # in the URL

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Feature Link NavLink Purpose Navigate between pages Navigation with active styling Active style No built-in active style Automatically adds an active class when the route is active Use case Basic navigation For creating navigation menus with active links (e.g., highlighting the active link) Example of NavLink: import { NavLink } from 'react-router-dom'; function Navbar() { return ( <nav> <NavLink to="/"…

Explain a bit more

activeClassName="active">Home</NavLink> <NavLink to="/about" activeClassName="active">About</NavLink> </nav> ); }

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ctive style No built-in active style utomatically adds an active class when the route is ctive Use case Basic navigation For creating navigation menus with active links (e.g., highlighting the active link) Example of NavLink: import { NavLink } from 'react-router-dom'; function Navbar() { return ( <nav> <NavLink to="/"… ……… activeClassName="active">Home</NavLink> <NavLink to="/about"…

Explain a bit more

activeClassName="active">About</NavLink> </nav> ); } ctive style No built-in active style utomatically adds an active class when the route is ctive Use case Basic navigation For creating navigation menus with active links (e.g., highlighting the active link) Example of NavLink: import { NavLink } from 'react-router-dom'; function Navbar() { return ( <nav> <NavLink to="/" activeClassName="active">Home</NavLink> <NavLink to="/about" activeClassName="active">About</NavLink> </nav> ); } ctive style No built-in active style utomatically adds an active class when the route is ctive Use case Basic navigation For creating navigation menus…

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Code splitting is the practice of breaking up the bundle into smaller chunks so that only the required code is loaded when needed, improving initial load performance. How to Implement:

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Lazy loading is a design pattern where resources (like components) are loaded only when they are needed (e.g., when they enter the viewport or the user navigates to the route). In React, lazy loading is typically implemented using React.lazy and Suspense.

Example code

import { Suspense } from 'react'; const HeavyComponent = React.lazy(() => import('./HeavyComponent')); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <HeavyComponent /> </Suspense> ); } This ensures that the heavy component is only loaded when the app actually needs it.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Jest is a JavaScript testing framework created by Facebook, commonly used for testing React applications. It comes with: Test runner: Executes test files. Assertions: Provides functions like expect() for asserting conditions. Mocks: Mocking capabilities for API calls or functions. Snapshots: Captures UI output at a given time. How to use Jest with React: Install Jest: npm install --save-dev jest

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: React Testing Library (RTL) and Enzyme are two popular testing utilities for React.

Explain a bit more

Feature React Testing Library Enzyme Philosophy Tests behavior from the user's perspective Tests component internals and implementation Test Focus Interaction, rendering, and accessibility Shallow rendering, component state, and props Testing Approach Encourages testing DOM behavior and accessibility Encourages testing component internals and methods Integration with React Built with React’s rendering behavior in mind Requires enzyme adapter for different React versions Recommendation More modern, encourages better testing practices Still used, but React Testing Library is more popular Key difference: React Testing Library focuses on testing the output of your components (UI behavior), similar to how a user interacts with the app. Enzyme focuses more on testing the internal implementation (component state, methods).

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: ccessibility Shallow rendering, component state, and props Testing Approach Encourages testing DOM behavior and accessibility Encourages testing component internals and methods Integration with React Built with React’s rendering behavior in mind Requires enzyme adapter for different React versions Recommendation More modern,… encourages better testing…… practices Still used, but React Testing Library is more popular…

Explain a bit more

Key difference: React Testing Library focuses on testing the output of your components (UI behavior), similar to how a user interacts with the app. Enzyme focuses more on testing the internal implementation (component state, methods).

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.