Interview Q&A

Short answer: React Fiber is a complete rewrite of React's reconciliation algorithm.

Explain a bit more

It is designed to improve the rendering performance and make React more responsive and capable of handling asynchronous rendering. Key Features: Incremental Rendering: React Fiber allows rendering to be split into chunks, so it can pause and resume work, improving responsiveness. Prioritization: React can assign different priority levels to updates (e.g., user input vs. background updates). Async Rendering: Enables non-blocking UI updates, making React apps feel more responsive.

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: An Error Boundary is a React component that catches JavaScript errors in its child components, logs those errors, and displays a fallback UI. This prevents the entire app from crashing when an error occurs in a part of the component tree. Usage:

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: Controlled side effects refer to operations in React that happen as a result of state or props changes but are carefully managed, typically using React Hooks like useEffect.

Explain a bit more

Examples: Fetching data, subscribing to an event, manually updating the DOM, etc. Controlled: The side effect is triggered in response to specific state changes and cleaned up appropriately. Example of controlled side effect with useEffect: import React, { useState, useEffect } from 'react'; function MyComponent() { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { const result = await fetch('/api/data'); const json = await result.json(); setData(json); }; fetchData(); }, []); // Only runs once when the component is mounted return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>; } Here, useEffect handles the side effect of fetching data when the component mounts, and the state is updated with the fetched 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: Server-Side Rendering (SSR) allows React components to be rendered on the server and the resulting HTML to be sent to the client. This improves the initial loading performance and helps with SEO. SSR Process:

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: And helps with SEO. SSR Process:

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: Static Site Generation (SSG) is a technique where HTML pages are generated at build time. Unlike SSR, SSG pre-renders all pages during the build process, which results in faster load times. Example with Next.js (SSG): import React from 'react'; export async function getStaticProps() { const data = await fetchDataFromAPI();

Example code

return { props: { data } };
} function Page({ data }) { return <div>{data}</div>;
} export default Page; Here, getStaticProps is a Next.js function that fetches data during build time. The page is pre-rendered and served as static HTML.

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: Hydration refers to the process where React takes over the static HTML rendered by the server and attaches event listeners and restores interactivity.

Explain a bit more

This happens once the JavaScript bundle is loaded on the client. SSR: Server renders the HTML. Hydration: React "hydrates" the server-rendered HTML to make it interactive. This process allows the page to load quickly (thanks to the server-rendered HTML) and then become fully interactive once React takes over. React Ecosystem & Tools

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: Next.js is a React framework that enables server-side rendering (SSR), static site generation (SSG), API routes, and more out-of-the-box.

Explain a bit more

It simplifies React app development by providing a set of conventions and features that improve performance, SEO, and developer experience. Why use Next.js? Server-Side Rendering (SSR): Automatically generates HTML on the server for better SEO and faster initial load. Static Site Generation (SSG): Pre-renders pages at build time, improving performance. Automatic Code Splitting: Only loads the necessary JavaScript for the current page. File-Based Routing: Routing is based on the file system, making navigation easier. API Routes: Allows you to build API endpoints directly inside your Next.js app. Image Optimization: Automatically optimizes images for better performance. Example: npx create-next-app my-next-app In this setup, the app can be SSR or SSG-enabled, providing better performance and SEO out of the box.

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: And developer experience. Why use Next.js? Server-Side Rendering (SSR): Automatically generates HTML on the server for better SEO and faster initial load. Static Site Generation (SSG): Pre-renders pages at build time, improving performance. Automatic Code Splitting: Only loads the necessary JavaScript for the current page. File-Based Routing:… Routing is……… based on the file system, making navigation easier.

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 React App (CRA) is a boilerplate tool to set up a modern React app without configuring build tools like Webpack, Babel, etc.

Explain a bit more

It’s designed to help you focus on writing code instead of spending time configuring tools. Features: Zero Configuration: It sets up Webpack, Babel, ESLint, and other essential tools. Development Server: Provides a development server with hot reloading. Production Build: Automates production optimizations like minification, asset optimization, etc. How to Use CRA: npx create-react-app my-app cd my-app npm start With CRA, you don’t have to manually configure Webpack or Babel. It gives you everything you need to start building React applications right away.

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: Some common build tools for React are:

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: There are several ways to handle CSS in React applications, and each comes with its own pros and cons.

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: CSS-in-JS libraries allow you to write CSS styles directly inside JavaScript files, enabling better component encapsulation and dynamic styling. Popular libraries include:

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: PropTypes is a runtime type-checking library used to validate the types of props passed to React components. It helps catch errors during development by ensuring that props match the expected data types.

Example code

import PropTypes from 'prop-types'; function MyComponent({ name, age }) { return <div>{name} is {age} years old</div>; } MyComponent.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired, }; In this example, PropTypes.string.isRequired ensures that the name prop is a string and is required. If it’s not passed or is of the wrong type, React will display a warning in the console.

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: ge: PropTypes.number.isRequired, }; In this example, PropTypes.string.isRequired ensures that the name prop is a string nd is required. If it’s not passed or is of the wrong type, React will display a warning in the console.

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: Internationalization (i18n) in React can be handled using libraries that help manage translations, time formats, and currency formatting. The most common libraries are:

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: Authentication in React apps is typically done using tokens (JWTs) and local storage to persist user sessions. Common Steps:

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 Native is a framework for building native mobile applications (iOS and Android) using React and JavaScript.

