Top 40 câu hỏi phỏng vấn ReactJS từ cơ bản đến nâng cao

ReactJS là một trong những chủ đề "nóng hổi" trong ngành IT hiện nay. Tính đến thời điểm hiện tại, React là công nghệ front-end phổ biến nhất mà ngày càng nhiều công ty sử dụng.

Nếu bạn đang chuẩn bị cho buổi phỏng vấn sắp tới, sau đây là 40 câu hỏi phỏng vấn ReactJS phổ biến nhất, kèm theo câu trả lời, dành cho bạn.

Mục lục

1. ReactJS là gì?
2. Câu hỏi phỏng vấn ReactJS cơ bản
3. Câu hỏi về Components
4. Câu hỏi về ReactJS Redux
5. Câu hỏi về React Router
6. Câu hỏi về Styling

ReactJS là gì?

Trước khi đến với những câu hỏi phỏng vấn ReactJS, hãy cùng "ôn" lại ReactJS là gì nhé.

ReactJS là thư viện JavaScript front-end phổ biến nhất trong lĩnh vực phát triển web, hay còn được gọi là React. React được tạo ra để xây dựng giao diện người dùng nhanh và tương tác cho các ứng dụng web và di động.

Tại sao React phổ biến?

React đã trở nên phổ biến nhờ vào một số tính năng nổi bật:

✅ Có thể phát triển cả ứng dụng web và mobile
✅ Luồng dữ liệu một chiều (one-way data flow)
✅ Components có thể tái sử dụng
✅ Tạo các ứng dụng động dễ dàng
✅ Virtual DOM cho hiệu suất cao

Câu hỏi phỏng vấn ReactJS cơ bản

1. Những đặc điểm của React?

| Đặc điểm | Mô tả | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | JSX | Phần mở rộng cú pháp cho JavaScript. JSX được sử dụng với React để mô tả giao diện người dùng trông như thế nào. Bằng cách sử dụng JSX, chúng ta có thể viết các cấu trúc HTML trong cùng một tệp chứa code JavaScript. | | Components | Nền tảng của bất kỳ ứng dụng React nào và một ứng dụng đơn lẻ thường bao gồm nhiều components. Nó chia giao diện người dùng thành các phần độc lập, có thể tái sử dụng và có thể được xử lý riêng. | | Virtual DOM | React giữ một bản "đại diện" nhưng nhẹ hơn của DOM "thực" trong bộ nhớ, gọi là DOM ảo. Khi trạng thái của một đối tượng thay đổi, DOM ảo chỉ thay đổi đối tượng đó trong DOM thực, thay vì cập nhật tất cả các đối tượng. | | One-way data-binding | Truyền dữ liệu một chiều của React giữ cho mọi thứ đều theo modular và nhanh chóng. Luồng dữ liệu một chiều có nghĩa là khi thiết kế một ứng dụng React, bạn thường lồng các components con bên trong các components mẹ. | | Hiệu suất cao | React chỉ cập nhật những components đã thay đổi, thay vì cập nhật tất cả các components cùng một lúc. Điều này giúp tạo ra các ứng dụng web nhanh hơn đáng kể. |

2. JSX là gì?

JSX (JavaScript XML) là một phần mở rộng cú pháp cho JavaScript. JSX được sử dụng với React để mô tả giao diện người dùng trông như thế nào.

Ví dụ:

const element = <h1>Hello, world!</h1>;

Lợi ích của JSX:

• ✅ Dễ đọc và viết hơn
• ✅ Kết hợp HTML và JavaScript
• ✅ Type-safe (với TypeScript)
• ✅ Prevent injection attacks

3. Các trình duyệt web có đọc JSX một cách trực tiếp được không?

Không. Trình duyệt web không thể đọc JSX một cách trực tiếp.

Lý do:

• Trình duyệt chỉ đọc các đối tượng JS thông thường
• JSX không phải là một đối tượng JavaScript thông thường

Giải pháp:

• Sử dụng Babel để chuyển đổi JSX thành JavaScript thông thường
• Babel transpile JSX → React.createElement() calls

Ví dụ:

// JSX
const element = <h1>Hello</h1>;

// Sau khi Babel transpile
const element = React.createElement("h1", null, "Hello");

