Question 1

What is React and what are its main features?

Accepted Answer

React is a JavaScript library for building user interfaces, particularly web applications. Its main features include component-based architecture, virtual DOM for efficient updates, one-way data binding, JSX syntax for writing HTML-like code in JavaScript, and a rich ecosystem of hooks and tools for state management and routing.

Question 2

Explain the difference between functional and class components.

Accepted Answer

Functional components are JavaScript functions that return JSX. They are simpler, easier to test, and use hooks for state and lifecycle. Class components are ES6 classes that extend React.Component, use this.state and lifecycle methods. Functional components are now preferred in modern React development.

Question 3

What is JSX and how does it differ from HTML?

Accepted Answer

JSX is a syntax extension for JavaScript that allows writing HTML-like code. It gets transpiled to React.createElement() calls. Differences include using className instead of class, camelCase for attributes like onClick, self-closing tags must have /, and JavaScript expressions are wrapped in curly braces.

Question 4

What is the Virtual DOM and how does it work?

Accepted Answer

The Virtual DOM is a JavaScript representation of the real DOM. React creates a virtual representation, compares it with the previous version when state changes, identifies differences (diffing), and updates only the changed nodes in the real DOM (reconciliation). This makes updates faster than directly manipulating the DOM.

Question 5

Explain React component lifecycle methods.

Accepted Answer

Lifecycle methods are hooks that allow you to run code at specific points in a component's lifecycle. In class components: componentDidMount (after first render), componentDidUpdate (after updates), componentWillUnmount (before removal). In functional components, useEffect hook replaces these methods.

Question 6

What are props in React and how do they differ from state?

Accepted Answer

Props are read-only data passed from parent to child components. They are immutable and flow downward. State is internal data managed within a component, can be changed using setState or useState, and triggers re-renders when updated. Props are for configuration, state is for dynamic data.

Question 7

How does useState hook work?

Accepted Answer

useState is a hook that adds state to functional components. It returns an array with two elements: the current state value and a function to update it. The initial value is set once on mount. Calling the update function triggers a re-render with the new state value.

Question 8

What is the purpose of useEffect hook?

Accepted Answer

useEffect performs side effects in functional components. It runs after render and can handle data fetching, subscriptions, DOM manipulation, and cleanup. The dependency array controls when it runs: empty array runs once on mount, with dependencies runs when they change, no array runs after every render.

Question 9

What is the difference between useEffect and useLayoutEffect?

Accepted Answer

useEffect runs asynchronously after the browser paints, while useLayoutEffect runs synchronously after DOM mutations but before the browser paints. Use useLayoutEffect when you need to read layout from DOM and synchronously re-render to prevent visual flashing. useEffect is preferred for most cases.

Question 10

How do you handle events in React?

Accepted Answer

React uses synthetic events, a wrapper around native events for cross-browser compatibility. Event handlers are passed as props with camelCase names like onClick, onChange. The event object is passed automatically. Use arrow functions or bind to maintain this context in class components.

Question 11

What are controlled and uncontrolled components?

Accepted Answer

Controlled components have form data handled by React state. The value is stored in state and updated via onChange. Uncontrolled components use refs to access form values directly from DOM. Controlled components are preferred for React applications.

Question 12

What is the purpose of keys in React lists?

Accepted Answer

Keys help React identify which items changed, were added, or removed. They should be unique among siblings and stable across re-renders. Using index as key is acceptable if list is static, but not recommended for dynamic lists. Keys enable efficient reconciliation.

Question 13

Explain React Context API and when to use it.

Accepted Answer

Context provides a way to pass data through the component tree without prop drilling. It consists of createContext, Provider, and useContext. Use it for theme, authentication, language settings, or any data needed by many components. Avoid overusing it as it can make components harder to test.

Question 14

What is useReducer and when should you use it instead of useState?

Accepted Answer

useReducer is a hook for managing complex state logic. It takes a reducer function and initial state, returns current state and dispatch function. Use it when state logic is complex, state updates depend on previous state, or you need to manage multiple related state values together.

Question 15

What is useMemo and how does it optimize performance?

Accepted Answer

useMemo memoizes expensive computations. It returns a memoized value that only recalculates when dependencies change. This prevents unnecessary recalculations on every render, improving performance for expensive operations like filtering large arrays or complex calculations.

Question 16

What is useCallback and why is it important?

Accepted Answer

useCallback returns a memoized callback function that only changes when dependencies change. It prevents child components from re-rendering unnecessarily when passed as props. Essential for optimizing components that receive callback props, especially with React.memo.

Question 17

How do you create custom hooks in React?

Accepted Answer

Custom hooks are JavaScript functions starting with "use" that can call other hooks. They allow extracting component logic into reusable functions. Custom hooks share stateful logic between components without changing component hierarchy.

Question 18

What are React Error Boundaries?

Accepted Answer

Error boundaries are React components that catch JavaScript errors in child component tree, log them, and display fallback UI. They catch errors during rendering, lifecycle methods, and constructors. They do not catch errors in event handlers, async code, or during server-side rendering.

Question 19

What is React.memo and how does it work?

Accepted Answer

React.memo is a higher-order component that memoizes functional components. It prevents re-rendering if props haven't changed by doing a shallow comparison. It only checks prop changes, not state or context changes. Useful for expensive components that receive stable props.

Question 20

Explain the difference between useRef and useState.

Accepted Answer

useRef returns a mutable object that persists across renders without causing re-renders. useState triggers re-renders when updated. useRef is used for accessing DOM elements, storing previous values, or mutable values that don't need to trigger renders. useState is for state that affects rendering.

React Interview Questions - React JS ReactJS Interview Prep

All Questions & Answers