Interview Q&A

Short answer: React is a JavaScript library for building user interfaces, mainly for single-page applications. It helps developers create reusable UI components, manage state efficiently, and update the UI in a performant way. ✅ Why use React? Easy to break UIs into components Efficient updates with Virtual DOM Rich ecosystem (React Router, Redux, etc.) Backed by Facebook and a large community

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 is a JavaScript library for building user interfaces, mainly for single-page applications. It helps developers create reusable UI components, manage state efficiently, and update the UI in a performant way. ✅ Why use React? Easy to break UIs into components Efficient updates with Virtual DOM Rich ecosystem (React Router, Redux, etc.) Backed by Facebook and a large community

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: Can browsers read JSX directly? JSX stands for JavaScript XML. It lets you write HTML-like syntax in JavaScript. const element = <h1>Hello, world!</h1>; 🚫 No, browsers cannot read JSX directly. JSX needs to be transpiled (e.g., using Babel) into regular JavaScript.

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: function Home() { return <h1>Home Page</h1>; } function About() { return <h1>About Page</h1>; }

Example code

function Home() { return <h1>Home Page</h1>;
} function About() { return <h1>About Page</h1>;
}

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: JSX stands for JavaScript XML. It lets you write HTML-like syntax in JavaScript. const element = <h1>Hello, world!</h1>; 🚫 No, browsers cannot read JSX directly. JSX needs to be transpiled (e.g., using Babel) into regular JavaScript. JSX stands for JavaScript XML. It lets you write HTML-like syntax in JavaScript. const element = <h1>Hello, world!</h1>; 🚫…… No, browsers cannot read JSX directly. JSX needs to be…

Explain a bit more

transpiled (e.g., using Babel) into regular JavaScript. JSX stands for JavaScript XML. It lets you write HTML-like syntax in JavaScript. const element = <h1>Hello, world!</h1>; 🚫 No, browsers cannot read JSX directly. JSX needs to be transpiled (e.g., using Babel) into regular JavaScript. JSX stands for JavaScript XML. It lets you write HTML-like syntax in JavaScript. const element = <h1>Hello, world!</h1>; 🚫 No, browsers cannot read JSX directly. JSX needs to be transpiled (e.g., using Babel) into regular JavaScript.

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: 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.