Interview Q&A

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

Short answer: ✅ Create context: const ThemeContext = React.createContext(); ✅ Provide context: <ThemeContext.Provider value="dark"> <App /> </ThemeContext.Provider> ✅ Consume context: const theme = useContext(ThemeContext);

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: Give examples. Middleware are functions that sit between dispatching an action and reaching the reducer. ✅ Common uses: Handle async operations (API calls) Logging Error handling ✅ Examples: redux-thunk redux-saga redux-logger ✅ Example (redux-logger): const logger = store => next => action => { console.log('dispatching', action); return next(action); };

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: Middleware are functions that sit between dispatching an action and reaching the reducer.

Explain a bit more

✅ Common uses: Handle async operations (API calls) Logging Error handling ✅ Examples: redux-thunk redux-saga redux-logger ✅ Example (redux-logger): const logger = store => next => action => { console.log('dispatching', action); return next(action); }; Middleware are functions that sit between dispatching an action and reaching the reducer.

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 Thunks (redux-thunk) Sagas (redux-saga) Concept Functions returned from actions Generator-based side effects Complexity Simple Advanced Syntax Imperative (JS functions) Declarative (generators/yield) Use case Basic async logic Complex flows, retries, delays ✅ Thunk

Example code

const fetchUser = () => (dispatch) => { fetch("/api/user") .then(res => res.json()) .then(data => dispatch({ type: "SET_USER", payload: data })); };

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: ctions Generator-based side effects Complexity Simple Advanced Syntax Imperative (JS functions) Declarative (generators/yield) Use case Basic async logic Complex flows, retries, delays ✅ Thunk const fetchUser = () => (dispatch) => { fetch("/api/user") .then(res => res.json()) .then(data => dispatch({ type: "SET_USER", payload: data… })); }; ctions… Generator-based side effects Complexity Simple Advanced Syntax…

Explain a bit more

Imperative (JS functions) Declarative (generators/yield) Use case Basic async logic Complex flows, retries, delays ✅ Thunk

Example code

const fetchUser = () => (dispatch) => { fetch("/api/user") .then(res => res.json()) .then(data => dispatch({ type: "SET_USER", payload: data })); }; ctions Generator-based side effects Complexity Simple Advanced Syntax Imperative (JS functions) Declarative (generators/yield) Use case Basic async logic Complex flows, retries, delays ✅ Thunk example: const fetchUser = () => (dispatch) => { fetch("/api/user") .then(res => res.json()) .then(data => dispatch({ type: "SET_USER", payload: data… })); }; ctions Generator-based side effects Complexity Simple Advanced Syntax Imperative (JS functions) Declarative (generators/yield) Use case Basic async logic Complex flows, retries, delays ✅ Thunk example: const fetchUser = () => (dispatch) => { fetch("/api/user") .then(res => res.json()) .then(data => dispatch({ type: "SET_USER", payload: data })); };

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 Toolkit (RTK) is the official, recommended way to write Redux logic. ✅ RTK Benefits: Less boilerplate Built-in createSlice, createAsyncThunk, configureStore Integrated DevTools Handles immutability under the hood ✅

Example code

const counterSlice = createSlice({ name: 'counter', initialState: 0, reducers: { increment: (state) => state + 1, }, }); export const { increment } = counterSlice.actions;

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: Scenario Use Simple data (theme, locale) ✅ Context API Complex global state ✅ Redux Needs middleware or DevTools ✅ Redux Only few components need data ✅ Context Large team/multiple features ✅ Redux Toolkit 🎯 Rule of thumb: Use Context for simple static data, and Redux for dynamic or large-scale app 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: ✅ Using middleware, such as: redux-thunk – lets you dispatch functions redux-saga – handles complex side effects via generators redux-observable – uses RxJS ✅ Example with thunk: const fetchData = () => async (dispatch) => { const response = await fetch('/data');

Example code

const data = await response.json(); dispatch({ type: 'SET_DATA', payload: data }); };

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: Selectors are functions that read and return data from the store, often with memoization.

Explain a bit more

