Question 1

What is the main difference between let and var?

Accepted Answer

let declares a block-scoped variable, meaning it only exists within the block where it's defined (between braces). var has function scope, which can cause unexpected bugs as the variable is accessible throughout the entire function. Using let by default prevents hoisting issues and variable leaks in loops or conditionals.

Question 2

What is JSX in React?

Accepted Answer

JSX is a JavaScript syntax extension that allows writing markup resembling HTML directly in JavaScript code. It is transformed into React.createElement function calls by Babel during compilation. Using JSX makes code more readable and enables error detection at compile time through typing, while combining JavaScript's power with familiar syntax.

Question 3

What is the useState hook in React?

Accepted Answer

useState is a React hook that manages local state in a functional component. Unlike regular JavaScript variables that are reset on every render, useState preserves the state value between successive renders. This hook returns an array containing the current state value and a function to update it, automatically triggering a component re-render when the state changes.

Question 4

What is mounting in a React component?

Accepted Answer

Mounting is the phase where a component is created and inserted into the DOM for the first time. During this phase, React initializes state, executes construction code and performs the first render. This is the ideal moment to trigger API calls or initialize subscriptions via useEffect.

Question 5

What is a CSS Module in React?

Accepted Answer

CSS Modules automatically generate unique class names by adding a hash to the class name, which prevents style conflicts between components. Each CSS Module file has its own local scope, unlike traditional global stylesheets. This approach allows writing modular styles without the risk of accidental overrides in other application components.

Question 6

What is the App Router in Next.js?

Accepted Answer

The App Router is the new routing system in Next.js 13+ based on the app/ directory. It replaces the Pages Router and introduces Server Components by default, shared layouts, and a more flexible routing model with file conventions like page.tsx, layout.tsx and loading.tsx.

Question 7

What is the correct syntax to type React component props?

Accepted Answer

The Props interface followed by typing the function with Props as parameter is the recommended standard syntax. This approach provides excellent type inference and allows easy reuse of the Props type elsewhere in the code. It is more explicit than React.FC and provides better control over children typing.

Question 8

What is the primary role of React.memo?

Accepted Answer

React.memo is a Higher-Order Component that memoizes a component's render output. It performs a shallow comparison of props and skips re-rendering if props haven't changed. Particularly useful for optimizing expensive child components that frequently receive the same props.

Question 9

What is an Error Boundary in React?

Accepted Answer

An Error Boundary is a React class component that catches JavaScript errors occurring in its child component tree, displays a fallback UI, and prevents the entire application from crashing. It uses componentDidCatch() and getDerivedStateFromError() methods to intercept and handle rendering errors.

Question 10

What is the Compound Components pattern?

Accepted Answer

The Compound Components pattern allows creating components that share implicit state via React Context, without passing props explicitly. This pattern is used in libraries like Radix UI and Headless UI to provide a flexible and composable API. Child components can access shared state automatically, enabling structure customization without losing common logic.

React / Next.js interview questions

Ready for your React / Next.js interview?

Explore all React / Next.js topics

JavaScript Essentials

React Fundamentals

React Hooks

Component Lifecycle

React Router

State Management with Context

Forms & Controlled Components

Data Fetching & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Fundamentals

TypeScript with React

Next.js Data Fetching

Next.js Server Actions

Next.js Routing & Navigation

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

React Testing

Zustand State Management

React Performance Optimization

Error Boundaries & Error Handling

Advanced React Patterns

Next.js Advanced Features

Next.js Deployment & Production

Architecture & Design Patterns

React Server Components

Next.js Internationalization

React Security & Best Practices

Master React / Next.js for your next interview