Cách sử dụng React useEffect

Nhóm phát triển React giới thiệu khái niệm Hooks trong React phiên bản 16.8. React Hook cho phép dùng state và các tính năng React khác trong thành phần hàm (functional component). Với hook useState, thành phần hàm có thể thiết lập state nội bộ mà không cần viết lại thành class component.

Xem hướng dẫn này để xem lại khác biệt giữa thành phần class và hàm của React.

Hook phổ biến khác trong React là useEffect. Với useEffect, các tác dụng phụ (side effects) được thực hiện từ ngữ cảnh thành phần hàm. Nhớ rằng tác dụng phụ xảy ra trong hàm JavaScript cũng vậy.

Tác dụng phụ xảy ra khi hàm thay đổi thứ gì đó bên ngoài thân hàm. Trong React, cũng tương tự và có thể bao gồm lấy dữ liệu (data fetching), đăng ký (subscriptions), hoặc thay đổi DOM từ các thành phần React trước đó.

useEffect là gì?

React Hook useEffect cho phép thành phần hàm thực hiện tác dụng phụ. Nó hoạt động tương tự các phương thức vòng đời componentDidMount, componentWillUpdate, và componentWillUnmount trong React class component. Tham khảo giới thiệu về phương thức vòng đời React để biết chi tiết.

Trong bài này, chúng ta sẽ thấy ví dụ cơ bản cách bắt đầu dùng Hooks. Mục đích bài viết là giới thiệu, không đi sâu. Để xem toàn diện về useEffect, đọc tổng quan này khi đã quen React Hooks.

Cú pháp React Hooks

Để hiểu useEffect, trước cần xem qua cú pháp hook useState. Khi dùng Hooks, chúng phải được import như React được import.

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

Bây giờ có thể định nghĩa thành phần hàm với Hooks bên trong. Điều này dùng phạm vi hàm JavaScript. Khi định nghĩa hook useEffect bên trong thành phần hàm, nó truy cập state và props qua phạm vi. Để biết thêm về phạm vi, xem bài giới thiệu này.

81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.

Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.

Cú pháp useState

Để rõ ràng, hãy dùng bộ đếm đơn giản cho ví dụ. Chúng ta sẽ xuất ra DOM số lần nút được nhấp. Thành phần hàm hoàn chỉnh với import trông như sau:

import React, {useState, useEffect} from 'react'
import ReactDOM from 'react-dom'
const ButtonCounter = () => {
  return (
    <button>Click Me</button>
  )
}
ReactDOM.render(
  <ButtonCounter />,
  document.getElementById('container')
);

Điều này hiển thị nút ra DOM. Trước khi định nghĩa useEffect, ta thiết lập state ban đầu bằng cách định nghĩa hook useState.

const [count, setCount] = useState(0);

Bằng cú pháp này, React đặt biến đầu tiên thành state ban đầu. Trong trường hợp này, biến "count" được đặt bởi đối số truyền cho useState. React đặt state ban đầu count là 0. Biến thứ hai sẽ dùng làm hàm cập nhật count.

Bây giờ đã đặt state ban đầu count là 0, ta dùng hàm setCount để cập nhật state.

const ButtonCounter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Bạn đã nhấp nút {count} lần</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  )
}

Bằng cách dùng setCount làm hàm callback cho thuộc tính onClick, ta cập nhật DOM mỗi khi nút được nhấp.

Điều này nghĩa hàm setCount được định nghĩa khi đặt state ban đầu với useState đang hoạt động! Bây giờ đã xem cú pháp hook useState, hãy xem useEffect.

Cú pháp useEffect

Như nói trước, useEffect định nghĩa việc dùng tác dụng phụ. Thay đổi thành phần qua lấy dữ liệu và thay đổi DOM thủ công là tác dụng phụ. Hook useEffect được gọi mỗi lần thành phần render.

Nó hoạt động tương tự componentDidMount và componentDidUpdate trong React class component. Tiếp tục với ví dụ bộ đếm, ta sẽ dùng useEffect cập nhật DOM bằng cách hiển thị tên trong phần tử <p>.

const [count, setCount] = useState(0);
const [name, setName] = useState(" ");
useEffect(() => {
  setName(name + "Ryan")
})
return (
  <div>
    <p>Hello {name}! You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>Click Me</button>
  </div>
)

Mã này cố tình viết sai. Điều được đẩy ra DOM chứng minh useEffect được gọi mỗi lần render thành phần.

Điều này xảy ra vì mặc định hook useEffect hoạt động như kết hợp componentDidMount và componentWillUpdate.

Để tùy chỉnh Hook chỉ render khi thành phần mount, ta gửi đối số thứ hai cho useEffect. Bằng cách truyền mảng rỗng ([]) làm đối số thứ hai, React biết chỉ gọi useEffect khi thành phần mount.

useEffect(() => {
  setName(name + "Ryan")
}, [])

Bây giờ, ta nên thấy chuỗi "Ryan" hiển thị chỉ một lần khi thành phần hàm mount.

Tuyệt! Việc quen dùng Hooks mất thời gian. Coi đó, tài liệu React chính thức có hướng dẫn cập nhật dùng Hooks. Đọc tại đây.

Kết luận

Trong giới thiệu hook useEffect React, chúng ta học Hooks là gì và cách dùng. Chúng ta cũng bao quát cú pháp hook useState và useEffect với ví dụ cơ bản cho từng cái.

Tiềm năng dùng Hooks vượt xa những gì bao quát ở đây. Sau đọc bài và dành thời gian thực hành, hãy mở rộng sang tài nguyên liên kết để nắm vững React Hooks. Mặc dù class component không biến mất, Hooks là tương lai React, hãy cập nhật thông tin!