Interview Q&A

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.

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: The Virtual DOM is a lightweight in-memory representation of the real DOM. React updates the Virtual DOM first and compares it with the previous version, only applying the necessary changes to the real DOM. ✅ Benefit: Improves performance by reducing real DOM operations.

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.