🔄 React Core

Re-render
Lifecycle & Performance

🚀 Hiểu sâu về cơ chế re-render trong React - khi nào component render lại, tại sao và cách tối ưu hóa performance cho ứng dụng của bạn

Từ cơ bản đến nâng cao với demo thực tế và performance tips
🔄

Re-render là gì?

Hiểu về lifecycle và cơ chế render của React

Re-render là quá trình React thực thi lại function component hoặc gọi lại render method của class component để tạo ra Virtual DOM mới và so sánh với Virtual DOM cũ để cập nhật UI.

🔥 Khi nào component re-render?

  • 📊State thay đổi (useState, useReducer)
  • 📦Props thay đổi từ parent
  • 🎯Context value thay đổi
  • 👨‍👩‍👦Parent component re-render
  • 🔄forceUpdate() được gọi

⚡ Render cycle

  • 🎬Trigger render
  • 🎨Render component
  • 🔍Reconciliation (diffing)
  • 💻Commit to DOM
render-basics.tsxtsx