Explain a bit more

While React is for web development, React Native allows you to create mobile apps with a similar paradigm but using native components (e.g., <View> instead of <div>). Key Differences: React: Builds for the web, rendering HTML and managing DOM. React Native: Builds for mobile, using native components and APIs for interaction with mobile devices (camera, geolocation, etc.). Example in React Native: import { Text, View } from 'react-native'; function App() { return ( <View> <Text>Hello, React Native!</Text> </View> ); } In React Native, the components map to native UI elements, such as <Text> for text, <View> for containers, and <Button> for buttons.

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: Managing forms in React can be tedious, but libraries like Formik and React Hook Form simplify form handling by managing state, validation, and submission.

Explain a bit more

Formik: Provides an easy way to manage form state, validation, and submission. Supports validation using schemas (e.g., Yup). Example with Formik: import { Formik, Field, Form } from 'formik'; function MyForm() { return ( <Formik initialValues={{ name: '', email: '' }} onSubmit={(values) => console.log(values)} <Form> <Field name="name" /> <Field name="email" /> <button type="submit">Submit</button> </Form> </Formik> ); } React Hook Form: A lightweight alternative to Formik that uses React hooks to handle form state. It’s more performance-oriented due to less re-rendering. Example with React Hook Form: import { useForm } from 'react-hook-form'; function MyForm() { const { register, handleSubmit } = useForm();

Example code

const onSubmit = (data) => console.log(data);
return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('name')} /> <input {...register('email')} /> <button type="submit">Submit</button> </form> ); } Both libraries significantly reduce boilerplate and handle common issues like validation and form state management. Hooks Deep Dive

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: Side effects are operations that occur outside of the React component’s scope, such as: Fetching data from an API Setting up subscriptions Manually modifying the DOM In React, side effects are handled using the useEffect hook. Basic

Example code

import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // Only run when `count` changes return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } useEffect allows you to perform side effects in function components. The second argument, the dependency array, specifies when to run the effect. If the array is empty, the effect runs only once after the initial render (like componentDidMount).

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: Infinite loops in useEffect occur when the effect continually triggers itself because the dependency array includes values that change as a result of the effect itself.

Explain a bit more

Common cause: If a value inside useEffect is being updated, and it's in the dependency array, React will keep rerunning the effect. How to avoid: Use an empty dependency array ([]) if the effect should run only once. Be selective with dependencies to avoid unnecessary re-renders.

Example code

useEffect(() => { // Perform API call or other side effects fetchData(); }, []); // No dependencies, effect runs only once If the dependency list has state values or props that change inside the effect, React will rerun it every time those values change. Be mindful of that!

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: Custom hooks are a powerful way to share logic between components in a reusable and encapsulated way.

Explain a bit more

A custom hook is simply a JavaScript function that uses React hooks (like useState, useEffect, etc.). Example of a custom hook: // useLocalStorage.js import { useState } from 'react'; function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { const item = localStorage.getItem(key);

Example code

return item ? JSON.parse(item) : initialValue; }); const setValue = (value) => { setStoredValue(value); localStorage.setItem(key, JSON.stringify(value)); }; return [storedValue, setValue];
} export default useLocalStorage; You can then use this custom hook in any component: import useLocalStorage from './useLocalStorage'; function App() { const [name, setName] = useLocalStorage('name', 'John');
return ( <div> <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" /> </div> ); } Custom hooks allow for reusable logic (like managing form state, fetching data, etc.) and encapsulation of behavior in a way that doesn't require repeated code.

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: In class components, the lifecycle is managed using methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

Explain a bit more

With hooks, these are replaced with useEffect, which can mimic any lifecycle behavior. Lifecycle Mapping: componentDidMount: Use useEffect with an empty dependency array ([]). componentDidUpdate: Use useEffect with dependencies. componentWillUnmount: Return a cleanup function inside useEffect.

Example code

useEffect(() => { // Equivalent to componentDidMount and componentDidUpdate console.log("Component mounted or updated"); return () => { // Equivalent to componentWillUnmount console.log("Cleanup before component unmount"); }; }, [dependencies]); // Will run on mount and update based on dependencies

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: React keys help React identify which items in a list are changed, added, or removed. Keys provide a stable identity for each element, allowing React to optimize re-renders. Important: Keys should be unique for each sibling component. Why important: Without keys, React has to re-render all list items when the list changes, which can be inefficient.

Example code

const items = ['apple', 'banana', 'cherry']; return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); Tip: It’s better to use a unique identifier (e.g., id) as a key instead of using index if the list can change order or content dynamically.

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: Handling errors in React is done using Error Boundaries.

Explain a bit more

They are React components that catch JavaScript errors anywhere in their child component tree and log those errors or display a fallback UI. Example of Error Boundary: class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; // Update state to trigger fallback UI } componentDidCatch(error, info) { console.error(error, info); } render() { if (this.state.hasError) {

Example code

return <h1>Something went wrong!</h1>;
}
return this.props.children;
}
} You wrap your components inside ErrorBoundary to catch and handle errors gracefully.

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.