React: React Hook - Day 7.1

Stateless và Stateful Components trong React

Trong React, các thuật ngữ "stateless" và "stateful" được sử dụng để mô tả cách một component xử lý dữ liệu và trạng thái:

Stateless component là component không tự quản lý trạng thái nội bộ, thường chỉ nhận props và hiển thị dữ liệu dựa trên những gì được truyền vào. Chúng đơn giản, dễ kiểm soát và dễ kiểm thử.

Stateful component là component có thể lưu trữ và thay đổi trạng thái bên trong, cho phép chúng phản hồi với các hành động của người dùng hoặc thay đổi dữ liệu theo thời gian.

📜 Trước và Sau React 16.8

Trước React 16.8, chỉ có class components mới có khả năng quản lý state và sử dụng các lifecycle methods như componentDidMount, componentDidUpdate, v.v. Vì vậy, "stateful component" thường đồng nghĩa với "class component".

Từ React 16.8 trở đi, React giới thiệu Hooks như useState, useEffect, useReducer..., cho phép function components cũng có thể quản lý state và hiệu ứng phụ (side effects). Điều này giúp function components trở nên linh hoạt và mạnh mẽ hơn, mà vẫn giữ được tính đơn giản trong cú pháp.

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 Function Component từ Stateless sang Stateful bằng Hooks

Trong một số trường hợp, chúng ta cần mở rộng một function component đơn giản để nó có thể lưu trạng thái hoặc xử lý các hiệu ứng phụ (side-effects). Ta có thể làm điều này bằng cách sử dụng các Hook như useState và useEffect. 

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: chạy khi component mount	
  useEffect(() => {
    console.log("Component did mount");

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

  // useEffect: chạy khi count thay đổi
  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.

• useEffect(() => { ... }, []) sẽ chạy sau lần render đầu tiên, tương đương với componentDidMount. Nó cũng trả về một hàm cleanup, tương đương componentWillUnmount

• useEffect(() => { ... }, [count]) sẽ chạy mỗi khi count thay đổi, tương đương với một phần của componentDidUpdate.

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.