4. DOM ảo (Virtual DOM) là gì?

DOM (Document Object Model) đại diện cho một tài liệu HTML có cấu trúc cây logic. Mỗi nhánh của cây kết thúc bằng một nút và mỗi nút chứa các đối tượng.

Virtual DOM là một bản "đại diện" nhưng nhẹ hơn của DOM "thực" trong bộ nhớ.

Cách hoạt động:

1. Khi state thay đổi → Virtual DOM được cập nhật
2. So sánh (Diffing) → So sánh Virtual DOM mới với Virtual DOM cũ
3. Cập nhật (Reconciliation) → Chỉ cập nhật những phần thay đổi trong Real DOM

Lợi ích:

• ⚡ Hiệu suất cao hơn
• 🎯 Chỉ update những gì cần thiết
• 🚀 Batch updates để tối ưu

5. Tại sao nên sử dụng React thay vì các framework khác?

| Lợi ích | Mô tả | | ----------------------------- | --------------------------------------------------------------------------------------------------------------------- | | Dễ tạo ứng dụng động | React giúp tạo các ứng dụng web động dễ dàng hơn vì ít code hơn mà lại cung cấp nhiều chức năng hơn | | Hiệu suất cải thiện | React sử dụng Virtual DOM, giúp các ứng dụng web hoạt động nhanh hơn | | Components tái sử dụng | Các components có logic và điều khiển riêng, có thể tái sử dụng thông qua ứng dụng, giảm đáng kể thời gian phát triển | | Luồng dữ liệu một chiều | React tuân theo luồng dữ liệu một chiều, giúp debug dễ dàng hơn | | Công cụ debug chuyên dụng | React DevTools giúp debug nhanh hơn và dễ dàng hơn |

6. Điểm khác biệt giữa ES6 và ES5?

Components và Function:

// ES5
var MyComponent = React.createClass({
  render: function () {
    return <h1>Hello</h1>;
  },
});

// ES6
class MyComponent extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}

exports vs export:

// ES5
module.exports = Component;

// ES6
export default Component;

require vs import:

// ES5
var React = require("react");

// ES6
import React from "react";

7. Làm thế nào để tạo một ứng dụng React?

Bước 1: Cài đặt Node.js

• Download từ nodejs.org
• Cần npm để cài đặt thư viện React

Bước 2: Cài đặt Create React App

npx create-react-app my-app
cd my-app
npm start

Bước 3: Cài đặt Code Editor

• VS Code (khuyến nghị)
• Sublime Text
• WebStorm

Bước 4: Bắt đầu code!

function App() {
  return (
    <div className="App">
      <h1>Hello React!</h1>
    </div>
  );
}

8. Sự kiện (Event) trong React là gì?

Sự kiện là một hành động mà người dùng hoặc hệ thống có thể kích hoạt, ví dụ:

• Nhấn phím
• Click chuột
• Submit form
• Hover

Đặc điểm:

• ✅ Sự kiện React được đặt tên bằng camelCase
• ✅ Truyền function làm event handler, không phải string

Ví dụ:

// HTML
<button onclick="handleClick()">Click</button>

// React
<button onClick={handleClick}>Click</button>

9. Làm thế nào để tạo một sự kiện trong React?

function Button() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return <button onClick={handleClick}>Click me</button>;
}

Event với tham số:

function Button() {
  const handleClick = (name) => {
    alert(`Hello ${name}!`);
  };

  return <button onClick={() => handleClick("John")}>Click me</button>;
}

10. Sự kiện tổng hợp (Synthetic Event) trong React là gì?

Synthetic Event là wrapper của React xung quanh sự kiện gốc của trình duyệt.

Lợi ích:

• ✅ Nhất quán trên các trình duyệt khác nhau
• ✅ API thống nhất
• ✅ Performance optimization

Ví dụ:

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault(); // Synthetic event method
    console.log("Form submitted");
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

11. Giải thích cách danh sách hoạt động trong React

Danh sách trong React được tạo bằng cách sử dụng hàm map().

Ví dụ:

