React nâng cao Hiểu React từ bên trong

Name: React Nâng Cao
Price: 299000 VND
Availability: InStock

Component của bạn re-render 47 lần mỗi khi gõ phím. Bạn dùng useMemo khắp nơi nhưng app vẫn chậm. Vì bạn đang tối ưu mà không hiểu engine bên dưới. Khoá này thay đổi điều đó.

23 bài học

~8 giờ học

Intermediate

Thử ngay bài học miễn phí Xem chương trình chi tiết

Hoặc đăng ký toàn bộ khoá, 299.000đ

Nỗi đau

Tại sao bạn cần khoá này

Tình huống thực tế

Bạn build một form 10 fields. Gõ 1 ký tự vào ô đầu tiên, cả 10 fields re-render. Strict Mode nhân đôi. Có event handler gọi setState 2 lần? Mỗi lần gõ phím = 6 lần gọi hàm component cho MỖI field. Tổng cộng: 60 lần render cho 1 ký tự.

Bạn nghe ai đó nói 'bọc component bằng React.memo đi'. Bạn làm theo. App vẫn chậm. Profiler vẫn đỏ. Vì mỗi lần render, bạn lại tạo mới prop object như filters={{ status: 'active' }}. Với React, {} !== {} theo reference, nên prop vẫn bị xem là đổi. Kết quả: component con vẫn re-render, memo gần như vô dụng.

Lời hứa

Khoá này không dạy thêm hooks hay patterns mới. Khoá này vạch React ra, cho bạn nhìn thấy engine bên trong: Fiber tree, reconciliation algorithm, scheduler, hooks linked list. Và từ đó, các quyết định về performance, architecture hay state management sẽ bớt cảm tính hơn, bạn sẽ hiểu vì sao mình chọn cách này thay vì cách khác.

Tình huống thực tế

Lời hứa

Cuộn để khám phá

Lợi ích

Sau khoá này, bạn sẽ...

Học theo nhịp độ của riêng bạn

Không cần chờ lớp học trực tiếp, bạn có thể chủ động đọc, thực hành và xem lại bài học bất cứ lúc nào để hiểu bài sâu hơn.

.command

find...

PasteCopy

Kiến thức thực tế từ giảng viên

Nội dung khoá học được xây dựng từ kinh nghiệm phát triển sản phẩm thực tế, tập trung vào những kỹ thuật React được sử dụng trong các dự án.

Chuẩn bị kỹ năng phỏng vấn

Tìm hiểu các câu hỏi React phổ biến trong phỏng vấn, luyện tập cách giải quyết vấn đề và trình bày tư duy kỹ thuật với nhà tuyển dụng.

Lộ trình học rõ ràng và thực tế

Chương trình được thiết kế theo lộ trình từ nền tảng đến nâng cao, giúp bạn nắm vững kiến thức React và áp dụng vào dự án thực tế.

Cộng đồng developer hỗ trợ lâu dài

Tham gia cộng đồng học tập để trao đổi kiến thức, chia sẻ tài liệu và nhận hỗ trợ từ giảng viên cũng như các developer khác.

Học theo nhịp độ của riêng bạn

Không cần chờ lớp học trực tiếp, bạn có thể chủ động đọc, thực hành và xem lại bài học bất cứ lúc nào để hiểu bài sâu hơn.

.command

find...

PasteCopy

Kiến thức thực tế từ giảng viên

Nội dung khoá học được xây dựng từ kinh nghiệm phát triển sản phẩm thực tế, tập trung vào những kỹ thuật React được sử dụng trong các dự án.

Chuẩn bị kỹ năng phỏng vấn

Tìm hiểu các câu hỏi React phổ biến trong phỏng vấn, luyện tập cách giải quyết vấn đề và trình bày tư duy kỹ thuật với nhà tuyển dụng.

Lộ trình học rõ ràng và thực tế

Chương trình được thiết kế theo lộ trình từ nền tảng đến nâng cao, giúp bạn nắm vững kiến thức React và áp dụng vào dự án thực tế.

Cộng đồng developer hỗ trợ lâu dài

Tham gia cộng đồng học tập để trao đổi kiến thức, chia sẻ tài liệu và nhận hỗ trợ từ giảng viên cũng như các developer khác.

Giải pháp

