Beginner React Interview Questions

React is an open-source JavaScript library for building user interfaces, maintained by Meta, using a component-based architecture.

JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code inside JavaScript files.

A component is a reusable, independent piece of UI that can accept inputs and return React elements describing what should appear on screen.

Functional components are plain JavaScript functions that return JSX, while class components extend React.Component and use lifecycle methods. Functional components are now preferred with Hooks.

Props (properties) are read-only inputs passed from a parent component to a child component to share data.

State is a built-in object that stores dynamic data within a component and triggers a re-render when updated.

The Virtual DOM is a lightweight in-memory representation of the real DOM that React uses to calculate and apply minimal updates efficiently.

Props are passed from parent to child and are immutable, while state is managed within the component and can be updated.

useState is a React Hook that allows functional components to declare and manage local state variables.

useEffect is a React Hook used to perform side effects such as data fetching, subscriptions, or DOM manipulation after rendering.

React events are synthetic wrappers around native browser events, providing a consistent cross-browser interface for handling user interactions.

Conditional rendering displays different UI elements based on a condition using JavaScript operators like if, ternary, or logical AND.

Lists render arrays of elements using map(), and keys are unique identifiers that help React efficiently update and re-render list items.

A React Fragment (<></>) lets you group multiple elements without adding an extra DOM node.

One-way data binding means data flows in a single direction from parent to child via props, making the application easier to debug.

The React root is the entry point where the React component tree is mounted into the actual DOM, typically using ReactDOM.createRoot().

PropTypes is a runtime type-checking library that validates the types of props passed to a component during development.

Default props define fallback values for props when no value is provided by the parent component.

The key prop helps React identify which items in a list have changed, been added, or removed for efficient DOM updates.

create-react-app is a CLI tool that sets up a new React project with a pre-configured build environment and development server.

Hooks are functions introduced in React 16.8 that let functional components use state, lifecycle features, and other React capabilities.

useContext is a Hook that allows components to consume values from a React Context without prop drilling.

useRef returns a mutable ref object that persists across renders, commonly used to access DOM elements or store mutable values without causing re-renders.

useReducer is a Hook for managing complex state logic using a reducer function, similar to Redux but built into React.

useMemo memoizes the result of an expensive computation and recalculates it only when its dependencies change.

useCallback memoizes a function reference so it is not recreated on every render, useful when passing callbacks to optimized child components.

The Context API provides a way to pass data through the component tree without manually passing props at every level.

Prop drilling is the process of passing data through multiple nested components that do not need it, just to reach a deeply nested child.

React Router is a library for declarative client-side routing in React applications, enabling navigation between views without full page reloads.

A HOC is a function that takes a component and returns a new enhanced component, used to reuse component logic.

Controlled components have their form data managed by React state, making the component the single source of truth for input values.

Uncontrolled components manage their own form data internally via the DOM, accessed using refs instead of React state.

Reconciliation is the process React uses to compare the previous and new Virtual DOM trees and apply only the necessary changes to the real DOM.

Lifting state up means moving shared state to the closest common ancestor so multiple child components can access and update it.

React.memo is a higher-order component that prevents a functional component from re-rendering if its props have not changed.

Lazy loading defers the loading of components until they are needed, using React.lazy() and Suspense to improve initial load performance.

Code splitting breaks a large bundle into smaller chunks that are loaded on demand, reducing initial load time.

Custom Hooks are JavaScript functions prefixed with "use" that encapsulate reusable stateful logic and can be shared across components.

useLayoutEffect runs synchronously after DOM mutations but before the browser paints, useful for measuring DOM elements or preventing visual flicker.

Redux is a predictable state management library for JavaScript apps that centralizes application state in a single store.

Concurrent Mode allows React to interrupt, pause, and resume rendering work to keep the UI responsive during heavy updates.

useTransition marks state updates as non-urgent transitions, allowing React to keep the UI responsive while processing them in the background.

useDeferredValue defers updating a part of the UI by accepting a lower-priority version of a value, helping avoid blocking urgent updates.

React Server Components render exclusively on the server, reducing client-side JavaScript bundle size and enabling direct server-side data access.

SSR renders React components on the server and sends the HTML to the client, improving initial load time and SEO performance.

SSG pre-renders pages at build time into static HTML files, delivering fast load times commonly used with Next.js.

Hydration is the process of attaching React event listeners to server-rendered HTML so it becomes a fully interactive client-side app.

An Error Boundary is a class component that catches JavaScript errors in its child component tree and displays a fallback UI instead of crashing.

Render Props is a pattern where a component receives a function as a prop and calls it to render dynamic content, enabling logic sharing.

Suspense lets components wait for asynchronous operations like data fetching or lazy loading by displaying a fallback UI until they resolve.

The Compound Component pattern allows multiple components to share implicit state by working together, providing a flexible and expressive API.

React optimizes performance through memoization (React.memo, useMemo, useCallback), code splitting, lazy loading, virtualization, and concurrent rendering.

React Fiber is the internal reconciliation engine rewritten in React 16 that enables incremental rendering and better scheduling of work.

Zustand is a lightweight state management library for React that uses a simple hook-based API without boilerplate, as an alternative to Redux.

React Query is a data-fetching and server state management library that handles caching, synchronization, and background updates automatically.

CSR renders on the client after JavaScript loads; SSR renders on the server per request; SSG pre-renders at build time. Each suits different performance and SEO needs.

Next.js is a React framework that adds SSR, SSG, file-based routing, API routes, and performance optimizations on top of React.

Tree shaking is a build optimization that removes unused code from the final bundle, reducing its size by only including what is actually imported.

Use semantic HTML, ARIA attributes, keyboard navigation support, focus management, and tools like axe or Lighthouse to audit accessibility.

useImperativeHandle customizes the instance value exposed to parent components when using forwardRef, controlling which methods are accessible externally.