function TodoList() {
  const todos = ["Learn React", "Build App", "Deploy"];

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

12. Vì sao phải sử dụng key trong danh sách?

Key rất quan trọng vì:

✅ Định danh độc nhất - Xác định item nào đã thay đổi, được cập nhật hoặc bị xóa

✅ Tăng hiệu suất - Chỉ render lại components được cập nhật

✅ Tránh bugs - Giúp React track elements đúng cách

Best practices:

// ❌ Tránh dùng index
{
  items.map((item, index) => <li key={index}>{item}</li>);
}

// ✅ Dùng unique ID
{
  items.map((item) => <li key={item.id}>{item.name}</li>);
}

13. Form trong React là gì?

Form cho phép người dùng tương tác với ứng dụng web và nhập thông tin.

Form elements:

• Input fields
• Textarea
• Select dropdown
• Checkbox
• Radio buttons

Use cases:

• User authentication
• Search
• Filtering
• Data entry

14. Làm thế nào để tạo form trong React?

Controlled Component:

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

15. Làm sao để viết comment trong React?

Comment một dòng:

{
  /* This is a single-line comment */
}
<h1>Hello</h1>;

Comment nhiều dòng:

{
  /* 
  This is a 
  multi-line 
  comment 
*/
}
<h1>Hello</h1>;

Comment trong JSX:

<div>
  {/* Comment here */}
  <h1>Title</h1>
</div>

16. Hàm mũi tên (Arrow Function) là gì?

Arrow function là cách viết ngắn gọn của function trong JavaScript/React.

Lợi ích:

• ✅ Cú pháp ngắn gọn
• ✅ Không cần bind this
• ✅ Implicit return

Ví dụ:

// Traditional function
function handleClick() {
  console.log("Clicked");
}

// Arrow function
const handleClick = () => {
  console.log("Clicked");
};

// Arrow function với implicit return
const double = (x) => x * 2;

17. Điểm khác nhau giữa React và React Native?

| | React | React Native | | ----------------- | --------------------- | --------------------- | | Năm phát hành | 2013 | 2015 | | Nền tảng | Web | Mobile (Android, iOS) | | HTML | Có | Không | | CSS | Có | Không (StyleSheet) | | Yêu cầu | JavaScript, HTML, CSS | React.js | | Rendering | DOM | Native components |

18. Điểm khác nhau giữa React và Angular?

| | Angular | React | | ------------------ | ------------- | ------------------------- | | Tác giả | Google | Facebook | | Mô hình | MVC toàn diện | View layer only | | DOM | Real DOM | Virtual DOM | | Data binding | Two-way | One-way | | Rendering | Client-side | Server-side (với Next.js) | | Hiệu suất | Chậm hơn | Nhanh hơn | | Learning curve | Steep | Moderate |

Câu hỏi phỏng vấn ReactJS về Components

19. Component trong React là gì?

Component là nền tảng của bất kỳ ứng dụng React nào. Một component về cơ bản là một phần của giao diện người dùng.

Hai loại components:

1. Functional Components (Stateless):

function Greeting(props) {
  return <h1>Welcome to {props.name}</h1>;
}

2. Class Components (Stateful):

class Greeting extends React.Component {
  render() {
    return <h1>Welcome to {this.props.name}</h1>;
  }
}

20. Cách sử dụng hàm render() trong React?

Mỗi component bắt buộc phải có một hàm render(). Hàm này trả về HTML sẽ được hiển thị.

Lưu ý:

• Nếu hiển thị nhiều elements, phải wrap trong một tag cha

Ví dụ:

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Title</h1>
        <p>Description</p>
      </div>
    );
  }
}

21. State trong React là gì?

State là một đối tượng React tích hợp được sử dụng để chứa dữ liệu hoặc thông tin về component.

Đặc điểm:

• ✅ State có thể thay đổi theo thời gian
• ✅ Khi state thay đổi, component sẽ re-render
• ✅ State là private và được quản lý bởi component

Ví dụ:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

22. Làm thế nào để triển khai State trong React?

Class Component:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Functional Component (Hooks):

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

23. Làm thế nào để cập nhật State?

Class Component - setState():

this.setState({ count: this.state.count + 1 });

// Hoặc với callback
this.setState((prevState) => ({
  count: prevState.count + 1,
}));

Functional Component - useState hook:

const [count, setCount] = useState(0);

// Update
setCount(count + 1);

// Hoặc với callback
setCount((prevCount) => prevCount + 1);