Một bài học, 7 cách tiếp cận

Dù bạn học SQL, System Design hay DevOps, mọi bài học trên Sydexa đều được xây theo cùng một triết lý

Video

Video animation ngắn, không phải lecture 3 tiếng

Quiz

Quiz ngay sau mỗi phần, khóa kiến thức lại

Text

Text súc tích, đào sâu bản chất WHY

Interactive

Tự tay thử, không chỉ ngồi xem

Auto Animation

Animation tự chạy minh hoạ trực quan

Code

Code sandbox thật, thực hành ngay

Flash card

Ôn tập cuối bài, ghi nhớ lâu dài

0:00/0:00

Khởi động nhanh

1.React dùng `const [count, setCount] = useState(0)`, bạn có biết cú pháp ngoặc vuông `[count, setCount]` đó là kỹ thuật gì của JavaScript thuần không?

1/1

JavaScript chặn rendering như thế nào?

Từ quy trình 6 giai đoạn rendering ở trên, có vẻ như mọi thứ rất “thông thoáng”. NHƯNG, quá trình render này bị CẮT NGANG nếu trình duyệt gặp thẻ <script>.

Đây chính xác là lý do React tồn tại! React dùng Virtual DOM để tính toán sự khác biệt trước, rồi chỉ cập nhật những phần thực sự thay đổi, giảm thiểu Reflow/Repaint tối đa.

Stage 5: Reflow vs Repaint

sydexa.com

Header

Sidebar

Main

Footer

Cấu trúc URL

https://www.sydexa.com:443/blog/reactjs/search?docid=123&hl=vi#state

mutation-vs-immutability.js

JavaScript

12345678910111213

// Mutation: cùng reference, React không nhận ra
const user = { name: 'Minh', age: 25 };
const sameUser = user;
sameUser.age = 26;
console.log('Cùng reference?', user === sameUser);
console.log('user.age bị đổi:', user.age);

// Immutability: tạo bản mới, khác reference
const user2 = { name: 'Minh', age: 25 };
const newUser = { ...user2, age: 26 };
console.log('Khác reference?', user2 !== newUser);
console.log('user2.age:', user2.age);
console.log('newUser.age:', newUser.age);

var vs let/const: khác biệt scope?

Nhấp vào thẻ để lật

var = function scope, let/const = block scope

Nhấp vào thẻ để lật lại

1/6

Video

Video animation ngắn, không phải lecture 3 tiếng

Quiz

Quiz ngay sau mỗi phần, khóa kiến thức lại

Text

Text súc tích, đào sâu bản chất WHY

Interactive

Tự tay thử, không chỉ ngồi xem

Auto Animation

Animation tự chạy minh hoạ trực quan

Code

Code sandbox thật, thực hành ngay

Flash card

Ôn tập cuối bài, ghi nhớ lâu dài

“7 loại content xen kẽ liên tục, bạn không bao giờ ngồi thụ động quá 3 phút”

Nội dung

Chương trình học

Khoá này bao gồm:

31 Video

101 Quiz

11 Interactive

16 Code Sandbox

24 Flashcard

58 Auto Animation

Udemy React course

Chỉ xem video thụ động

Không có môi trường thực hành

Thiếu tương tác và phản hồi

Học xong không áp dụng được

Code trực tiếp trên sandbox

Quiz kiểm tra ngay sau mỗi phần

Interactive demo (system, tree)

Flashcard ghi nhớ kiến thức

Nền tảng JavaScript cho React

URL, DNS và rendering pipeline: cách trình duyệt biến code thành pixel

Objects, prototypes, spread và immutability

Array methods, async/await và Event Loop

ES Modules và những pattern JavaScript mà React dùng hàng ngày

Nền tảng JavaScript cho React

URL, DNS và rendering pipeline: cách trình duyệt biến code thành pixel

Objects, prototypes, spread và immutability

Array methods, async/await và Event Loop

ES Modules và những pattern JavaScript mà React dùng hàng ngày

TypeScript

8 kiểu built-in, mảng, tuple và function overloading

Bộ tứ đặc biệt: void / never / any / unknown và exhaustive checking

Type inference, narrowing, literal widening, union & intersection

Interface vs type alias, generic và generic constraints

