https://www.freecodecamp.org/news/react-interview-questions-and-answers/

What is React?

React is an open-source front-end JavaScript library for creating user interfaces. It is declarative, efficient, and flexible, and it adheres to the component-based approach, which allows us to create reusable UI components.

Developer primarily use React to create Single Page Applications and the library focuses solely on the view layer of MVC. It is also extremely fast.

Features of React

React has many features that set it apart, but here are a few highlights:

• React employs the Virtual DOM as opposed to a real/browser DOM.
• React uses unidirectional one-way data binding.
• It is used to develop web applications as well as mobile applications using React Native, which allows us to build cross-platform applications.

How to Start a New Project in React

We can create a React app from scratch by initalizing a project and installing all dependencies. But the easiest way is by using create-react-app via the command below:

xxxxxxxxxx
1
1
npx create-react-app my-app

Note: my-app is the name of the application we are creating, but you can change it to any name of your choice.

You can read more on how to get started with React in this article.

What Does DOM Stand For?

The term "DOM" stands for Document Object Model and refers to the representation of the entire user interface of a web application as a tree data structure.

Types of DOM

We have two types of DOM which are the Virual DOM and the Real DOM.

Advantages and Disadvantages of React

Here are some of the advantages and disadvantages of React:

Advantages of React

1. It has a shorter learning curve for JavaScript developers and a large number of manuals, tutorials, and training materials are available because of its active community.
2. React is search engine friendly
3. It makes it easier to create rich UI and custom components.
4. React has quick rendering
5. The use of JSX allows us to write code that is simpler, more appealing, and easier to understand.

Disadvantages of React

1. Because React is a frontend library, other languages and libraries are required to build a complete application.
2. It can be difficult for inexperienced programmers to understand because it employs JSX.
3. Existing documentation is quickly out of date due to the short development cycles.

What is JSX?

JavaScript XML is abbreviated as JSX. JSX enables and simplifies the creation of HTML in React, resulting in more readable and understandable markup.

For example:

xxxxxxxxxx
7
1
const App = () => {
2
  return (
3
    <div>
4
       <h1>Hello World</h1>
5
    </div>
6
  )
7
}

You can read more about JSX in React in this article.

Why can't Browsers Read JSX?

JSX is not a valid JavaScript code, and there is no built-in implementation that allows the browser to read and understand it. We need to transpile the code from JSX into valid JavaScript code that the browser can understand, and we use Babel, a JavaScript compiler/transpiler, to accomplish this.

Note: create-react-app uses Babel internally for the JSX to JavaScript conversion, but you can also set up your own babel configuration using Webpack.

You can read more about JSX in React in this article.

What are Components?

A component is a self-contained, reusable code block that divides the user interface into smaller pieces rather than building the entire UI in a single file.

There are two kinds of components in React: functional and class components.

What is a Class Component?

Class components are ES6 classes that return JSX and necessitate the use of React extensions. Because it was not possible to use state inside functional components in earlier versions of React (16.8), functional components were only used for rendering UI.

Example:

xxxxxxxxxx
10
1
import React, { Component } from 'react'
2
export default class App extends Component {
3
  render() {
4
    return (
5
      <div>
6
         <h1>Hello World</h1>
7
      </div>
8
    )
9
  }
10
}

Read more about React components and the types of components in this article.

What is a Functional Component?

A JavaScript/ES6 function that returns a React element is referred to as a functional component (JSX).

Since the introduction of React Hooks, we have been able to use states in functional components, which has led to many people adopting them due to their cleaner syntax.

Example:

xxxxxxxxxx
9
1
import React from 'react'
2
const App = () => {
3
  return (
4
    <div>
5
       <h1>Hello World</h1>
6
    </div>
7
  )
8
}
9
export default App;

Read more about React components and the types of components in this article.

Difference between Functional and Class components

How to Use CSS in React

There are 3 ways to style a react application with CSS:

• Inline Styles
• External Styling
• CSS in JS

Read more on how to style a React application in this article.

What is the Use of render() in React?

Render() is used in the class component to return the HTML that will be displayed in the component. It is used to read props and state and return our JSX code to our app's root component.

What are Props?

