Interview Q&A

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.

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.