Nâng cao hiệu suất ứng dụng React với các kỹ thuật nâng cao

Bài viết này sẽ chia sẻ cho các bạn một số khái niệm quan trọng trong React mà nên được nắm rõ:

1. React Hooks

React Hooks là một trong những tính năng mạnh mẽ được giới thiệu trong React 16.8, cho phép bạn sử dụng state và lifecycle methods mà không cần viết class component. Hooks giúp code dễ đọc, dễ bảo trì và tái sử dụng hơn. Một số Hook phổ biến bao gồm: useState để quản lý state, useEffect để xử lý side effects, useContext để truy cập Context API và useRef để thao tác với DOM.

2. Render Props Pattern

Một cách khác để làm cho các thành phần có thể tái sử dụng được là sử dụng render prop pattern . Một render prop là một prop trên một thành phần, giá trị của nó là một hàm trả về một phần tử JSX . Bản thân thành phần không render bất cứ thứ gì ngoài render prop. Thay vào đó, thành phần chỉ cần gọi render prop, thay vì triển khai logic render của riêng nó .

3. Suspense

Suspense là một tính năng cho phép hiển thị nội dung chờ trong khi component con đang được tải. Tính năng này đặc biệt hữu ích khi bạn cần tải dữ liệu từ server hoặc xử lý các tác vụ mất nhiều thời gian. Suspense giúp cải thiện trải nghiệm người dùng bằng cách hiển thị một thông báo hoặc animation trong khi chờ đợi, thay vì để màn hình trắng trơn.

4. Error boundary

Error boundary là một component đặc biệt trong React, đóng vai trò như một lớp bảo vệ cho component con. Khi có lỗi xảy ra trong component con, error boundary sẽ ngăn chặn lỗi lan rộng ra toàn bộ ứng dụng và hiển thị một giao diện dự phòng. Việc sử dụng error boundary giúp nâng cao trải nghiệm người dùng và đảm bảo ứng dụng hoạt động ổn định.

Để sử dụng nó, bạn chỉ cần gói cây thành phần bạn muốn bảo vệ bằng Error boundary. Đường viền lỗi sẽ phát hiện lỗi và hiển thị UI dự phòng khi chúng xảy ra trong cây thành phần được gói.

VD:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}


<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

5. Truyền dữ liệu với ngữ cảnh

Thông thường, việc truyền dữ liệu từ component cha sang component con trong React được thực hiện thông qua props. Tuy nhiên, khi cấu trúc ứng dụng trở nên phức tạp với nhiều tầng component lồng nhau, việc truyền props có thể trở nên cồng kềnh và khó quản lý. Chính vì vậy, React cung cấp Context API, cho phép component cha chia sẻ thông tin tới bất kỳ component con nào trong cây component mà không cần truyền trực tiếp qua từng tầng. Điều này giúp đơn giản hóa việc quản lý state và tăng tốc độ phát triển ứng dụng.

6. Code-Splitting

Một trong những kỹ thuật quan trọng giúp tăng hiệu suất ứng dụng React chính là Code-Splitting. Thay vì đóng gói toàn bộ ứng dụng vào một file duy nhất, Code-Splitting cho phép chia nhỏ ứng dụng thành nhiều bundle nhỏ hơn và chỉ tải những phần code cần thiết khi người dùng yêu cầu. Việc này giúp giảm thiểu thời gian tải trang ban đầu, đặc biệt là với các ứng dụng có dung lượng lớn. Các công cụ phổ biến như Webpack, Rollup và Browserify đều hỗ trợ tính năng Code-Splitting, giúp việc triển khai dễ dàng hơn.

7. State Management

Khi ứng dụng React của bạn phát triển, việc quản lý state trở nên phức tạp hơn. Lúc này, việc sử dụng một thư viện quản lý state như Redux là cần thiết. Redux cung cấp một kho lưu trữ state chung cho toàn bộ ứng dụng, giúp bạn dễ dàng theo dõi, cập nhật và debug state. Bằng cách sử dụng Redux, bạn có thể xây dựng các ứng dụng phức tạp với state được quản lý một cách có tổ chức và hiệu quả.

Ngoài các kỹ thuật kể trên, React còn cung cấp một số kỹ thuật nâng cao khác như useCallback/useMemo để tối ưu hiệu suất ứng dụng. useCallback/ useMemo giúp tối ưu hiệu năng bằng cách lưu trữ kết quả của function và tránh tính toán lại không cần thiết.

Hy vọng các bạn sẽ nắm rõ được các khái niệm quan trọng này để sử dụng React tốt hơn.