Skip to content

fix: resume useThrottle after Strict Mode effect replay - #2743

Open
wanxiankai wants to merge 1 commit into
streamich:masterfrom
wanxiankai:fix/2718-throttle-strict-mode
Open

wanxiankai wants to merge 1 commit into
streamich:masterfrom
wanxiankai:fix/2718-throttle-strict-mode

Conversation

@wanxiankai

Copy link
Copy Markdown

Description

Fixes #2718.

React 18 Strict Mode replays effect setup and cleanup while preserving refs. useThrottle clears its timer during cleanup but retains the cancelled timer ID, so the replayed effect treats it as active and subsequent values never publish.

Reset the timeout ref and pending-value flag when cleaning up. Replayed effects can then start a new throttle interval, without publishing a pending value left over from the previous effect lifecycle. Normal leading and trailing updates keep their existing behavior.

Add five tests covering effect replay, repeated replay, pending-value disposal, idle cleanup, and successive throttle intervals. The project uses React 17 test dependencies, so the regression helper explicitly replays effect cleanup and setup while preserving hook refs. Three tests fail against the unchanged implementation.

Also add a Strict Mode Storybook example and document the supported lifecycle.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as before)

Checklist

  • Read the Contributing Guide
  • Perform a code self-review
  • Review whether code comments are needed; the two cleanup assignments are self-explanatory
  • Add documentation
  • Add hook's story at Storybook
  • Cover changes with tests
  • Ensure the test suite passes (yarn test)
  • Provide 100% tests coverage for the changed hook
  • Make sure code lints (yarn lint)
  • Make sure types are fine (yarn lint:types)

Validation

  • yarn test: 76 suites, 497 tests pass.
  • yarn jest tests/useThrottle.test.ts --runInBand --coverage --collectCoverageFrom=src/useThrottle.ts: 12 tests pass; 100% statements, branches, functions, and lines.
  • yarn lint: passes with 0 errors and 97 existing warnings.
  • yarn lint:types: passes.
  • yarn build: CommonJS and ES module builds pass.
  • Changed-file Prettier checks with the repository's ESLint formatting options and git diff --check: pass.
  • Separate browser verification using React/ReactDOM 18.3.1, createRoot, and development StrictMode: confirms two effect setups and one replay cleanup. With identical input updates to 1 and then 4, the original hook stays at 0 while the fixed hook publishes 1 and 4. Final unmount invokes the second cleanup.

The browser fixture uses separate dependencies and does not change the project's React version or lockfile.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

useThrottle stops updating after React 18 StrictMode effect replay

1 participant