React Interview Questions

React is a JavaScript library for building user interfaces, primarily used for building single-page applications with components that manage their own state.

Components are the building blocks of a React application, and they can be functional or class-based. They define how the UI is rendered and interact with the application's state.

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript, making React components more readable.

React represents the UI as elements and reconciles a new element tree against the previous one before committing necessary host updates. A component may re-render without every DOM node changing, so performance work should focus on stable state boundaries, keys, and measured bottlenecks rather than treating the virtual DOM as a blanket optimization.

Props (short for 'properties') are used to pass data from parent components to child components, making them dynamic and reusable.

State is a built-in object in React that allows components to maintain and update their own data over time, leading to re-rendering when the state changes.

Hooks are functions that allow you to use state and lifecycle features in functional components, such as useState, useEffect, and useContext.

useState is a hook that lets you add state variables to a functional component, allowing the component to react to state changes and trigger re-renders.

useEffect is a hook used to perform side effects in functional components, like data fetching or DOM manipulation, similar to lifecycle methods in class components.

Props are read-only and passed from parent to child components, while state is local to the component and can be changed by that component.

Keys help React identify which items have changed, been added, or removed from a list, improving performance and preventing unnecessary re-renders.

The context API allows you to share values like themes, user data, or settings between components without passing props manually at every level of the component tree.

React Router is a library used for routing in React applications, allowing you to navigate between different views or pages based on the URL.

Redux is a state management library used with React to manage global state in a predictable way, using actions, reducers, and a store.

In controlled components, the form element's value is controlled by React state, while in uncontrolled components, the form element manages its own state.

React lifecycle methods are special methods in class components that allow you to run code at specific points in a component's lifecycle (e.g., mounting, updating, unmounting).

Memoization reuses a previous value, component result, or function identity when dependencies are unchanged. It should be applied after measuring a real cost because unnecessary memoization adds comparison and maintenance overhead, and it does not replace good state placement or efficient data access.

useCallback is a hook that returns a memoized version of a callback function, preventing unnecessary re-renders when passing callbacks as props to child components.

useMemo is a hook that memoizes the result of a function to avoid expensive calculations on every render, improving performance.

Keys identify an item across renders so React can preserve the correct component state and apply minimal changes. Use a stable ID from the data, not an array index when items can be inserted, removed, or reordered.

Event handlers respond to a user or application action. useEffect synchronizes a component with an external system after rendering, such as a subscription, timer, or network request. Keep derived calculations in render and avoid effects that merely copy one piece of React state into another.

Keep state close to the components that use it, split expensive subtrees, pass stable and minimal props, use stable keys, and measure with the React Profiler. React.memo, useMemo, and useCallback are targeted tools, not defaults; they help only when they prevent meaningful work.

Use semantic HTML first, associate labels with controls, preserve keyboard navigation and visible focus, expose state with appropriate ARIA only when needed, and test with keyboard and screen-reader checks. Accessibility must be designed into interaction behavior, not added as labels after the UI is complete.

Server-side rendering sends HTML generated on the server, which can improve first content visibility and SEO. Hydration attaches client behavior to that HTML; the initial client render must match the server output, so browser-only values should be read after hydration or behind an explicit client boundary.

Server Components render on the server and can access server-side data without sending their component code to the browser. Client Components are needed for state, effects, and browser interaction; a good boundary keeps interactive code small and avoids sending secrets or server-only modules to the client.

Use startTransition to mark non-urgent updates, such as rendering filtered results or navigating to a view, so urgent interactions like typing remain responsive. It does not make the work cheaper, and loading or error states still need to be designed for the deferred update.

Ensure the server and initial client render use the same deterministic data and markup. Defer browser-only values such as local storage, viewport size, and current time until after hydration, or isolate them in a client-only boundary with an intentional loading state.