React: React Hook - Day 7.1

Stateless và Stateful

Trong React, thuật ngữ "stateless" và "stateful" thường được sử dụng để mô tả hai loại components dựa trên cách chúng quản lý dữ liệu và trạng thái.

Stateful Components (Class Components)

Stateful components, còn được gọi là class components, là các components có khả năng lưu trữ và quản lý trạng thái (state). Chúng thường được sử dụng khi cần theo dõi và cập nhật trạng thái của component trong quá trình render.

Tham khảo: React: LifeCycle Hook - Day 7

Stateless Components (Functional Components)

Stateless components, còn được gọi là functional components, là các components không có khả năng lưu trữ và quản lý trạng thái (state). Chúng là các hàm JavaScript đơn giản nhận props và trả về giao diện dựa trên props đó.

Sự khác biệt chính giữa stateless và stateful components là khả năng quản lý trạng thái. Stateless components tốt cho việc hiển thị dữ liệu dựa trên props mà không cần quản lý trạng thái, trong khi stateful components phù hợp để quản lý trạng thái và xử lý các thay đổi trong giao diện.

Từ phiên bản React 16.8, với sự ra mắt của Hooks, bạn có thể sử dụng các Hooks như useState, useEffect, và useContext trong functional components để thực hiện các chức năng tương tự như stateful components, giúp tạo ra các functional components có khả năng quản lý trạng thái.

Tham khảo thêm: React: Khai báo Function component Typescript - Day 2.1

Chuyển Statless component sang stateful component

Giả sử bạn có một stateless functional component đơn giản như sau:

import React from "react";

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {

  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

Chuyển đổi thành stateful functional component bằng cách sử dụng useState và useEffect:

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

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Component did mount");

    return () => {
      console.log("Component will unmount");
    };
  }, []);

  useEffect(() => {
    console.log("Component did update");
  }, [count]);

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

Trong ví dụ trên:

• Sử dụng useState để tạo một trạng thái count và hàm setCount để cập nhật giá trị count.
• Sử dụng hai lần useEffect để mô phỏng componentDidMount và componentDidUpdate tương ứng. Tham số thứ hai của useEffect cho biết khi nào useEffect nên được gọi lại.

So sánh với componentDidMount và componentDidUpdate

Phương thức componentDidMount và componentDidUpdate là hai lifecycle method trong class component. Chúng được gọi sau khi component được render lần đầu (trong trường hợp của componentDidMount) và sau mỗi lần component cập nhật (trong trường hợp của componentDidUpdate).

Trong functional component sử dụng useEffect:

• useEffect với mảng rỗng [] tương đương với componentDidMount. Nó chỉ chạy một lần sau khi component được render lần đầu.
• useEffect với mảng dependency ([count] trong ví dụ trên) tương đương với componentDidUpdate. Nó chạy sau mỗi lần count thay đổi.

Tóm lại, khi chuyển từ stateless component sang stateful component sử dụng functional component và Hooks, bạn có thể tận dụng useState và useEffect để quản lý trạng thái và xử lý các thay đổi trong giao diện.