4 operator nền tảng (typeof / keyof / in / infer), Index Types, Mapped Types

11 utility types tích hợp sẵn và cấu hình tsconfig chuẩn

TypeScript

8 kiểu built-in, mảng, tuple và function overloading

Bộ tứ đặc biệt: void / never / any / unknown và exhaustive checking

Type inference, narrowing, literal widening, union & intersection

Interface vs type alias, generic và generic constraints

4 operator nền tảng (typeof / keyof / in / infer), Index Types, Mapped Types

11 utility types tích hợp sẵn và cấu hình tsconfig chuẩn

Kiến thức React Cơ Bản

SSR vs CSR, SPA vs MPA

Imperative vs declarative paradigm

Cấu trúc dự án React và Class Component

Lịch sử tiến hóa của React qua các phiên bản

Kiến thức React Cơ Bản

SSR vs CSR, SPA vs MPA

Imperative vs declarative paradigm

Cấu trúc dự án React và Class Component

Lịch sử tiến hóa của React qua các phiên bản

Reconciliation & Fiber

Virtual DOM và Reconciliation algorithm (O(n³) → O(n))

Fiber architecture và Double Buffering

Stack Reconciler vs Fiber, Fiber Node anatomy

Work Loop, Effect List và Commit Phase

Lane-based Priority và Concurrent Features

Reconciliation & Fiber

Virtual DOM và Reconciliation algorithm (O(n³) → O(n))

Fiber architecture và Double Buffering

Stack Reconciler vs Fiber, Fiber Node anatomy

Work Loop, Effect List và Commit Phase

Lane-based Priority và Concurrent Features

React Hooks

useState, useEffect, useLayoutEffect, useReducer — vì sao chúng hoạt động như vậy

useMemo và useCallback: cache tính toán, giữ reference ổn định

useContext: chia sẻ dữ liệu xuyên tầng

useRef: lưu giá trị không trigger re-render

Những cái bẫy hooks mà senior developer cũng mắc phải

React Hooks

useState, useEffect, useLayoutEffect, useReducer — vì sao chúng hoạt động như vậy

useMemo và useCallback: cache tính toán, giữ reference ổn định

useContext: chia sẻ dữ liệu xuyên tầng

useRef: lưu giá trị không trigger re-render

Những cái bẫy hooks mà senior developer cũng mắc phải

React Forms

Controlled-component trap và lý do chọn React Hook Form

useForm, register, handleSubmit và formState lifecycle

Schema validation với Zod qua zodResolver

Controller cho UI lib, FormProvider, useFieldArray

Schema factory + multi-step form (create / edit)

RHF vs React 19 form action

React Forms

Controlled-component trap và lý do chọn React Hook Form

useForm, register, handleSubmit và formState lifecycle

Schema validation với Zod qua zodResolver

Controller cho UI lib, FormProvider, useFieldArray

Schema factory + multi-step form (create / edit)

RHF vs React 19 form action

Hiệu Năng Front-end

Mental model 'vòng lặp 4 bước' và 5 chỉ số Core Web Vitals (FCP, LCP, CLS, INP, TTFB)

5 tab DevTools: Lighthouse, Performance, Network, Coverage, Memory

5 playbook tối ưu theo từng chỉ số Web Vitals

Lab vs RUM và tích hợp web-vitals library

Decision matrix 'khi nào KHÔNG nên tối ưu'

Hiệu Năng Front-end

Mental model 'vòng lặp 4 bước' và 5 chỉ số Core Web Vitals (FCP, LCP, CLS, INP, TTFB)

5 tab DevTools: Lighthouse, Performance, Network, Coverage, Memory

5 playbook tối ưu theo từng chỉ số Web Vitals

Lab vs RUM và tích hợp web-vitals library

Decision matrix 'khi nào KHÔNG nên tối ưu'

TanStack Virtual

Từ 260,000 DOM nodes đến Virtualization: Windowing là gì

useVirtualizer, useWindowVirtualizer và Grid Virtualization

Patterns nâng cao: horizontal, dynamic, infinite, nested

So sánh react-window vs react-virtuoso vs TanStack Virtual

4 lỗi thường gặp khi dùng virtualization trong production

TanStack Virtual

Từ 260,000 DOM nodes đến Virtualization: Windowing là gì

