Interview Q&A

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

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