Bỏ nhiễu trong Next.js

React v16.8 giới thiệu một hook mới tên là useEffect, cho phép bạn thực thi các tác dụng phụ trong các thành phần chức năng của mình. useEffect là một cách tuyệt vời để xử lý các thao tác tốn kém như gọi API, nhưng nó có thể mất một chút công sức. Trong bài viết này, tôi sẽ hướng dẫn bạn cách sử dụng useEffect để debounce các thủ tục tốn kém trong Next.js.

Debounce là gì?

Debounce là một kỹ thuật để kiểm soát tốc độ gọi một hàm. Nó hữu ích khi bạn có một thao tác tốn kém mà bạn chỉ muốn chạy khi người dùng ngừng nhập, ví dụ. Trong trường hợp này, bạn có thể debounce cuộc gọi API để nó chỉ được thực hiện khi người dùng ngừng nhập trong một khoảng thời gian nhất định.

useEffect

useEffect là một hook cho phép bạn thực thi các tác dụng phụ trong các thành phần chức năng của mình. Nó tương tự như componentDidMount và componentDidUpdate trong các thành phần lớp. Đối số đầu tiên là một hàm được gọi khi thành phần được gắn hoặc cập nhật. Đối số thứ hai là một mảng phụ thuộc. Nếu các phụ thuộc thay đổi, thủ tục sẽ được gọi lại. Nếu mảng trống, hàm chỉ được gọi khi thành phần được gắn.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Điều này sẽ được gọi khi thành phần được gắn')
  }, [])

  useEffect(() => {
    console.log('Điều này sẽ được gọi khi thành phần được gắn và khi các phụ thuộc thay đổi')
  }, [dependency1, dependency2])

  return <div>Xin chào thế giới</div>
}

Cách debounce trong Next.js

Điều đầu tiên bạn cần làm là tạo một hook tùy chỉnh để xử lý debounce. Đây là một ví dụ đơn giản:

import { useState, useEffect } from 'react'

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(handler)
    }
  }, [value, delay])

  return debouncedValue
}

Hook này nhận hai đối số: giá trị cần debounce và độ trễ tính bằng mili giây. Nó trả về giá trị đã được debounce. Hook sử dụng useEffect để thiết lập một timeout sẽ cập nhật giá trị đã được debounce sau độ trễ được chỉ định. Nó cũng tạo ra một hàm dọn dẹp để xóa timeout nếu giá trị hoặc sự bất định thay đổi.

Bây giờ chúng ta đã có một hook có thể debounce các giá trị, chúng ta có thể sử dụng nó để debounce các cuộc gọi API. Đây là một ví dụ:

import useDebounce from './useDebounce'

export default function Search() {
  const [search, setSearch] = useState('')
  const debouncedSearch = useDebounce(search, 500)

  useEffect(() => {
    if (debouncedSearch) {
      fetch(`/api/search?q=${debouncedSearch}`)
    }
  }, [debouncedSearch])

  return <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
}

Thành phần này sẽ thực hiện một cuộc gọi API đến /api/search bất cứ khi nào người dùng ngừng nhập trong 500 mili giây. Debounce sẽ thực hiện cuộc gọi API với giá trị của trường nhập liệu làm chuỗi truy vấn.

Hiệu suất

Debounce là một cách rẻ tiền để xử lý các thao tác tốn kém trong Next.js. Nó rẻ hơn so với việc sử dụng một thư viện như lodash.debounce vì nó không yêu cầu bất kỳ phụ thuộc nào bổ sung. Nó cũng rẻ hơn so với việc sử dụng một thư viện như react-throttle vì nó không yêu cầu bất kỳ mã bổ sung nào để được đóng gói.

Kết luận

Debounce là một kỹ thuật có giá trị để kiểm soát tốc độ gọi một hàm. Nó rất hữu ích khi bạn có một thao tác tốn kém mà bạn chỉ muốn chạy khi người dùng ngừng nhập. Trong bài viết này, tôi đã hướng dẫn bạn cách sử dụng useEffect để debounce các thao tác tốn kém trong Next.js.

Nếu bạn thích bài viết này, bạn cũng có thể thích JavaScript Hashmap, Hiệu suất cao và đơn giản.