useVirtualizer, useWindowVirtualizer và Grid Virtualization

Patterns nâng cao: horizontal, dynamic, infinite, nested

So sánh react-window vs react-virtuoso vs TanStack Virtual

4 lỗi thường gặp khi dùng virtualization trong production

TanStack Query

Từ 47 dòng code lặp lại xuống 5 dòng code

useQuery, useMutation, caching, retry và background fetch

Optimistic updates và invalidation

Persist cache, prefetch và infinite queries

Suspense + ErrorBoundary và SSR streaming

TanStack Query

Từ 47 dòng code lặp lại xuống 5 dòng code

useQuery, useMutation, caching, retry và background fetch

Optimistic updates và invalidation

Persist cache, prefetch và infinite queries

Suspense + ErrorBoundary và SSR streaming

Client State Management

Zustand vs useState / Context / Redux — chọn khi nào

Core API (create / set / get), stale closure và immutability

Selective subscription qua selector và useShallow

5 case study: string / array / object / async / computed

Middleware: persist, devtools, immer, subscribeWithSelector

Fiber ↔ External Store: useSyncExternalStore và tearing trong Concurrent Mode

Client State Management

Zustand vs useState / Context / Redux — chọn khi nào

Core API (create / set / get), stale closure và immutability

Selective subscription qua selector và useShallow

5 case study: string / array / object / async / computed

Middleware: persist, devtools, immer, subscribeWithSelector

Fiber ↔ External Store: useSyncExternalStore và tearing trong Concurrent Mode

Bảo Mật Frontend

XSS (Stored, Reflected, DOM-based), CSRF, Clickjacking

Defense in depth: textContent, DOMPurify, CSP, SameSite Cookie, X-Frame-Options

CORS misconfig và Supply Chain attack

Storage leak và bảo vệ dữ liệu phía client

HTTPS + Security Headers, HSTS preload

Bảo Mật Frontend

XSS (Stored, Reflected, DOM-based), CSRF, Clickjacking

Defense in depth: textContent, DOMPurify, CSP, SameSite Cookie, X-Frame-Options

CORS misconfig và Supply Chain attack

Storage leak và bảo vệ dữ liệu phía client

HTTPS + Security Headers, HSTS preload

Hành trình

Lộ trình học

Bạn đang ở đây

Dùng React hàng ngày nhưng hay copy pattern mà không hiểu tại sao

Misconceptions

Phá bỏ những hiểu lầm nguy hiểm nhất về cách React hoạt động

React Internals

Virtual DOM -> Reconciliation -> Fiber

Hiểu bộ máy bên trong từ gốc

Performance

Re-render, memoization, profiling

Biết chính xác app chậm ở đâu và fix

Hooks & State Management

useState, useEffect, useMemo, useCallback, useRef, useContext

Hiểu cách hooks hoạt động để chọn state pattern đúng ngay từ đầu

Data Fetching & Concurrent React

TanStack Query, Suspense, transitions, scheduling

Biết khi nào nên fetch, cache, defer hay ưu tiên update nào trước

Bạn sẽ ở đây

Đọc bất kỳ React codebase nào và hiểu tại sao nó được viết như vậy.

Debug performance bằng data, không bằng cảm tính.

Tự tin ở level Senior Frontend.

Khoá học React

Học sâu cùng Sydexa

Trọn bộ khoá học

299.000đ

Học thử miễn phí

Online, học theo tốc độ của bạn

23 bài giảng chuyên sâu

Nội dung text-based, rõ ràng, dễ ôn tập

Animation giải thích kiến thức trực quan

Interactive code examples để học và thử ngay

Full tài liệu + source code

Certificate sau khi hoàn thành

Đánh giá

Học viên nói gì?

Đỗ Thuỳ Linh

Mid-level React Dev . Startup . 2 năm kinh nghiệm

“Lần đầu tiên mình thực sự hiểu vì sao React lại render lại, chứ trước đây chỉ biết dùng memo hoặc vài mẹo tối ưu cho đỡ lag.

Nguyễn Minh Quân

Frontend Engineer . Fintech . 3 năm kinh nghiệm

“Phần Fiber, Reconciliation và Web Vitals giúp mình nhìn performance bài bản hơn hẳn. Giờ mở Profiler hay DevTools là biết nên đo gì, đọc chỉ số nào và lần ra đúng nút thắt.