✅ Purpose: Centralize access to state shape Avoid duplication Optimize performance ✅ Basic selector: const selectUser = (state) => state.user; ✅ With reselect: import { createSelector } from 'reselect'; const selectCartItems = (state) => state.cart.items; const selectTotalPrice = createSelector( [selectCartItems], (items) => items.reduce((sum, item) => sum + item.price, 0) ); React Routing

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: You can implement routing in React using React Router. Here's how:

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: To create nested routes, place a <Route /> inside another route's component.

Explain a bit more

Example: import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; function App() { return ( <Router> <div> <nav> <Link to="/about/team">Team</Link> <Link to="/about/company">Company</Link> </nav> <Switch> <Route exact path="/about" component={About} /> <Route path="/about/team" component={Team} /> <Route path="/about/company" component={Company} /> </Switch> </div> </Router> ); } function About() { return <h2>About Page</h2>;

Example code

} function Team() { return <h3>Team Page</h3>;
} function Company() { return <h3>Company Page</h3>;
}

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: You can pass URL parameters (also called dynamic routes) using : in the route path. Example: import { BrowserRouter as Router, Route, Switch, useParams } from 'react-router-dom'; function App() { return ( <Router> <Switch> <Route path="/user/:id" component={User} /> </Switch> </Router> ); } function User() { const { id } = useParams(); // Access the dynamic parameter

Example code

return <h1>User ID: {id}</h1>;
} In the example above, visiting /user/1 will display User ID: 1.

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: Protected routes are used to restrict access to certain routes based on some condition (e.g., user authentication). You can create a wrapper component that checks the condition and either redirects or renders the requested route.

Example code

import { Redirect, Route } from 'react-router-dom'; function ProtectedRoute({ component: Component, ...rest }) { const isAuthenticated = false; // Replace with your auth logic return ( <Route {...rest} render={(props) => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to="/login" /> } /> ); } function App() { return ( <Router> <Switch> <Route path="/login" component={Login} /> <ProtectedRoute path="/dashboard" component={Dashboard} /> </Switch> </Router> ); } In this example, if the user is not authenticated, they will be redirected to the login page when trying to access the /dashboard route.

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: And either redirects or renders the requested route. import { Redirect, Route } from 'react-router-dom'; function ProtectedRoute({ component: Component, ...rest }) { const isAuthenticated = false; // Replace with your auth logic return ( <Route {...rest} render={(props) => isAuthenticated ? And either redirects or renders the requested route.

Example code

import { Redirect, Route } from 'react-router-dom'; function ProtectedRoute({ component: Component, ...rest }) { const isAuthenticated = false; // Replace with your auth logic return ( <Route {...rest} render={(props) => isAuthenticated ? nd either redirects or renders the requested route. Example: import { Redirect, Route } from 'react-router-dom'; function ProtectedRoute({ component: Component, ...rest }) { const isAuthenticated = false; // Replace with your auth logic return ( <Route {...rest} render={(props) => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to="/login" /> } /> ); } function App() { return ( <Router> <Switch> <Route path="/login" component={Login} /> <ProtectedRoute path="/dashboard" component={Dashboard} /> </Switch> </Router> ); } In this example, if the user is not authenticated, they will be redirected to the login page when trying to access the /dashboard route. nd either redirects or renders the requested route. Example: import { Redirect, Route } from 'react-router-dom'; function ProtectedRoute({ component: Component, ...rest }) { const isAuthenticated = false; // Replace with your auth logic return ( <Route {...rest} render={(props) => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to="/login" /> } /> ); } function App() { return ( <Router> <Switch> <Route path="/login" component={Login} /> <ProtectedRoute path="/dashboard" component={Dashboard} /> </Switch> </Router> ); } In this example, if the user is not authenticated, they will be redirected to the login page when trying to access the /dashboard route.

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: You can navigate programmatically using the useHistory hook (React Router v5) or useNavigate hook (React Router v6). For React Router v5 (useHistory): import { useHistory } from 'react-router-dom'; function MyComponent() { const history = useHistory(); const goToHome = () => { history.push('/'); }; return <button onClick={goToHome}>Go to Home</button>;

Example code

}
For React Router v6 (useNavigate): import { useNavigate } from 'react-router-dom'; function MyComponent() { const navigate = useNavigate(); const goToHome = () => { navigate('/'); }; return <button onClick={goToHome}>Go to Home</button>;
} React Performance Optimization

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.