Interview Q&A

Short answer: A Higher-Order Component (HOC) is a function that takes a component and returns a new component with additional props or behavior.

Explain a bit more

Purpose: HOCs are used for code reuse, logic abstraction, and enhancing components with common functionality (e.g., authentication, data fetching, etc.). How it works: HOCs are like decorators that wrap a component and add extra logic before rendering the component. Example: function withLoading(Component) { return function WithLoading(props) {

Example code

if (props.isLoading) {
return <div>Loading...</div>;
}
return <Component {...props} />; }; }
const MyComponent = ({ data }) => <div>{data}</div>;
const MyComponentWithLoading = withLoading(MyComponent); In this example, withLoading is a higher-order component that adds loading state to MyComponent.

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 render props pattern is a technique for sharing code between components using a prop whose value is a function (a “render prop”). This function can return JSX or other values, allowing more dynamic behavior and custom rendering. Purpose: It enables a component to expose its logic while letting its consumers define how the output is rendered.

Example code

class MouseTracker extends React.Component { state = { x: 0, y: 0 }; handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY, }); }; render() { return ( <div onMouseMove={this.handleMouseMove}> {this.props.render(this.state)} </div> ); } } const App = () => ( <MouseTracker render={({ x, y }) => ( <h1>The mouse position is ({x}, {y})</h1> )} /> ); In this example, MouseTracker uses the render prop pattern to allow the parent component to decide how to render the mouse position data.

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: llowing more dynamic behavior and custom rendering.

Explain a bit more

Purpose: It enables a component to expose its logic while letting its consumers define how the output is rendered.

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: A Portal provides a way to render children into a different part of the DOM outside of the parent component’s DOM hierarchy.

Explain a bit more

This is particularly useful for scenarios like modals, tooltips, or popups that need to visually break out of their parent component but still maintain their React component state. When to use: When you need to render content outside the DOM hierarchy of a parent, without losing the React component context (e.g., for modals, overlays, etc.).

Example code

import React from 'react'; import ReactDOM from 'react-dom'; function Modal() { return ReactDOM.createPortal( <div className="modal">This is a modal</div>, document.getElementById('modal-root') // Renders outside the normal DOM tree ); } export default Modal; In this case, the modal is rendered inside a specific part of the DOM (modal-root) even though it is a child of the Modal component.

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: Reconciliation is the process by which React updates the DOM efficiently when a component's state or props change.

Explain a bit more

React uses a virtual DOM to compare the new virtual DOM tree with the previous one and determines the minimal set of changes required to update the actual DOM. Key Concepts: Virtual DOM: A lightweight representation of the real DOM. Diffing algorithm: React’s algorithm compares the old and new virtual DOMs to find the differences (diffs) and apply the smallest set of changes. Reconciliation Flow:

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