Props are also referred to as properties. They are used to transfer data from one component to the next (parent component to child component). They are typically used to render dynamically generated data.

Note: A child component can never send props to a parent component since this flow is unidirectional (parent to child).

Example:

xxxxxxxxxx
10
1
function App({name, hobby}) {
2
    return (
3
      <div>
4
        <h1>My name is {name}.</h1>
5
        <p>My hobby is {hobby}.</p>
6
      </div>
7
    );
8
}
9
​
10
export default App;

Read more about how props works in React here.

What is State in React?

State is a built-in React Object that is used to create and manage data within our components. It differs from props in that it is used to store data rather than pass data.

State is mutable (data can change) and accessible through this.state().

Example:

xxxxxxxxxx
16
1
class App extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {
5
      name: "John Doe"
6
    };
7
  }
8
​
9
  render() {
10
    return (
11
      <div>
12
        <h1>My name is {this.state.name}</h1>
13
      </div>
14
    );
15
  }
16
}

How to Update the State of a Component in React

It is important to know that when we update a state directly it won’t re-render the component – meaning we don’t get to see the update.

If we want it to re-render, then we have to use the setState() method which updates the component’s state object and re-reders the component.

Example:

xxxxxxxxxx
22
1
class App extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {
5
      name: "John Doe"
6
    };
7
  }
8
  changeName = () => {
9
    this.setState({name: "Jane Doe"});
10
  }
11
  render() {
12
    return (
13
      <div>
14
        <h1>My {this.state.name}</h1>
15
        <button
16
          type="button"
17
          onClick={this.changeName}
18
        >Change Name</button>
19
      </div>
20
    );
21
  }
22
}

You can learn more here.

How to Differentiate Between State and Props

State and props are JavaScript objects with distinct functions.

Props are used to transfer data from the parent component to the child component, whereas state is a local data storage that is only available to the component and cannot be shared with other components.

What is an Event in React?

In React, an event is an action that can be triggered by a user action or a system generated event. Mouse clicks, web page loading, key press, window resizes, scrolls, and other interactions are examples of events.

Example:

xxxxxxxxxx
5
1
// For class component
2
<button type="button" onClick={this.changeName} >Change Name</button>
3
​
4
// For function component
5
<button type="button" onClick={changeName} >Change Name</button>

How to Handle Events in React

Events in React are handled similarly to DOM elements. One difference we must consider is the naming of our events, which are named in camelCase rather than lowercase.

Example:

Class Component

xxxxxxxxxx
16
1
class App extends Component {
2
  constructor(props) {
3
    super(props);
4
    this.handleClick = this.handleClick.bind(this);
5
  }
6
  handleClick() {
7
    console.log('This button was Clicked');
8
  }
9
  render() {
10
    return (
11
      <div>
12
         <button onClick={this.handleClick}>Click Me</button>
13
      </div>
14
   );
15
  }
16
}

Function Component

xxxxxxxxxx
11
1
const App = () => {
2
   const handleClick = () => {
3
      console.log('Click happened');
4
   };
5
   return (
6
      <div>
7
         <button onClick={handleClick}>Click Me</button>
8
      </div>
9
   );
10
};
11
export default App;

How to Pass Parameters to an Event Handler

In functional components, we can do this:

xxxxxxxxxx
11
1
const App = () => {
2
   const handleClick = (name) => {
3
      console.log(`My name is ${name}`);
4
   };
5
   return (
6
      <div>
7
         <button onClick={() => handleClick('John Doe')}>Click Me</button>
8
      </div>
9
   );
10
};
11
export default App;

And in class components we can do this:

xxxxxxxxxx
13
1
class App extends React.Component {
2
  call(name) {
3
    console.log(`My name is ${name}`);
4
  }
5
  render() {
6
    return (
7
      <button onClick= {this.call.bind(this,"John Doe")}>
8
        Click the button!
9
      </button>
10
    );
11
  }
12
}
13
export default App;

What is Redux?

Redux is a popular open-source JavaScript library for managing and centralizing application state. It is commonly used with React or any other view-library.

Learn more about redux here.

What are React Hooks?

React hooks were added in v16.8 to allow us to use state and other React features without having to write a class.

