Giới thiệu

Trong bài viết này, chúng ta sẽ cùng nhau thực hiện một bài tập lập trình thú vị, đó là tạo một hook trong React để kiểm tra xem đây có phải là lần render đầu tiên hay không. Việc này rất hữu ích khi bạn muốn thực hiện một số tác vụ chỉ trong lần render đầu tiên của một component.

Mục tiêu

Chúng ta sẽ tạo ra một hook có tên là useIsFirstRender, giúp xác định liệu component hiện tại đang ở lần render đầu tiên hay không. Để thực hiện điều này, chúng ta sẽ sử dụng React hooks như useEffect và useRef.

Cấu trúc Bài Tập

Mã Khởi Tạo

Trước tiên, chúng ta cần mã khởi tạo cho hook của mình. Dưới đây là mã mẫu:

export function useIsFirstRender(): boolean {
  // code của bạn ở đây
}

// Nếu bạn muốn thử nghiệm mã của mình, hãy xuất component App như sau:
// export function App() {
//   return <div>ứng dụng của bạn</div>
// }

Tạo Hook useIsFirstRender

Để giải quyết bài toán này, chúng ta cần tạo một biến để quản lý trạng thái, và gán cho nó một giá trị mặc định. Chúng ta sẽ sử dụng useRef vì nó giữ giá trị giữa các lần render mà không làm cho component render lại.

const firstRender = useRef(true);

Giá trị mặc định là true, vì khi chúng ta chạy ứng dụng lần đầu tiên, đó chính là lần render đầu tiên. Các lần render sau sẽ là false.

Thiết Lập Giá Trị Render

Chúng ta cần một hàm để thiết lập giá trị render:

useEffect(() => {
   firstRender.current = false;
}, []);
return firstRender.current;

Hàm useEffect sẽ chạy một lần duy nhất khi component được mount, và nó sẽ đặt firstRender.current thành false sau lần render đầu tiên.

Hiển Thị Kết Quả

Để kiểm tra xem chúng ta đã thực hiện đúng hay chưa, chúng ta sẽ hiển thị một thông báo mỗi khi ứng dụng render:

<div>
{firstRender.current ? "Lần render đầu tiên" : "Không phải lần render đầu tiên"}
</div>

Chúng ta đã sử dụng toán tử ba ngôi (ternary operator) để hiển thị thông điệp đầu tiên nếu firstRender là true, hoặc thông điệp thứ hai nếu không phải.

Mã Hoàn Chỉnh

Dưới đây là mã hoàn chỉnh cho hook và component App:

import React, { useRef, useEffect } from "react";

export function useIsFirstRender(): boolean {
  const firstRender = useRef(true);
  useEffect(() => {
    firstRender.current = false;
  }, []);
  return firstRender.current;
}

// Component App
export function App() {
  const isFirstRender = useIsFirstRender();

  return (
      <div>
       {isFirstRender ? "Lần render đầu tiên" : "Không phải lần render đầu tiên"}
      </div>
    );
}

Thực Hành Tốt Nhất

• Sử dụng useRef: Đảm bảo sử dụng useRef thay vì useState trong trường hợp này để tránh render lại không cần thiết.
• Kiểm tra kỹ lưỡng: Đừng quên kiểm tra các trường hợp biên để đảm bảo rằng hook hoạt động đúng trong mọi tình huống.

Những Cạm Bẫy Thường Gặp

• Quên gọi useEffect: Nếu bạn quên gọi useEffect, giá trị của firstRender sẽ không được cập nhật đúng cách.
• Không sử dụng useRef: Sử dụng useState có thể gây ra render lại không cần thiết, làm cho hiệu năng giảm.

Mẹo Tối Ưu Hiệu Suất

• Giảm thiểu số lần render: Sử dụng useRef để tránh render lại khi không cần thiết.
• Lưu trữ trạng thái một cách hợp lý: Chỉ lưu trữ những gì cần thiết để tối ưu hóa hiệu suất.

Câu Hỏi Thường Gặp (FAQ)

1. useIsFirstRender có thể sử dụng trong component nào không?

Có, bạn có thể sử dụng hook này trong bất kỳ component nào, miễn là component đó sử dụng React hooks.

2. Có cách nào khác để kiểm tra lần render đầu tiên không?

Có thể, nhưng việc sử dụng useRef là cách đơn giản và hiệu quả nhất cho trường hợp này.

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu cách tạo một hook đơn giản để kiểm tra xem đây có phải là lần render đầu tiên của component hay không. Việc sử dụng hook này sẽ giúp bạn quản lý trạng thái và thực hiện các tác vụ cần thiết một cách hiệu quả. Hãy thử nghiệm và áp dụng vào dự án của bạn ngay hôm nay!

Hành động ngay

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với đồng nghiệp và bạn bè trong cộng đồng lập trình viên của bạn!