24. Props trong React là gì?

Props (Properties) là một đối tượng tích hợp trong React, lưu trữ giá trị của các thuộc tính của tag.

Đặc điểm:

• ✅ Truyền dữ liệu từ parent → child component
• ✅ Read-only (không thể thay đổi)
• ✅ Hoạt động như function arguments

Ví dụ:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Sử dụng
<Welcome name="John" />;

25. Làm thế nào để truyền props giữa các components?

// Parent Component
function App() {
  const user = {
    name: "John",
    age: 25,
  };

  return <UserProfile user={user} />;
}

// Child Component
function UserProfile(props) {
  return (
    <div>
      <h2>{props.user.name}</h2>
      <p>Age: {props.user.age}</p>
    </div>
  );
}

Destructuring props:

function UserProfile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
    </div>
  );
}

26. Điểm khác nhau giữa State và Props?

| | State | Props | | ------------------------ | -------------------------- | ------------------------------ | | Mục đích | Chứa dữ liệu của component | Truyền dữ liệu giữa components | | Thay đổi | Có thể thay đổi | Không thể thay đổi (immutable) | | Read-only | Không | Có | | Child access | Không thể truy cập | Có thể truy cập | | Stateless components | Không thể có | Có thể có |

27. Higher-Order Component (HOC) là gì?

HOC là một pattern trong React để tái sử dụng component logic. HOC là một function nhận vào một component và trả về một component mới.

Ví dụ:

// HOC
function withLoading(Component) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) return <div>Loading...</div>;
    return <Component {...props} />;
  };
}

// Sử dụng
const UserListWithLoading = withLoading(UserList);

<UserListWithLoading isLoading={true} users={users} />;

28. Làm thế nào để nhúng hai hoặc nhiều components thành một?

// Component 1
function Header() {
  return (
    <header>
      <h1>My App</h1>
    </header>
  );
}

// Component 2
function Content() {
  return (
    <main>
      <p>Content here</p>
    </main>
  );
}

// Component 3
function Footer() {
  return (
    <footer>
      <p>Footer</p>
    </footer>
  );
}

// Kết hợp
function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

29. Điểm khác nhau giữa Class và Functional Components?

| | Class Components | Functional Components | | --------------- | -------------------- | --------------------- | | State | Có thể có state | Có thể có (với Hooks) | | Lifecycle | Có lifecycle methods | Có (với useEffect) | | Syntax | Phức tạp hơn | Đơn giản hơn | | this | Cần bind this | Không cần | | Performance | Chậm hơn một chút | Nhanh hơn | | Khuyến nghị | Legacy code | Modern React |

30. Lifecycle methods của components

Mounting:

• constructor() - Khởi tạo state
• componentDidMount() - Sau khi component được render

Updating:

• shouldComponentUpdate() - Quyết định có re-render không
• componentDidUpdate() - Sau khi component được update

Unmounting:

• componentWillUnmount() - Trước khi component bị remove

Với Hooks:

useEffect(() => {
  // componentDidMount
  console.log("Mounted");

  return () => {
    // componentWillUnmount
    console.log("Unmounted");
  };
}, []);

Câu hỏi phỏng vấn ReactJS về Redux

31. Redux là gì?

Redux là một thư viện JavaScript mở được dùng để quản lý trạng thái ứng dụng.

Đặc điểm:

• ✅ Predictable state container
• ✅ Centralized state management
• ✅ Time-travel debugging
• ✅ Middleware support

32. Các components của Redux?

1. Store:

• Giữ state của toàn bộ ứng dụng
• Single source of truth

2. Action:

• Plain JavaScript object
• Mô tả "what happened"

3. Reducer:

• Pure function
• Xác định cách state thay đổi

Ví dụ:

// Action
const increment = () => ({ type: "INCREMENT" });

// Reducer
function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    default:
      return state;
  }
}

// Store
const store = createStore(counter);

33. Flux là gì?

Flux là kiến trúc phần mềm mà Facebook dùng để xây dựng các ứng dụng web.

Components:

• Action - Mô tả sự kiện
• Dispatcher - Phân phối actions
• Store - Chứa state và logic
• View - React components

Flow:

Action → Dispatcher → Store → View

34. Điểm khác nhau giữa Redux và Flux?

