Xin chào mọi người, đây sẽ lại là một bài viết chia sẻ về ReactJs :V.
Khi làm việc với 1 project từ khi còn rất bé đến khi source code trở nên lớn hơn, thì mình thấy việc tối ưu source code là điều rất quan trọng. Đơn giản bởi vì nó ảnh hưởng trực tiếp đến quá trình sử dụng của người dùng. Thử tưởng tượng 1 webside khi bạn phải khó chịu về việc đợi chờ nó load khi đang sử dụng, hay bạn cảm thấy nó quá nặng và gây lag máy thì có muốn sử dụng nó nữa hay không?
Quá trình tối ưu là 1 quá trình lớn và cần chỉnh sửa code khá nhiều, hoặc có thể là phải cấu tạo lại toàn bộ. Tuy nhiên rất nhiều người có thể chưa biết đến 1 thứ rất đơn giản nhưng lại có ảnh hưởng rất lớn đến quá trình tối ưu. Đó chính là cách import compoment như thế nào. Bài viết này mình sẽ chia sẻ về vấn đề này và cách mà mình đang sử dụng để import 1 compoment, hay là 1 function.
Điểm lại một chút về render của ReactJs và Nextjs
Về mặt chung thì Reactjs và Nextjs sẽ đều có cơ chế render theo thứ tự để chuyển đổi ra file Js và Html rồi trả về hiện thị trên client (browsers). NextJs thì có thêm SSR và SGR, tuy nhiên mình sẽ không đề cập rõ vấn đề này ở đây vì khá lạc về vấn đề chính.
Như vậy có nghĩa là với mỗi page của bạn khi render sẽ được đọc và chuyển đổi toàn bộ trong lần load đầu tiên. Đó cũng là lý giải cho việc bạn load quá lâu khi vào page, khi mà rất nhiều file cần đọc và chuyển đổi ra.
Import như nào để 1 function không render khi chưa được gọi?
Để tối ưu quá trình render, rõ ràng chúng ta cần loại bỏ các function hay các compoment chưa cần thiết trong lần load đầu. Nói rõ hơn thì function này phải được thực hiện bởi 1 action cụ thể thì mới cho render.
Cách giải quyết vấn đề này chính là biến compoment hay function này thay vì được import thì sẽ gọi nó dưới dạng 1 arrow function. Khi đó function phải đợi được gọi đến bởi 1 action thì nó mới render. Quá trình re-render vẫn sẽ không thay đổi.
Tại sao không nên lạm dụng import bằng cách khai báo arrow function?
Rõ dàng 1 function mà chỉ chạy khi được gọi thì sẽ gây lỗi trong lần load đầu tiên nếu nó không được gọi tới. Ta nên xác định rõ dàng compoment, function đó sẽ được chạy vào lần đầu tiên hay không rồi mới sử dụng cho đúng trường hợp.
Kết Luận
Quá trình tuy dài hơn nhưng đơn giản để hiểu, nhỏ nhưng thực sự có võ. Thường thì cơ bản nhất chúng ta sẽ sử dụng cách này ở các page để chỉ khi gọi đến router thì page mới render các compoment của nó
