Cải thiện giao diện hook và xử lý lỗi sản xuất

Giới thiệu

Trong quá trình phát triển ứng dụng, việc cải thiện giao diện của các hook là một phần quan trọng giúp tối ưu hóa trải nghiệm lập trình viên. Trong bài viết này, chúng ta sẽ cùng khám phá một ví dụ thực tế liên quan đến cải tiến giao diện của hook useDisableBack, cách mà nó ảnh hưởng đến ứng dụng và những vấn đề phát sinh trong môi trường sản xuất. Đặc biệt, chúng ta sẽ tìm hiểu cách tái thiết kế hook này để đạt được hiệu suất tốt hơn và tránh các lỗi không mong muốn.

Cải thiện giao diện của hook

Trong một buổi đánh giá mã nguồn, tôi đã phát hiện ra một hook có tên là useDisableBack được sử dụng như sau:

useDisableBack(true, () => {
  if (isOpen) {
    handleClose();
  }
});

Mục đích của hook

Hook này được thiết kế để giải quyết hai vấn đề chính:

• Khi modal đang mở, nó sẽ vô hiệu hóa chức năng quay lại của trình duyệt và đóng modal (thực hiện handleClose).
• Khi modal đóng, nó cho phép người dùng thực hiện chức năng quay lại của trình duyệt.

Thiết kế ban đầu

Theo mã nguồn, hook này có giao diện như sau:

useDisableBack(enabled: boolean, onBackPress: () => void)

Khi enabled là true, nó sẽ không thực hiện quay lại và gọi callback. Ngược lại, nếu enabled là false, nó sẽ cho phép quay lại và không gọi callback. Tuy nhiên, tôi gặp khó khăn trong việc hiểu rõ ý nghĩa của tùy chọn enabled. Để làm rõ hơn, tôi đã thảo luận với đồng nghiệp và quyết định tái thiết kế hook với những mục tiêu rõ ràng:

• Tách biệt việc thực hiện quay lại của trình duyệt và việc thực hiện callback.

Tái thiết kế hook

Dựa trên thiết kế của BackHandler trong React Native, hook được tái thiết kế như sau:

useBackHandler(handleBack: () => 'block' | void);

Ưu điểm của thiết kế mới

So với useDisableBack, thiết kế mới có những điểm nổi bật sau:

• Sử dụng kiểu trả về block | void thay vì boolean, giúp người dùng dễ dàng hiểu được hành vi của hook hơn.
• Rõ ràng trong việc phân chia hành động giữa việc thực hiện quay lại của trình duyệt và việc thực hiện callback do người dùng định nghĩa.

Dưới đây là ví dụ về cách sử dụng hook đã được tái thiết kế:

useBackHandler(() => {
  if (isOpen) {
    handleClose();
    return 'block';
  }
});

Đánh giá về hiệu suất

Với việc tách biệt rõ ràng giữa các hành động, mã nguồn trở nên dễ đọc hơn và dễ bảo trì hơn. Các nhà phát triển có thể nhanh chóng nhận diện được khi nào callback được thực hiện và khi nào quay lại của trình duyệt bị chặn thông qua giá trị trả về (block hoặc undefined).

Vấn đề trong môi trường sản xuất

Chỉ hai ngày sau khi tái thiết kế, tôi nhận được phản hồi từ một đồng nghiệp rằng việc sử dụng hook mới đã gây ra sự cố trong điều hướng trang. Tôi đã thực hiện kiểm tra chất lượng (QA) trên nhiều kịch bản nhưng không nhận ra vấn đề thực sự.

Kịch bản gặp vấn đề

1. Tại trang sử dụng useBackHandler(), ví dụ naver.com/a, người dùng cố gắng điều hướng đến trang khác, ví dụ naver.com/b.
2. Các thành phần của trang bị hủy bỏ (unmount) và hàm cleanup của useBackHandler được thực thi. Trong quá trình này, history.back() được gọi.
3. Người dùng bị quay trở lại naver.com/a, và không thể điều hướng đến trang khác.

