Interview Q&A

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.

Short answer: Custom hooks are just functions that use hooks. ✅ Example: import { useState, useEffect } from 'react'; function useWindowWidth() { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return width;

Example code

} // Usage function Component() { const width = useWindowWidth();
return <p>Window width: {width}</p>;
}

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: useMemo memoizes a computed value to avoid recalculating unless dependencies change. ✅ Syntax: const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ✅ Use case: Avoid recalculating heavy logic on every render. const filteredList = useMemo(() => { return items.filter(item => item.includes(searchTerm)); }, [items, searchTerm]);

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: void recalculating heavy logic on every render.

Explain a bit more

const filteredList = useMemo(() => { return items.filter(item => item.includes(searchTerm)); }, [items, searchTerm]); void recalculating heavy logic on every render. const filteredList = useMemo(() => { return items.filter(item => item.includes(searchTerm)); }, [items, searchTerm]); void recalculating heavy logic on every render. const filteredList = useMemo(() => { return items.filter(item => item.includes(searchTerm)); }, [items, searchTerm]); void recalculating heavy logic on every render. const filteredList = useMemo(() => { return items.filter(item => item.includes(searchTerm)); }, [items, searchTerm]);

Real-world example (ShopNest)

Heavy product grids memoize row components so typing in the search box does not re-render every image card unnecessarily.

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: Class Component Pitfall Hook-Based Solution this binding issues ✅ No this in hooks Boilerplate code ✅ More concise with hooks Sharing logic ✅ Custom hooks enable reuse Complex lifecycle logic ✅ useEffect unifies side effects ✅ Hooks lead to simpler, more readable, and reusable code. React State Management – Redux, Context API, and More

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.