5 Chiêu Thức Nâng Cao Chất Lượng và Hiệu Suất Code trong React

React là một thư viện JavaScript phổ biến, giúp lập trình viên xây dựng giao diện người dùng dễ dàng và hiệu quả. Chỉ bằng một vài chiêu thức đơn giản, bạn có thể cải thiện đáng kể chất lượng và hiệu suất của mã code.

1. Sử Dụng Toán Tử 3 Ngôi Thay vì Toán Tử AND (&&) Để Render Các Phần Tử

Trong React, việc render có điều kiện các component là rất phổ biến. Tuy nhiên, việc sử dụng toán tử && đôi khi có thể gây khó khăn khi điều kiện được đánh giá ra giá trị falsy (như false, null, undefined, 0 hoặc ''). Để bảo đảm hành vi render chính xác hơn, hãy sử dụng toán tử ba ngôi.

Ví dụ về hành vi của Toán Tử AND (&&):

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

Trong ví dụ trên:

• Đoạn đầu tiên sẽ render giá trị 0, thay vì không gì cả.
• Đoạn thứ hai không render gì, 0 là falsy và react sẽ trả về null.

Cách Tiếp Cận Tốt Hơn:

Sử dụng toán tử ba ngôi:

{0 ? <h1>Hello world 5</h1> : null}

Khi đó, nếu điều kiện là falsy, React sẽ không render gì cả, mang lại hành vi dự đoán được hơn.

2. Sử Dụng Lazy Initializer Với useState

Hook useState cho phép nhận một hàm làm giá trị khởi tạo, giúp tối ưu hóa việc sử dụng bộ nhớ và hiệu suất, đặc biệt khi trạng thái khởi tạo tốn kém.

Tại Sao Nên Sử Dụng Lazy Initializer?

• Cải thiện hiệu suất: Đối với trạng thái khởi tạo nặng, việc trì hoãn tính toán cho đến khi thực sự cần thiết sẽ giúp giảm chi phí.
• Tránh tính toán không cần thiết: Hàm được truyền cho useState chỉ chạy một lần khi component mount.

Ví dụ:

import React, { useState } from 'react';

const ExpensiveComponent = () => {
  const [count, setCount] = useState(() => {
    console.log('Computing initial state');
    return Math.random();
  });

  return <div>Initial Random Value: {count}</div>;
};

Hàm sẽ chỉ gọi một lần trong lần render đầu tiên, cải thiện hiệu suất tổng thể.

3. Sử Dụng Lazy Load Components Để Cải Thiện Hiệu Suất

React.lazy() và Suspense đều là những công cụ hữu ích cho việc lazy load các component, từ đó giúp giảm đáng kể thời gian tải ban đầu. Việc này cũng giúp chia nhỏ bundle JavaScript, chỉ tải khi cần.

Ví dụ:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

Sử dụng lazy loading cải thiện tốc độ tải của ứng dụng, đặc biệt đối với các ứng dụng lớn.

4. Sử Dụng Optional Chaining Trong JavaScript

Optional chaining (?.) giúp bạn tránh được lỗi khi truy cập sâu vào các thuộc tính của đối tượng mà có thể là undefined hoặc null. Điều này giúp cho code trở nên rõ ràng hơn và dễ duy trì hơn.

Ví dụ:

function MyComponent({ data }) {
  const address = data?.info?.address ?? 'Address not available';
  return <div>{address}</div>;
}

Optional chaining làm cho việc truy cập thuộc tính trở nên an toàn hơn mà không cần kiểm tra thủ công.

5. Sử Dụng useRef Cho Forms Để Tránh Re-renders

Khi làm việc với forms và không cần thực hiện re-render sau mỗi lần thay đổi input, bạn nên sử dụng useRef thay vì useState. Điều này giúp tối ưu hiệu suất cho các form lớn.

Ví dụ:

import React, { useRef } from 'react';

const MyForm = () => {
  const nameRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (nameRef.current) {
      alert(`Name: ${nameRef.current.value}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

Sử dụng useRef cho phép bạn truy cập giá trị input mà không kích hoạt re-render, rất thích hợp cho các form lớn.

Kết Luận

Bằng cách áp dụng năm chiêu thức này, bạn sẽ thấy sự cải thiện rõ rệt về hiệu suất, khả năng đọc và khả năng bảo trì của code. Ghi nhớ:

• Sử dụng toán tử 3 ngôi để render có điều kiện.
• Tận dụng lazy initializer trong useState.
• Thực hiện lazy loading cho components để cải thiện thời gian tải.
• Sử dụng optional chaining để truy cập thuộc tính an toàn hơn.
• Áp dụng useRef trong forms để tránh re-renders không cần thiết.

Với những kỹ thuật này, ứng dụng React của bạn sẽ hiệu quả hơn, mang lại trải nghiệm người dùng tốt hơn và quá trình phát triển mượt mà hơn. Cảm ơn bạn đã theo dõi!
source: viblo