Người dùng ở lại trang naver.com/a đã gặp khó khăn và cảm thấy không thoải mái khi không thể truy cập các trang khác.

Giải thích về hoạt động của useBackHandler

Dưới đây là mã nguồn cơ bản của useBackHandler:

function useBackHandler(onBackPress) {
  useEffect(() => {
    const handleBack = () => {
      history.pushState(null, '', '');
    }

    window.addEventListener('popstate', handleBack);

    return () => {
      window.removeEventListener('popstate', handleBack);
      history.back(); // đây là nguyên nhân gây ra vấn đề!
    }
  }, [onBackPress]);
}

Vấn đề chính nằm ở việc gọi history.back() trong hàm cleanup, dẫn đến việc người dùng bị quay trở lại trang trước đó ngay khi thực hiện điều hướng.

Đối sách

Hiện tại, tôi đã vô hiệu hóa useBackHandler và lên kế hoạch thực hiện kiểm tra chất lượng một lần nữa. Điều này nhắc nhở tôi rằng việc hiểu rõ mã nguồn trước khi triển khai là rất quan trọng. Thực hiện QA là cần thiết, nhưng việc kiểm tra mã nguồn cũng không kém phần quan trọng để tránh những sự cố đáng tiếc trong tương lai.

Các thực tiễn tốt nhất

• Ghi chú rõ ràng: Khi viết mã, hãy chắc chắn rằng bạn đã ghi chú đầy đủ để người khác (và cả bản thân bạn sau này) có thể hiểu rõ chức năng của từng đoạn mã.
• Thực hiện kiểm tra: Luôn luôn kiểm tra các thay đổi trong môi trường phát triển và thử nghiệm trước khi đưa vào sản xuất.
• Phân tách rõ ràng: Tách biệt các hành động trong mã để đảm bảo rằng mỗi chức năng chỉ thực hiện một nhiệm vụ cụ thể.

Các lỗi phổ biến

• Thiếu kiểm tra: Không thực hiện kiểm tra kỹ lưỡng có thể dẫn đến những lỗi nghiêm trọng khi triển khai.
• Không hiểu rõ mã nguồn: Thiếu sự hiểu biết về mã nguồn có thể dẫn đến những quyết định sai lầm trong thiết kế.

Mẹo hiệu suất

• Sử dụng các công cụ kiểm tra: Sử dụng các công cụ như React DevTools để theo dõi hiệu suất của các hook và component.
• Tối ưu hóa mã: Đảm bảo mã của bạn không có các đoạn mã thừa và được tối ưu hóa để chạy hiệu quả hơn.

Kết luận

Qua trải nghiệm này, tôi đã học được rằng việc cải thiện giao diện của hook không chỉ giúp nâng cao trải nghiệm lập trình viên mà còn tránh được nhiều vấn đề trong quá trình phát triển ứng dụng. Hãy luôn đảm bảo rằng bạn hiểu rõ mã nguồn trước khi triển khai và thực hiện kiểm tra chất lượng một cách cẩn thận. Nếu bạn có bất kỳ câu hỏi nào về cải thiện giao diện của hook hay các vấn đề liên quan, hãy để lại câu hỏi bên dưới!

FAQ

1. Tại sao cần phải cải thiện giao diện của hook?

Cải thiện giao diện giúp mã dễ đọc hơn, dễ bảo trì hơn và giảm thiểu lỗi.

2. Làm thế nào để kiểm tra các thay đổi trong mã?

Bạn có thể sử dụng các công cụ kiểm tra tự động hoặc kiểm tra thủ công trên môi trường phát triển trước khi đưa vào sản xuất.

3. Có công cụ nào giúp theo dõi hiệu suất của hook không?

Có, bạn có thể sử dụng React DevTools để theo dõi hiệu suất và hành vi của các hook trong ứng dụng của bạn.