Pham Quang Hung

Do đây là functional component nên hàm handleScroll sẽ có closure trên ScrollLoadMore (tức nó ghi nhớ giá trị của scope bên ngoài lúc đc khởi tạo => khi này state là init)

Vậy nên bạn cần attach/remove listener mỗi khi state thay đổi.

Đơn giản là tạo 1 hook nữa như sau (nhớ xóa cái cũ nhé :v):

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll); // xóa listener đi để tránh memory leak
    };
  }, [state]);

bạn dùng host nào và gói cước ra sao?

nếu mà chạy heroku free thì con dyno của nó sẽ sleep sau 1 khoảng thời gian nhất định nhé :v, và request đầu tiền sẽ kích hoạt cái dyno, quá trình khởi động diễn ra trong vài phút.

Lưu vào state thì chỉ ăn vào RAM, nên ảnh hưởng hay ko sẽ tuỳ vào cấu hình máy client. Nếu dữ liệu của bạn toàn là text thì thoải mái, còn nếu là các file media thì khả năng toang.

Còn về performance, thì bạn nên để ý đến các điểm sau thì hơn:

• component của bạn có bị render khi ko cần thiết hay ko (vd như state mới giống hệt state cũ nhưng vẫn re-render, hay là thằng component cha re-render nên hàng loạt các thằng con re-render theo)
• 1 component quá to, render lâu (vd như cái root component ngta hay dùng code-splitting để giảm thời gian init load của trang)

(ngoài ra thì dùng hay ko dùng localStorage là vấn đề về persist data khi bật tắt trang web, do cái localStorage này là đọc ghi trực tiếp ra ổ cứng, nên về mặt lý thuyết là sẽ bị chậm, nên nếu bạn dùng để lưu một vài dữ liệu linh tinh thì ok, còn việc lưu hết vào localStorage thì ko đc khuyến khích, nên sử dụng redux-persist, nó cũng dùng localStorage nhưng mà nó sẽ chọn thời điểm hợp lý để lưu - khôi phục dữ liệu, như vậy thì đỡ ảnh hưởng đến hiệu năng hơn là mình xài trực tiếp localStorage)

1. React Native là để viết mobile app, thường được các startup chuộng hơn vì nó nhanh gọn đỡ tốn kém, còn các công ty lớn thì vẫn sử dụng native app vì hiệu năng nó tốt hơn. Nếu bạn theo hướng web app thì nên skip nó đi và tập trung vào React và Redux. Ổn hay ko thì tuỳ vào nhu cầu của bạn, nếu bạn theo thuần FE thì câu trả lời là không thể, còn nếu chạy fullstack với chủ lực là BE thì hoàn toàn ok.

2. Ngoài React ra thì dạo này có xu hướng sử dụng Vue cho các dự án cỡ nhỏ, dùng được cả 2 thì càng tốt vì khi biết React rồi học Vue sẽ rất đơn giản. Angular thì hay đc xài vào các dự án tổ chảng, dài hạn...

3. Tuỳ quy mô, to thì React, nhỏ nhỏ thì dùng Vue. (ko phải là Vue yếu kém hơn, mà là người có kinh nghiệm dùng Vue lâu năm khá hiếm, t chưa gặp ông nào =)))

lỗi permission kìa bạn :v

có vẻ bạn đang chạy trên windows, hãy thử bật vscode bằng quyền admin (chuột phải -> run as administrator)

còn nếu linux thì cứ nã sudo vào là hết lằng nhằng =))

chúc may mắn!

Việc bạn đang test là function test rồi chứ ko còn là unit test nữa nhé. Để viết FT thì hãy sử dụng https://github.com/teamcapybara/capybara

Các vấn đề chính trong 1 dự án react bạn sẽ gặp gồm:

• xử lí các luồng logic async phưc tạp (business của khách càng lằng nhằng thì cái này càng rối và nhu cầu dùng redux-saga càng nhiều)
• tối ưu hiệu năng (tối giản số lượng render, cache hợp lý, các kĩ thuật delay render, code splitting các kiểu)
• nếu bạn trực tiếp quản lý project thì cần biết config cả webpack
• bắt kịp trend (từ version 16.8 trở đi có rất nhiều tính năng mới mà nó ảnh hưởng đến cách code và các best practices, như hook chẳng hạn)
• unit test (cộng đồng testing của react vừa mới qua biến động lớn, chuyển từ enzyme sang @testing-library/react). Code ở client có tần suất thay đổi nhiều hơn code trên server rất nhiều, bạn sẽ phải refactor code thường xuyên nên việc test ko phải là optional nữa :v

Về "strong js", bản chất OOP javascript ko hề giống như những ngôn ngữ khác (nguyên nhân là do cái engine của nó), chi tiết bạn có thể đọc thêm ở series You Don't Know Javascript. Nhưng nhìn chung, để làm các việc cơ bản đc thì bạn chỉ cần có mấy kĩ năng sau là ok:

• biết dùng "this" và xử lí các trường hợp this bị mất binding
• thoải mái với việc sử dụng callback và biết dùng promise
• hiểu cơ chế closure và hoisting