Question 1

What is React?

Accepted Answer

React is a JavaScript library for building user interfaces, developed by Facebook. It uses a component-based architecture and a virtual DOM for efficient rendering. React focuses only on the view layer, making it flexible to integrate with other libraries.

Question 2

What is the Virtual DOM?

Accepted Answer

The Virtual DOM is a lightweight JavaScript representation of the actual DOM. When state changes, React creates a new virtual DOM, compares it with the previous one (diffing), and updates only the changed elements in the real DOM. This makes updates faster than direct DOM manipulation.

Question 3

What is JSX?

Accepted Answer

JSX is a syntax extension for JavaScript that looks like HTML but gets compiled to React.createElement() calls. It allows you to write UI components in a familiar HTML-like syntax while maintaining the full power of JavaScript. JSX is not required but makes React code more readable.

Question 4

What is the difference between state and props?

Accepted Answer

Props are read-only data passed from parent to child components - they cannot be modified by the receiving component. State is internal data managed within a component that can change over time. When state changes, the component re-renders.

Question 5

What Are Hooks Used For?

Accepted Answer

Hooks are functions that let you use state and other React features in functional components. useState manages local state, useEffect handles side effects, useContext accesses context, and useMemo/useCallback optimize performance. Hooks replaced the need for class components in most cases.

Question 6

What is the difference between Functional and Class Components?

Accepted Answer

Functional components are JavaScript functions that return JSX and use hooks for state and lifecycle. Class components extend React.Component and use this.state and lifecycle methods. Functional components are simpler, easier to test, and are now the recommended approach.

Question 7

What Is the Role of Keys in React?

Accepted Answer

Keys are unique identifiers that help React track which items in a list have changed, been added, or removed. They enable efficient re-rendering by allowing React to reuse existing DOM elements. Always use stable, unique IDs as keys - avoid using array indexes.

Question 8

What is prop drilling?

Accepted Answer

Prop drilling is when you pass props through multiple intermediate components just to reach a deeply nested child that needs the data. It makes code harder to maintain. Solutions include React Context, state management libraries like Redux, or component composition patterns.

Question 9

What Is React Context Used For?

Accepted Answer

React Context provides a way to share data across the component tree without passing props manually at every level. It's ideal for global data like themes, user authentication, or language preferences. Use createContext() to create and useContext() to consume context values.

Question 10

What is the Purpose of React.memo()?

Accepted Answer

React.memo() is a higher-order component that prevents unnecessary re-renders of functional components. It performs a shallow comparison of props and only re-renders if props have changed. Use it for components that render often with the same props.

Question 11

Controlled vs. Uncontrolled Components

Accepted Answer

Controlled components have their form values managed by React state - every keystroke updates state via onChange. Uncontrolled components store their own state in the DOM, accessed via refs. Controlled components are preferred as they give React full control over the form data.

Question 12

What Are Error Boundaries?

Accepted Answer

Error boundaries are React components that catch JavaScript errors in their child component tree, log the errors, and display a fallback UI instead of crashing the entire app. They're created using componentDidCatch() and getDerivedStateFromError() in class components.

Question 13

How to Skip the Invocation of useEffect?

Accepted Answer

Pass a dependency array as the second argument to useEffect. The effect only runs when values in the array change. An empty array [] means the effect runs only on mount. Omitting the array causes the effect to run after every render.

Question 14

What are Higher Order Components?

Accepted Answer

Higher Order Components (HOCs) are functions that take a component and return a new enhanced component with additional props or behavior. They're a pattern for reusing component logic. Common examples include withRouter from React Router and connect from Redux.

Question 15

What is Redux?

Accepted Answer

Redux is a predictable state management library for JavaScript applications. It stores the entire app state in a single immutable store, with state changes made only through pure reducer functions triggered by dispatched actions. It's commonly used with React for complex state management.

React Basics(3 questions)

What is React?

What are the advantages and disadvantages of React?

What distinguishes React from Angular?

Virtual DOM(2 questions)

What is the Virtual DOM?

What is the difference between the DOM and the Virtual DOM?

JSX and Props(6 questions)

What is JSX?

What are props used for?

What is the difference between state and props?

What is prop drilling?

How do you enforce typing for props?

How do you check if only one child component was passed in props?

React API(5 questions)

What Is React Context Used For?

What Is the Role of Keys in React?

What Is the Purpose of refs in React?

What Is ReactDOM?

What Is the Purpose of the render() Function?

React Hooks(6 questions)

What Are Hooks Used For?

What Are the Benefits of Using Hooks?

How to Skip the Invocation of useEffect?

How to Invoke the useEffect Hook Only Once?

How to Memoize Computations Using Hooks?

How to Create "Heavy" Objects Using Hooks?

Components(13 questions)

What is the Difference Between Functional and Class Components?

Controlled vs. Uncontrolled Components

What are Higher Order Components?

What is the Purpose of React.memo()?

What is PureComponent?

What Are Error Boundaries?

What Lifecycle Methods Do You Know?

How Do You Execute an Action Only Once During Rendering?

Is the setState() Method Synchronous or Asynchronous?

Why Should You Not Modify this.state Directly?

What Is the Purpose of the Function Passed to setState()?

Presentational vs Container Components

What is the Purpose of the StrictMode Component?

Events(2 questions)

What is the difference between events in React and HTML?

What is a SyntheticEvent?

React Router(7 questions)

What is the purpose of React Router?

What types of <Router> components are available?

What is the difference between <BrowserRouter> and <HashRouter>?

How can routing be triggered programmatically?

How to Handle a Missing Page (404 Status) in React Router?

How to Handle Redirection in React Router?

How to Split Code Based on the URL?

React Redux(5 questions)

What is Redux?

What are the components of Redux?

What are the benefits of using Redux?

What is Redux Thunk used for?

What is Redux Saga used for?

Performance(1 questions)

What Would You Do If the Application Renders Too Slowly?

What are `props` used for?

What is the difference between `state` and `props`?

How do you enforce typing for `props`?

How do you check if only one child component was passed in `props`?

What Is the Purpose of the `render()` Function?

How to Skip the Invocation of `useEffect`?

How to Invoke the `useEffect` Hook Only Once?

What is the Purpose of `React.memo()`?

What is `PureComponent`?

Is the `setState()` Method Synchronous or Asynchronous?

Why Should You Not Modify `this.state` Directly?

What Is the Purpose of the Function Passed to `setState()`?

What is the Purpose of the `StrictMode` Component?

What types of `<Router>` components are available?

What is the difference between `<BrowserRouter>` and `<HashRouter>`?