Interview Q&A

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