Mental Model useEffect: Đồng Bộ Dữ Liệu & Cleanup Chuẩn

Từ bỏ thói quen coi useEffect là Lifecycle methods; học cách dùng useEffect để đồng bộ với hệ thống bên ngoài và xử lý race condition.

Môi trường thực hành:

React v19.2 (Client Sandbox)

ESM CDN · Hot Reload

React Playground

React v19.2

Interactive Client Sandbox · Live Hot Reload

6 files

src/main.tsx

Entry File

Instructions:Thực hành kết nối đa file: File `App.tsx` nạp Component `TimerWidget.tsx` và custom hook `useTimer.ts`. Hãy thử bấm nút 'Bắt đầu' / 'Dừng' và quan sát console log hiển thị dọn dẹp (cleanup) effect khi component unmount hoặc timer dừng.

File Tree:

index.html

src/main.tsxmain

src/App.tsx

src/components/TimerWidget.tsx

src/hooks/useTimer.ts

src/index.css

Supports React, Lucide Icons, TypeScript & Hot-Reload.

React Hooks Mastery

intermediate

18 phút

#useEffect

#Synchronization

#Cleanup

#Race Conditions