Trần Hải Đăng

Fullstack Developer . Agency . 4 năm kinh nghiệm

“Mình đã dùng React 3 năm mà không biết hooks chạy theo linked list. Hiểu internals xong thì mọi thứ từ useEffect đến custom hooks đều make sense hơn nhiều.

Phạm Ngọc Ánh

Junior Frontend Dev . Product Company . 1 năm kinh nghiệm

“Khoá học giải thích rất dễ hiểu, animation minh hoạ trực quan. Mình từ chỗ sợ phỏng vấn React đến tự tin trả lời về Virtual DOM và hooks lifecycle.

Đỗ Thuỳ Linh

Mid-level React Dev . Startup . 2 năm kinh nghiệm

“Lần đầu tiên mình thực sự hiểu vì sao React lại render lại, chứ trước đây chỉ biết dùng memo hoặc vài mẹo tối ưu cho đỡ lag.

Nguyễn Minh Quân

Frontend Engineer . Fintech . 3 năm kinh nghiệm

Trần Hải Đăng

Fullstack Developer . Agency . 4 năm kinh nghiệm

“Mình đã dùng React 3 năm mà không biết hooks chạy theo linked list. Hiểu internals xong thì mọi thứ từ useEffect đến custom hooks đều make sense hơn nhiều.

Đỗ Thuỳ Linh

Mid-level React Dev . Startup . 2 năm kinh nghiệm

“Lần đầu tiên mình thực sự hiểu vì sao React lại render lại, chứ trước đây chỉ biết dùng memo hoặc vài mẹo tối ưu cho đỡ lag.

Nguyễn Minh Quân

Frontend Engineer . Fintech . 3 năm kinh nghiệm

Trần Hải Đăng

Fullstack Developer . Agency . 4 năm kinh nghiệm

“Mình đã dùng React 3 năm mà không biết hooks chạy theo linked list. Hiểu internals xong thì mọi thứ từ useEffect đến custom hooks đều make sense hơn nhiều.

Đỗ Thuỳ Linh

Mid-level React Dev . Startup . 2 năm kinh nghiệm

“Lần đầu tiên mình thực sự hiểu vì sao React lại render lại, chứ trước đây chỉ biết dùng memo hoặc vài mẹo tối ưu cho đỡ lag.

Nguyễn Minh Quân

Frontend Engineer . Fintech . 3 năm kinh nghiệm

Trần Hải Đăng

Fullstack Developer . Agency . 4 năm kinh nghiệm

“Mình đã dùng React 3 năm mà không biết hooks chạy theo linked list. Hiểu internals xong thì mọi thứ từ useEffect đến custom hooks đều make sense hơn nhiều.

Đỗ Thuỳ Linh

Mid-level React Dev . Startup . 2 năm kinh nghiệm

“Lần đầu tiên mình thực sự hiểu vì sao React lại render lại, chứ trước đây chỉ biết dùng memo hoặc vài mẹo tối ưu cho đỡ lag.

Nguyễn Minh Quân

Frontend Engineer . Fintech . 3 năm kinh nghiệm

Trần Hải Đăng

Fullstack Developer . Agency . 4 năm kinh nghiệm

“Mình đã dùng React 3 năm mà không biết hooks chạy theo linked list. Hiểu internals xong thì mọi thứ từ useEffect đến custom hooks đều make sense hơn nhiều.

Phạm Ngọc Ánh

Junior Frontend Dev . Product Company . 1 năm kinh nghiệm

“Khoá học giải thích rất dễ hiểu, animation minh hoạ trực quan. Mình từ chỗ sợ phỏng vấn React đến tự tin trả lời về Virtual DOM và hooks lifecycle.

Lê Văn Thành

Senior Developer . E-commerce . 5 năm kinh nghiệm

“TanStack Virtual và TanStack Query là 2 phần mình thấy giá trị nhất. Áp dụng ngay vào dự án đang chạy, load time giảm đáng kể.

Vũ Phương Thảo

Frontend Lead . SaaS . 4 năm kinh nghiệm

“Nội dung rất thực tế, không lý thuyết suông. Phần re-render optimization giúp team mình refactor lại dashboard phức tạp mà không cần rewrite từ đầu.

