React Events, State Modeling & Lifting State

Xử lý event đúng cách, thiết kế state tối thiểu và nâng state lên owner chung khi nhiều component cần đồng bộ.

Core Mental Model

Event mô tả điều vừa xảy ra; state mô tả UI cần ghi nhớ. Mỗi mẩu state nên có một owner rõ ràng. Khi hai component phải luôn đồng bộ, đặt state ở ancestor chung gần nhất và truyền value/callback xuống.

Key Takeaways & Principles

Truyền function cho event handler (`onClick={handleClick}`), không gọi function ngay trong render (`onClick={handleClick()}`).

Chỉ lưu state tối thiểu; dữ liệu có thể tính từ props/state hiện tại nên được tính trong render thay vì lưu bản sao.

Lifting state tạo một source of truth cho các component cần phối hợp; callback prop truyền ý định thay đổi ngược lên owner.

Dùng functional updater khi state mới phụ thuộc state trước: `setCount(count => count + 1)`.

React Core Foundations

beginner

20 phút

#Events

#State Modeling

#Lifting State

#Single Source of Truth