Interview Q&A

Short answer: import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); } React.lazy enables dynamic imports for code splitting. Suspense lets you specify a loading state while waiting for the component to load.

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: import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </Switch> </Router> ); }

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: function counterReducer(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1; default: return state; } }

Example code

function counterReducer(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1; default: return state;
}
}

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 components or custom hooks) React enforces these rules with a linter: eslint-plugin-react-hooks.

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: JSX – JavaScript + XML Components – Reusable and composable Virtual DOM – Efficient DOM updates Unidirectional data flow – One-way data binding Lifecycle methods (in class components) Hooks (in functional components)

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: sure to account for the most recent state.

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: These libraries help solve problems like global namespace conflicts and style collisions in large React applications, allowing for scoped, dynamic styles.

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: Scoped CSS that helps avoid name collisions. import styles from './App.module.css'; function App() { return <div className={styles.container}>Hello, world!</div>;

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: making sure your code follows a consistent style.

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: Example: import { render, screen, fireEvent } from '@testing-library/react'; import MyComponent from './MyComponent'; test('renders the component and interacts', () => { render(<MyComponent />); const button = screen.getByText('Click me'); fireEvent.click(button); expect(screen.getByText('Clicked!')).toBeInTheDocument(); });

Example code

import { render, screen, fireEvent } from '@testing-library/react'; import MyComponent from './MyComponent'; test('renders the component and interacts', () => { render(<MyComponent />); const button = screen.getByText('Click me'); fireEvent.click(button); expect(screen.getByText('Clicked!')).toBeInTheDocument(); });

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: If using hooks, make sure you are providing the correct dependencies to useEffect and useMemo, and avoid unnecessary recalculations.

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: the items that are visible in the viewport. Example of list optimization with key: const List = ({ items }) => { return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); };

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: 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: import { createStore } from 'redux'; const store = createStore(counterReducer);

Example code

import { createStore } from 'redux'; const store = createStore(counterReducer);

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: 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: manipulating the DOM when it’s unnecessary) can lead to performance issues.

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: Example: function App() { const isAuthenticated = localStorage.getItem('authToken'); return isAuthenticated ? <Dashboard /> : <Login />; } For handling OAuth or third-party login (e.g., with Google or Facebook), you might use a library like Firebase or Auth0.

Example code

Example: function App() { const isAuthenticated = localStorage.getItem('authToken');
return isAuthenticated ? <Dashboard /> : <Login />;
}
For handling OAuth or third-party login (e.g., with Google or Facebook), you might use a library like Firebase or Auth0.

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 performance monitoring tools like why-did-you-render to detect unnecessary re-renders in functional components. Example: npm install @welldone-software/why-did-you-render Testing React Components

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: optimization can degrade performance, especially if each item is re-rendered every time the parent changes.

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 React Angular Vue Type Library (UI focused) Framework (full-featured) Framework (lightweight) DOM Handling Virtual DOM Real DOM Virtual DOM Data Binding One-way Two-way Both supported Learning Curve Medium Steep Easy

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: engines. Example (with react-helmet): import { Helmet } from 'react-helmet'; function MyPage() { return ( <div> <Helmet> <title>My SEO Optimized Page</title> <meta name="description" content="Description of my page for SEO" /> </Helmet> <h1>Welcome to My SEO Page</h1> </div> ); }

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: or effects that trigger multiple renders. ⚙ Miscellaneous React Concepts

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: CSS-in-JS allows writing actual CSS inside JavaScript files. Supports dynamic styling and theming. import styled from 'styled-components'; const Button = styled.button` background: ${(props) => (props.primary ? 'blue' : 'gray')}; color: white; `; function App() { return <Button primary={true}>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: Many of these tools are integrated automatically when you use CRA or Next.js, but they can be configured or customized in more advanced setups.

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.