Phạm Ngọc Ánh

Junior Frontend Dev . Product Company . 1 năm kinh nghiệm

“Khoá học giải thích rất dễ hiểu, animation minh hoạ trực quan. Mình từ chỗ sợ phỏng vấn React đến tự tin trả lời về Virtual DOM và hooks lifecycle.

Lê Văn Thành

Senior Developer . E-commerce . 5 năm kinh nghiệm

“TanStack Virtual và TanStack Query là 2 phần mình thấy giá trị nhất. Áp dụng ngay vào dự án đang chạy, load time giảm đáng kể.

Vũ Phương Thảo

Frontend Lead . SaaS . 4 năm kinh nghiệm

“Nội dung rất thực tế, không lý thuyết suông. Phần re-render optimization giúp team mình refactor lại dashboard phức tạp mà không cần rewrite từ đầu.

Phạm Ngọc Ánh

Junior Frontend Dev . Product Company . 1 năm kinh nghiệm

“Khoá học giải thích rất dễ hiểu, animation minh hoạ trực quan. Mình từ chỗ sợ phỏng vấn React đến tự tin trả lời về Virtual DOM và hooks lifecycle.

Lê Văn Thành

Senior Developer . E-commerce . 5 năm kinh nghiệm

“TanStack Virtual và TanStack Query là 2 phần mình thấy giá trị nhất. Áp dụng ngay vào dự án đang chạy, load time giảm đáng kể.

Vũ Phương Thảo

Frontend Lead . SaaS . 4 năm kinh nghiệm

“Nội dung rất thực tế, không lý thuyết suông. Phần re-render optimization giúp team mình refactor lại dashboard phức tạp mà không cần rewrite từ đầu.

Phạm Ngọc Ánh

Junior Frontend Dev . Product Company . 1 năm kinh nghiệm

“Khoá học giải thích rất dễ hiểu, animation minh hoạ trực quan. Mình từ chỗ sợ phỏng vấn React đến tự tin trả lời về Virtual DOM và hooks lifecycle.

Lê Văn Thành

Senior Developer . E-commerce . 5 năm kinh nghiệm

“TanStack Virtual và TanStack Query là 2 phần mình thấy giá trị nhất. Áp dụng ngay vào dự án đang chạy, load time giảm đáng kể.

Vũ Phương Thảo

Frontend Lead . SaaS . 4 năm kinh nghiệm

“Nội dung rất thực tế, không lý thuyết suông. Phần re-render optimization giúp team mình refactor lại dashboard phức tạp mà không cần rewrite từ đầu.

Sẵn sàng học sâu cùng Sydexa?

Đội ngũ của chúng tôi sẽ giúp bạn lựa chọn lộ trình học phù hợp.

Giải đáp

Câu hỏi thường gặp

1. Khoá học này là Online hay Offline?

Khoá học 100% online, bạn học theo tốc độ của riêng mình. Nội dung bao gồm video, bài giảng text, code examples và bài tập thực hành. Bạn có thể xem lại bất cứ lúc nào.

2. Tôi chưa biết gì cả liệu có học được không?

3. Chứng chỉ và bằng cấp sau khoá học?

4. Quy trình đăng ký và vào học như thế nào?

Khám phá thêm

Các khoá học khác

SQL Nâng Cao

Từ Full Table Scan đến B+Tree, hiểu database đến tận xương

Xem khoá

System Design

Coming Soon

Hiểu cách hệ thống hoạt động end-to-end. Frontend dev cần biết điều này để design scalable solutions.

Sắp ra mắt

Backend Deep Dive

Coming Soon

Hiểu backend mà frontend đang gọi API đến. Caching, queue, database. Trở thành full-stack thực sự.

Sắp ra mắt

// Mutation: cùng reference, React không nhận ra const user = { name: 'Minh', age: 25 }; const sameUser = user; sameUser.age = 26; console.log('Cùng reference?', user === sameUser); console.log('user.age bị đổi:', user.age); // Immutability: tạo bản mới, khác reference const user2 = { name: 'Minh', age: 25 }; const newUser = { ...user2, age: 26 }; console.log('Khác reference?', user2 !== newUser); console.log('user2.age:', user2.age); console.log('newUser.age:', newUser.age);