5 tuyệt chiêu React nâng tầm chất lượng và hiệu suất code

React là một thư viện JavaScript mạnh mẽ để xây dựng giao diện người dùng. Chỉ với một vài thủ thuật, bạn có thể viết code sạch hơn, hiệu quả hơn và dễ bảo trì hơn.

1. Sử dụng Toán tử 3 ngôi thay cho Toán tử AND (&&) để Render các phần tử

Trong React, việc render có điều kiện các component hoặc phần tử dựa trên các điều kiện nhất định là điều thường thấy. Tuy nhiên, việc sử dụng toán tử && để render có điều kiện có thể gây khó khăn khi biểu thức được đánh giá dẫn đến giá trị falsy (ví dụ: false, null, undefined, 0 hoặc ''). Để tránh hành vi render không mong muốn, hãy ưu tiên sử dụng toán tử ba ngôi.

Ví dụ về hành vi của &&:

Sử dụng && trong render có điều kiện:

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

• Ví dụ đầu tiên (0 && <h1>Hello world 5</h1>) sẽ render 0 trong giao diện người dùng vì 0 là một giá trị falsy trong JavaScript. React sẽ hiểu điều này là false. Tuy nhiên, thay vì không render gì, React sẽ render chính giá trị falsy (0).
• Ví dụ thứ hai (0 ? <h1>Hello world 6</h1> : null) sẽ không render gì cả. Vì điều kiện là 0 (là falsy), toán tử ba ngôi sẽ được đánh giá là null. React sẽ không render bất cứ thứ gì.

Cách tiếp cận tốt hơn với Toán tử ba ngôi:

Thay vì dựa vào toán tử &&, bạn có thể sử dụng toán tử ba ngôi để đảm bảo render đúng nội dung dự phòng, đặc biệt là khi điều kiện là falsy.

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

Trong trường hợp này, nếu điều kiện là falsy (0), React sẽ render null, dẫn đến việc không có gì được render, mang lại hành vi dự đoán được và đúng như dự định hơn.

2. Lazy Initializer với useState

Hook useState của React có thể nhận một hàm làm giá trị khởi tạo, cho phép bạn khởi tạo Lazy Initializer. Điều này đặc biệt hữu ích khi trạng thái khởi tạo tốn kém để tính toán hoặc khi nó phụ thuộc vào một số phép tính chỉ nên chạy một lần.

Tại sao nên sử dụng Lazy Initializer?

• Cải thiện hiệu suất: Nếu trạng thái khởi tạo liên quan đến các phép tính tốn kém hoặc tìm nạp dữ liệu, khởi tạo lười biếng giúp trì hoãn chi phí đó cho đến khi thực sự cần thiết.
• Tránh các phép tính không cần thiết: Hàm bạn truyền cho useState làm giá trị khởi tạo sẽ chỉ được thực thi một lần trong quá trình mount component và nó sẽ không được tính toán lại trong các lần render tiếp theo.

Ví dụ:

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

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

export default ExpensiveComponent;

Trong ví dụ này:

• useState(() => Math.random()) sẽ chỉ gọi hàm một lần, trong lần render ban đầu.
• Điều này đảm bảo rằng việc tạo số ngẫu nhiên chỉ xảy ra một lần, cải thiện hiệu suất nếu phép tính tốn kém.

3. Sử dụng Lazy Load Components để cải thiện hiệu suất

React.lazy() và Suspense của React là những công cụ tuyệt vời để lazy load các component. Điều này giúp chia JavaScript của bạn thành các bundle nhỏ hơn và chỉ tải chúng khi cần. Việc này làm giảm đáng kể thời gian tải ban đầu và cải thiện hiệu suất của ứng dụng.

Ví dụ:

import React, { Suspense } from 'react';

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

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

Trong ví dụ này:

• React.lazy() cho phép bạn import động LazyComponent.
• Component Suspense được sử dụng để hiển thị trạng thái tải cho đến khi component được lazy load được render hoàn toàn.

Bằng cách sử dụng lazy loading, ứng dụng của bạn sẽ chỉ tải các component cần thiết cho lần render ban đầu và tìm nạp các component khác theo yêu cầu, từ đó nâng cao hiệu suất, đặc biệt là trong các ứng dụng lớn.

4. Sử dụng Optional Chaining trong JavaScript

Nếu bạn đang làm việc với JavaScript, optional chaining (?.) là một cứu cánh khi truy cập các thuộc tính lồng sâu trên các đối tượng. Nó ngăn chặn các lỗi xảy ra khi cố gắng truy cập các thuộc tính của undefined hoặc null. Optional chaining có sẵn trong JavaScript hiện đại và cho phép bạn truy cập an toàn các thuộc tính mà không cần phải kiểm tra thủ công null hoặc undefined.

Ví dụ:

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

Trong ví dụ này:

• data?.info?.address truy cập an toàn thuộc tính address mà không gây ra lỗi nếu data hoặc info là undefined hoặc null.
• Toán tử ?? cung cấp một giá trị mặc định nếu address là undefined.

Nếu không có optional chaining, bạn cần phải kiểm tra thủ công từng cấp, điều này có thể nhanh chóng dẫn đến code lộn xộn và khó đọc hơn. Optional chaining giữ cho code sạch sẽ và không có lỗi.

5. Sử dụng useRef cho Forms để tránh Re-renders

Trong React, khi làm việc với các form và bạn không cần component re-render sau mỗi lần thay đổi input, tốt hơn là sử dụng useRef thay vì useState. useRef lưu trữ trực tiếp giá trị của trường input và không kích hoạt re-render khi giá trị thay đổi, giúp nó hiệu quả hơn đối với các form lớn.

Ví dụ:

import React, { useRef } from 'react';

const MyForm: React.FC = () => {
  const nameRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (event: React.FormEvent) => {
    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>
  );
};

export default MyForm;

Trong ví dụ TypeScript này:

• useRef được sử dụng để theo dõi giá trị input mà không khiến component re-render sau mỗi lần thay đổi input.
• nameRef.current được sử dụng để truy cập trực tiếp giá trị của input khi form được submit.

Sử dụng useRef đặc biệt hữu ích khi giá trị form không cần kích hoạt re-render để xác thực hoặc cập nhật động, khiến nó trở thành một lựa chọn tuyệt vời cho các form nhạy cảm về hiệu suất.

Kết luận

Bằng cách áp dụng năm thủ thuật React này trong code của bạn, bạn có thể cải thiện đáng kể hiệu suất, khả năng đọc và khả năng bảo trì. Dưới đây là tóm tắt nhanh:

• Sử dụng toán tử ba ngôi để render có điều kiện thay vì &&.
• Tận dụng khởi tạo lười biếng trong useState.
• Triển khai lazy loading cho các component để cải thiện thời gian tải ban đầu.
• Sử dụng optional chaining để truy cập thuộc tính an toàn hơn trong JavaScript.
• Sử dụng useRef trong các form để tránh re-render không cần thiết.

Với những kỹ thuật này, các ứng dụng React của bạn sẽ hiệu quả hơn và dễ bảo trì hơn, dẫn đến 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 các bạn đã theo dõi!