Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

useThrottle stops updating after React 18 StrictMode effect replay

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#2,718 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
72/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ hook useThrottle và phần cleanup useUnmount của nó, sau đó tái hiện vấn đề bằng ví dụ React 18 StrictMode trong báo cáo. Thêm một bài kiểm thử hồi quy StrictMode bao quát timeout đã bị hủy và giá trị đang chờ xử lý, đồng thời xác minh rằng throttledValue được cập nhật trong khoảng thời gian đã cấu hình sau khi sửa lỗi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Description

useThrottle stops publishing new values when used inside React 18 StrictMode.

During the StrictMode effect replay, the useUnmount cleanup clears the pending timeout but leaves timeout.current set to the ID of the cancelled timeout.

When the effects are mounted again, useThrottle assumes that a timeout is still active. Subsequent values are only written to nextValue.current, but the cancelled callback can no longer publish them or reset timeout.current.

As a result, the throttled value stops updating indefinitely.

Environment
  • react-use: 17.6.1 (also reproducible with 17.6.0)
  • react: 18.3.1
  • react-dom: 18.3.1
Reproduction
import React, { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { useThrottle } from 'react-use';

const App = () => {
  const [value, setValue] = useState(0);
  const throttledValue = useThrottle(value, 100);

  return (
    <>
      <button onClick={() => setValue((current) => current + 1)}>
        Increment
      </button>
      <div>Value: {value}</div>
      <div>Throttled value: {throttledValue}</div>
    </>
  );
};

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Click Increment after the initial StrictMode effect replay.

Expected behavior

throttledValue is updated within the configured throttle interval.

Actual behavior

value changes, but throttledValue remains unchanged indefinitely.

Suggested fix

Reset the timeout ref and pending-value flag during cleanup:

useUnmount(() => {
  if (timeout.current) {
    clearTimeout(timeout.current);
  }

  timeout.current = undefined;
  hasNextValue.current = false;
});

This allows the remounted effect to create a new timeout instead of treating the cancelled timeout as active.

I can submit a pull request with the fix and a StrictMode regression test if this approach is acceptable.

Ngôn ngữ chính
TypeScript
Star
44k
Fork
3.3k
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của streamich/react-use

Tất cả issue của streamich/react-use

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.