They do not operate within classes, but rather assist us in hooking into React state and lifecycle features from function components.

When Did We Begin to Use Hooks in React?

The React team first introduced React Hooks to the world in late October 2018, during React Conf, and then in early February 2019, with React v16. 8.0.

Explain the useState() Hook

The useState Hook is a store that enables the use of state variables in functional components. You can pass the initial state to this function, and it will return a variable containing the current state value (not necessarily the initial state) and another function to update this value.

Example:

xxxxxxxxxx
11
1
import React, { useState } from 'react';
2
​
3
const App = () => {
4
  const [count, setCount] = useState(0);
5
​
6
  return (
7
    <div>
8
      // ...
9
    </div>
10
  );
11
}

Explain the useEffect() Hook

The useEffect Hook allows you to perform side effects in your components like data fetching, direct DOM updates, timers like setTimeout(), and much more.

This hook accepts two arguments: the callback and the dependencies, which allow you to control when the side effect is executed.

Note: The second argument is optional.

Example:

xxxxxxxxxx
20
1
import React, {useState, useEffect} from 'react';
2
​
3
const App = () => {
4
  const [loading, setLoading] = useState(false);
5
  
6
  useEffect(() => {
7
    setLoading(true);
8
    setTimeout(() => {
9
      setLoading(false);
10
    }, 2000);
11
  }, []);
12
  
13
  return(
14
    <div>
15
      // ...
16
    </div>
17
  )
18
}
19
​
20
export default App;

What's the Use of the useMemo() Hook?

The useMemo() hook is used in functional components to memoize expensive functions so that they are only called when a set input changes rather than every render.

Example:

xxxxxxxxxx
1
1
const result = useMemo(() => expensivesunction(input), [input]);

This is similar to the useCallback hook, which is used to optimize the rendering behavior of your React function components. useMemo is used to memoize expensive functions so that they do not have to be called on every render.

What Is the useRefs Hook?

The useRefs() hook, also known as the References hook, is used to store mutable values that do not require re-rendering when they are updated. It is also used to store a reference to a specific React element or component, which is useful when we need DOM measurements or to directly add methods to the components.

When we need to do the following, we use useRefs:

• Adjust the focus, and choose between text and media playback.
• Work with third-party DOM libraries.
• Initiate imperative animations

Example:

xxxxxxxxxx
17
1
import React, {useEffect, useRef} from 'react';
2
​
3
const App = () => {
4
  const inputRef = useRef(null)
5
  
6
  useEffect(()=>{
7
    inputElRef.current.focus()
8
  }, [])
9
  
10
  return(
11
    <div>
12
      <input type="text" ref={inputRef} />
13
    </div>
14
  )
15
}
16
​
17
export default App;

What are Custom Hooks?

Custom Hooks are a JavaScript function that you write to allow you to share logic across multiple components, which was previously impossible with React components.

If you're interested in learning how this works, here is a step by step guide to help you build your own Custom React Hook.

What is Context in React?

Context is intended to share "global" data for a tree of React components by allowing data to be passed down and used (consumed) in whatever component we require in our React app without the use of props. It allows us to share data (state) more easily across our components.

Read more about React Context in this guide.

What is React Router?

React router is a standard library used in React applications to handle routing and allow navigation between views of various components.

Installing this library into your React project is as simple as typing the following command into your terminal:

xxxxxxxxxx
1
1
npm install – -save react-router-dom

一个真实 React SPA 的完整执行流程

一、先给你一个总览（全流程图 · 文字版）

xxxxxxxxxx
23
1
用户访问 URL
2
   ↓
3
服务器返回 HTML
4
   ↓
5
浏览器解析 HTML / CSS
6
   ↓
7
下载 JS（bundle）
8
   ↓
9
React 启动
10
   ↓
11
（CSR 或 SSR 分叉）
12
   ↓
13
Virtual DOM → Fiber
14
   ↓
15
Reconciliation（diff）
16
   ↓
17
Commit（更新 DOM）
18
   ↓
19
页面可交互
20
   ↓
21
用户操作 → State 更新
22
   ↓
23
Re-render → 局部更新