| | Redux | Flux | | -------------- | ------------ | ----------------- | | Loại | Thư viện | Kiến trúc/Pattern | | Store | Single store | Multiple stores | | State | Immutable | Mutable | | Dispatcher | Không có | Có | | Reducer | Có | Không |

Câu hỏi phỏng vấn ReactJS về React Router

35. React Router là gì?

React Router là thư viện định tuyến được xây dựng lên trên React, được dùng để tạo ra các routes trong ứng dụng React.

Features:

• ✅ Declarative routing
• ✅ Dynamic routing
• ✅ Nested routes
• ✅ URL parameters

36. Vì sao cần sử dụng React Router?

Lợi ích:

• ✅ Duy trì sự nhất quán của cấu trúc
• ✅ Phát triển single-page applications
• ✅ Nhiều views trong một ứng dụng
• ✅ Không reload page

37. React routing khác như thế nào so với conventional routing?

| | React Routing | Conventional Routing | | --------------- | ------------------------ | ------------------------ | | Pages | Single HTML page | Multiple HTML files | | Navigation | Nhiều views trong 1 file | Nhiều files cho mỗi view | | Reload | Không reload | Reload mỗi lần navigate | | Performance | Nhanh hơn | Chậm hơn |

38. Làm thế nào để triển khai React routing?

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Câu hỏi phỏng vấn ReactJS về Styling

39. Làm thế nào để style components trong React?

1. Inline Styling:

<div style={{ color: "blue", fontSize: "20px" }}>Hello</div>

2. JavaScript Object:

const styles = {
  container: {
    color: "blue",
    fontSize: "20px",
  },
};

<div style={styles.container}>Hello</div>;

3. CSS Stylesheet:

import "./App.css";

<div className="container">Hello</div>;

4. CSS Modules:

import styles from "./App.module.css";

<div className={styles.container}>Hello</div>;

5. Styled Components:

import styled from "styled-components";

const Container = styled.div`
  color: blue;
  font-size: 20px;
`;

<Container>Hello</Container>;

40. Giải thích cách sử dụng CSS Modules trong React

CSS Modules giúp tránh xung đột tên class bằng cách scope CSS locally.

Tạo file CSS Module:

/* App.module.css */
.container {
  color: blue;
  font-size: 20px;
}

.title {
  font-weight: bold;
}

Sử dụng trong component:

import styles from "./App.module.css";

function App() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello</h1>
    </div>
  );
}

Lợi ích:

• ✅ No naming conflicts
• ✅ Scoped CSS
• ✅ Reusable styles
• ✅ Better maintainability

Tổng kết

Đây là 40 câu hỏi phỏng vấn ReactJS từ cơ bản đến nâng cao thường gặp nhất.

Checklist chuẩn bị phỏng vấn React:

• [ ] Hiểu rõ JSX và Virtual DOM
• [ ] Nắm vững Components (Class & Functional)
• [ ] Thành thạo State và Props
• [ ] Biết cách handle Events
• [ ] Hiểu Lifecycle methods / Hooks
• [ ] Nắm Redux basics (nếu yêu cầu)
• [ ] Biết React Router
• [ ] Thành thạo styling methods
• [ ] Practice coding challenges
• [ ] Build demo projects

Tips phỏng vấn React:

✅ Hiểu concepts, không chỉ nhớ syntax
✅ Practice hands-on coding
✅ Build real projects
✅ Stay updated với React mới nhất
✅ Prepare questions để hỏi interviewer

Tài nguyên học tập React

📚 Documentation:

• React Official Docs
• React Tutorial

🎥 Video Courses:

• freeCodeCamp React Course
• Traversy Media React Crash Course
• The Net Ninja React Tutorial

💻 Practice:

• CodeSandbox
• StackBlitz
• LeetCode

📖 Books:

• "Learning React" by Alex Banks & Eve Porcello
• "React Up & Running" by Stoyan Stefanov

Bạn cần hỗ trợ chuẩn bị phỏng vấn React hoặc học React?

📞 Hotline: 0947577892 (Zalo)
🌐 Website: hotrolaptrinh.com
💼 Email: khoilam.dev@gmail.com

Chúc bạn thành công chinh phục buổi phỏng vấn ReactJS! 🚀