Interview Q&A

Short answer: Components are the building blocks of a React application. Each component is an isolated, reusable piece of the UI. ✅ Example: function Welcome(props) { return <h1>Hello, {props.name}</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: Feature Class Component Functional Component Syntax ES6 Class Function State this.state useState hook Lifecycle methods Yes Use useEffect, etc. Code size More verbose Cleaner and shorter ✅ Example: Class:

Example code

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>;
}
} Functional: function Welcome(props) { return <h1>Hello, {props.name}</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: 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: React’s reconciliation algorithm compares the new Virtual DOM with the old one using a diffing algorithm. It: Identifies what changed (nodes, attributes, etc.) Applies minimum changes to the actual DOM Uses keys to track list item changes efficiently

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: Utility-first CSS framework that uses predefined classes for layout and styling. Great for rapid development.

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: Props (short for "properties") are read-only data passed from a parent component to a child. ✅

Example code

function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } <Greeting name="Alice" />

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: 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: Functional component: Use setState from useState. Class component: Use this.setState(). ✅ Example: const [name, setName] = useState("John"); setName("Doe");

Example code

Functional component: Use setState from useState. Class component: Use this.setState(). ✅ Example: const [name, setName] = useState("John"); setName("Doe");

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: ✅ Using ternary: {isLoggedIn ? <Logout /> : <Login />} ✅ Using short-circuit: {isVisible && <Sidebar />}

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: Fragments let you return multiple elements without adding an extra DOM node. ✅ Example: <> <h1>Title</h1> <p>Description</p> </> 🔍 Equivalent to <React.Fragment> but shorter.

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 uses camelCase syntax and passes functions directly. ✅

Example code

<button onClick={handleClick}>Click Me</button>

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 wraps native browser events in a SyntheticEvent object for cross-browser compatibility. ✅

Example code

function handleClick(e) { console.log(e); // SyntheticEvent }

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 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: Use controlled components and onChange handlers. ✅

Example code

function Form() { const [name, setName] = useState(""); const handleSubmit = e => { e.preventDefault(); console.log(name); }; return ( <form onSubmit={handleSubmit}> <input value={name} onChange={e => setName(e.target.value)} /> <button type="submit">Submit</button> </form> ); }

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: 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: Hooks are functions that let you "hook into" React state and lifecycle features in functional components. Before hooks, only class components could use state and lifecycle methods. ✅ Hooks introduced in React 16.8.

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: useState lets you add state to functional components. ✅ Syntax: const [state, setState] = useState(initialValue); ✅ Example: import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0);

Example code

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

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: 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: ✅ componentDidMount: useEffect(() => { console.log("Component mounted"); }, []); // Empty array = run once on mount ✅ componentWillUnmount: useEffect(() => { const id = setInterval(() => console.log("tick"), 1000);

Example code

return () => { clearInterval(id); // Cleanup console.log("Component unmounted"); }; }, []);

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: 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: useRef creates a mutable reference that persists across renders. ✅ Syntax: const ref = useRef(initialValue); ✅ Use cases: Accessing DOM elements Persisting values without causing re-renders Storing previous values ✅ Example (DOM access): const inputRef = useRef(); function focusInput() { inputRef.current.focus(); }

Example code

return <input ref={inputRef} />; ✅ Example (storing previous state): const prevCount = useRef(); useEffect(() => { prevCount.current = count; });

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: useContext lets you consume a context value without using a Context.Consumer. ✅ Example: const ThemeContext = React.createContext("light"); function App() { return ( <ThemeContext.Provider value="dark"> <Toolbar /> </ThemeContext.Provider> ); } function Toolbar() { const theme = useContext(ThemeContext);

Example code

return <div className={`theme-${theme}`}>Theme is {theme}</div>;
}

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.