下面我们按阶段逐个拆解术语。

二、阶段 1：访问页面（SPA 的起点）

🔹 SPA（Single Page Application）

发生了什么

• 浏览器访问 /
• 只请求一个 HTML 文件
• 后续页面切换不再刷新

xxxxxxxxxx
1
1
SPA 的本质：HTML 只加载一次

📌 术语出现：

• SPA
• Client-side Routing
• Soft Navigation

三、阶段 2：HTML 从哪里来？（CSR vs SSR）

这里是第一个分叉点

🟢 情况 A：CSR（Client Side Rendering）

xxxxxxxxxx
2
1
服务器 → 返回空壳 HTML
2
<script src="bundle.js"></script>

特点

• HTML 几乎没内容
• React 在浏览器执行
• JS 下载完成后才看到页面

📌 涉及术语

• CSR
• Bundle
• FCP 慢
• SEO 较差

🔵 情况 B：SSR（Server Side Rendering）

xxxxxxxxxx
2
1
服务器 → 返回完整 HTML
2
<h1>Home</h1>

特点

• 页面立刻可见
• 但暂时不能点

📌 涉及术语

• SSR
• Streaming SSR（React 18）
• 首屏快

四、阶段 3：Hydration（SSR 必考术语 ⭐⭐⭐）

🔹 Hydration（注水）

发生了什么

• React 在浏览器中运行
• 将事件处理器“绑定”到已有 HTML

xxxxxxxxxx
2
1
HTML：我已经有了
2
React：我来接管它

📌 面试标准回答

Hydration 是把服务端生成的 HTML 变成可交互的 React 应用的过程。

⚠️ 易错点

• Hydration ≠ 重新渲染 DOM
• 是复用现有 DOM

五、阶段 4：Virtual DOM & Fiber 架构

🔹 Virtual DOM

• UI 的 JS 表示
• 描述「页面应该长什么样」

🔹 Fiber（React 核心架构）

Fiber 是什么

• Virtual DOM 的升级实现
• 把渲染拆成小任务

📌 Fiber 带来的能力

• 可中断渲染
• 优先级调度
• 并发渲染基础

xxxxxxxxxx
1
1
Fiber = 可被暂停和恢复的渲染单元

六、阶段 5：Reconciliation（diff 过程）

🔹 Reconciliation（协调）

发生了什么

• 新 Virtual DOM
• 旧 Virtual DOM
• React 找最小差异

📌 相关术语

• Diff
• Key
• Referential Equality

⚠️ 面试高频追问

为什么 key 不能用 index？

七、阶段 6：Render Phase & Commit Phase

🔹 Render Phase（可中断）

• 执行组件函数
• 计算新的 Fiber 树
• 不会操作 DOM

📌 可被打断（Concurrent）

🔹 Commit Phase（不可中断）

• 更新真实 DOM
• 执行 useLayoutEffect
• 绑定 ref

📌 一句话

Render 负责算，Commit 负责改

八、阶段 7：页面可交互（React 接管完成）

此时：

• SPA 已运行
• CSR / SSR 差异消失
• 页面完全一致

📌 出现术语

• Client-side Routing
• Browser History API

九、阶段 8：用户交互 → Re-render（面试必问）

🔹 State Update

xxxxxxxxxx
1
1
setCount(c => c + 1)

🔹 Re-render（重要！）

Re-render 是什么

• 组件函数重新执行
• 不等于 DOM 更新

📌 常见误区 ❌ re-render = 页面重绘 ✅ re-render = 重新计算 UI

十、Concurrent React（React 18 重点）

🔹 Concurrent Rendering

解决什么问题

• 大量更新卡 UI
• 输入延迟

🔹 startTransition

xxxxxxxxxx
3
1
startTransition(() => {
2
  setList(filterItems())
3
})

📌 含义

• 标记为低优先级更新
• 输入优先渲染

十一、把所有术语压缩成一句“执行链”

用户访问 SPA → CSR 或 SSR 返回 HTML → Hydration 让页面可交互 → React 使用 Fiber 进行渲染 → Reconciliation 计算差异 → Commit 更新 DOM → State 更新触发 Re-render → Concurrent 保证流畅度