Skip to content

refactor(useInterval, useTimeout): take a single options object - #530

Merged
mnxmnz merged 3 commits into
v1-basefrom
refactor/hook-parameter-shapes
Oct 8, 2026
Merged

mnxmnz merged 3 commits into
v1-basefrom
refactor/hook-parameter-shapes

Conversation

@mnxmnz

@mnxmnz mnxmnz commented Sep 28, 2026 •

Copy link
Copy Markdown
Member

Overview

useInterval and useTimeout now take a single options object that holds the callback and the delay. Closes #527.

This reverses the first draft, which moved required values into positional arguments. As review pointed out, a call like useDebouncedCallback(setQuery, 300) hides what 300 means at the call site. useDebouncedCallback and useThrottledCallback already take an object, so this PR leaves them as they are.

// Before
useInterval(poll, 1000);
useInterval(poll, { delay: 1000, immediate: true });
useTimeout(close, 3000);

// After
useInterval({ onTick: poll, delayMs: 1000, immediate: true });
useTimeout({ onTimeout: close, delayMs: 3000 });
  • Callbacks inside the object follow the on prefix used by onClick and onChange: onTick and onTimeout.
  • The delay is named delayMs, following Name time options with a millisecond suffix #536. This also covers the useTimeout item in Name time options with a millisecond suffix #536.
  • useInterval no longer accepts a bare number as its delay.
  • Tests, docs in all five locales and the skill references are updated, with a major changeset.
  • A separate commit fixes three existing translation issues: a Korean particle, missing required: false flags in the Korean useInterval doc, and an untranslated example comment in the zh-Hans useTimeout doc.
  • yarn test, yarn test:coverage, yarn test:compiled, yarn test:docs and yarn test:skill pass.

Checklist

  • Did you write the test code?
  • Have you run yarn run fix to format and lint the code and docs?
  • Have you run yarn run test:coverage to make sure there is no uncovered line?
  • Did you write the JSDoc?

@mnxmnz mnxmnz self-assigned this Sep 28, 2026
@changeset-bot

changeset-bot Bot commented Sep 28, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d4bae72

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
react-simplikit Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented Sep 28, 2026 •

Copy link
Copy Markdown
Contributor

Size Change: +24 B (+0.02%)

Total Size: 116 kB

📦 View Changed
Filename Size Change
packages/react-simplikit/dist/hooks/useInterval/useInterval.cjs 791 B -46 B (-5.5%) ✅
packages/react-simplikit/dist/hooks/useInterval/useInterval.mjs 762 B -49 B (-6.04%) ✅
packages/react-simplikit/dist/hooks/useTimeout/useTimeout.cjs 688 B +61 B (+9.73%) ⚠️
packages/react-simplikit/dist/hooks/useTimeout/useTimeout.mjs 658 B +58 B (+9.67%) ⚠️
ℹ️ View Unchanged
Filename Size
packages/codemod/dist/cli.mjs 6.47 kB
packages/react-simplikit/dist/components/ImpressionArea/ImpressionArea.cjs 1.01 kB
packages/react-simplikit/dist/components/ImpressionArea/ImpressionArea.mjs 984 B
packages/react-simplikit/dist/components/Separated/Separated.cjs 686 B
packages/react-simplikit/dist/components/Separated/Separated.mjs 684 B
packages/react-simplikit/dist/components/SwitchCase/SwitchCase.cjs 723 B
packages/react-simplikit/dist/components/SwitchCase/SwitchCase.mjs 721 B
packages/react-simplikit/dist/hooks/useAsyncEffect/useAsyncEffect.cjs 625 B
packages/react-simplikit/dist/hooks/useAsyncEffect/useAsyncEffect.mjs 614 B
packages/react-simplikit/dist/hooks/useAvoidKeyboard/useAvoidKeyboard.cjs 985 B
packages/react-simplikit/dist/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs 963 B
packages/react-simplikit/dist/hooks/useBodyScrollLock/useBodyScrollLock.cjs 887 B
packages/react-simplikit/dist/hooks/useBodyScrollLock/useBodyScrollLock.mjs 863 B
packages/react-simplikit/dist/hooks/useBooleanState/useBooleanState.cjs 546 B
packages/react-simplikit/dist/hooks/useBooleanState/useBooleanState.mjs 536 B
packages/react-simplikit/dist/hooks/useCallbackOnce/useCallbackOnce.cjs 901 B
packages/react-simplikit/dist/hooks/useCallbackOnce/useCallbackOnce.mjs 873 B
packages/react-simplikit/dist/hooks/useCallbackOnce/useCallbackOncePerRender.cjs 195 B
packages/react-simplikit/dist/hooks/useCallbackOnce/useCallbackOncePerRender.mjs 197 B
packages/react-simplikit/dist/hooks/useConditionalEffect/useConditionalEffect.cjs 980 B
packages/react-simplikit/dist/hooks/useConditionalEffect/useConditionalEffect.mjs 959 B
packages/react-simplikit/dist/hooks/useControlledState/useControlledState.cjs 1.04 kB
packages/react-simplikit/dist/hooks/useControlledState/useControlledState.mjs 1.03 kB
packages/react-simplikit/dist/hooks/useCounter/useCounter.cjs 1.03 kB
packages/react-simplikit/dist/hooks/useCounter/useCounter.mjs 1.01 kB
packages/react-simplikit/dist/hooks/useDebounce/debounce.cjs 463 B
packages/react-simplikit/dist/hooks/useDebounce/debounce.mjs 462 B
packages/react-simplikit/dist/hooks/useDebounce/useDebounce.cjs 1.28 kB
packages/react-simplikit/dist/hooks/useDebounce/useDebounce.mjs 1.26 kB
packages/react-simplikit/dist/hooks/useDebouncedCallback/useDebouncedCallback.cjs 1.15 kB
packages/react-simplikit/dist/hooks/useDebouncedCallback/useDebouncedCallback.mjs 1.12 kB
packages/react-simplikit/dist/hooks/useDebouncedValue/useDebouncedValue.cjs 1.21 kB
packages/react-simplikit/dist/hooks/useDebouncedValue/useDebouncedValue.mjs 1.18 kB
packages/react-simplikit/dist/hooks/useDoubleClick/useDoubleClick.cjs 970 B
packages/react-simplikit/dist/hooks/useDoubleClick/useDoubleClick.mjs 954 B
packages/react-simplikit/dist/hooks/useGeolocation/useGeolocation.cjs 2.02 kB
packages/react-simplikit/dist/hooks/useGeolocation/useGeolocation.mjs 2.02 kB
packages/react-simplikit/dist/hooks/useImpressionRef/useImpressionRef.cjs 1.26 kB
packages/react-simplikit/dist/hooks/useImpressionRef/useImpressionRef.mjs 1.22 kB
packages/react-simplikit/dist/hooks/useInputState/useInputState.cjs 672 B
packages/react-simplikit/dist/hooks/useInputState/useInputState.mjs 662 B
packages/react-simplikit/dist/hooks/useIntersectionObserver/useIntersectionObserver.cjs 1.1 kB
packages/react-simplikit/dist/hooks/useIntersectionObserver/useIntersectionObserver.mjs 1.07 kB
packages/react-simplikit/dist/hooks/useIsClient/useIsClient.cjs 585 B
packages/react-simplikit/dist/hooks/useIsClient/useIsClient.mjs 574 B
packages/react-simplikit/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs 577 B
packages/react-simplikit/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs 575 B
packages/react-simplikit/dist/hooks/useKeyboardHeight/useKeyboardHeight.cjs 736 B
packages/react-simplikit/dist/hooks/useKeyboardHeight/useKeyboardHeight.mjs 717 B
packages/react-simplikit/dist/hooks/useList/useList.cjs 955 B
packages/react-simplikit/dist/hooks/useList/useList.mjs 933 B
packages/react-simplikit/dist/hooks/useLoading/useLoading.cjs 919 B
packages/react-simplikit/dist/hooks/useLoading/useLoading.mjs 909 B
packages/react-simplikit/dist/hooks/useLongPress/useLongPress.cjs 1.71 kB
packages/react-simplikit/dist/hooks/useLongPress/useLongPress.mjs 1.68 kB
packages/react-simplikit/dist/hooks/useMap/useMap.cjs 762 B
packages/react-simplikit/dist/hooks/useMap/useMap.mjs 744 B
packages/react-simplikit/dist/hooks/useNetworkStatus/useNetworkStatus.cjs 1.61 kB
packages/react-simplikit/dist/hooks/useNetworkStatus/useNetworkStatus.mjs 1.59 kB
packages/react-simplikit/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.cjs 785 B
packages/react-simplikit/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.mjs 755 B
packages/react-simplikit/dist/hooks/usePageVisibility/usePageVisibility.cjs 1.27 kB
packages/react-simplikit/dist/hooks/usePageVisibility/usePageVisibility.mjs 1.25 kB
packages/react-simplikit/dist/hooks/usePageVisibilityEffect/usePageVisibilityEffect.cjs 741 B
packages/react-simplikit/dist/hooks/usePageVisibilityEffect/usePageVisibilityEffect.mjs 727 B
packages/react-simplikit/dist/hooks/usePageVisibilityEffect/useVisibilityEvent.cjs 200 B
packages/react-simplikit/dist/hooks/usePageVisibilityEffect/useVisibilityEvent.mjs 205 B
packages/react-simplikit/dist/hooks/usePreservedCallback/usePreservedCallback.cjs 751 B
packages/react-simplikit/dist/hooks/usePreservedCallback/usePreservedCallback.mjs 733 B
packages/react-simplikit/dist/hooks/usePreservedReference/usePreservedReference.cjs 805 B
packages/react-simplikit/dist/hooks/usePreservedReference/usePreservedReference.mjs 789 B
packages/react-simplikit/dist/hooks/usePrevious/usePrevious.cjs 640 B
packages/react-simplikit/dist/hooks/usePrevious/usePrevious.mjs 631 B
packages/react-simplikit/dist/hooks/useRefEffect/useRefEffect.cjs 836 B
packages/react-simplikit/dist/hooks/useRefEffect/useRefEffect.mjs 820 B
packages/react-simplikit/dist/hooks/useSafeAreaInset/useSafeAreaInset.cjs 942 B
packages/react-simplikit/dist/hooks/useSafeAreaInset/useSafeAreaInset.mjs 927 B
packages/react-simplikit/dist/hooks/useScrollDirection/useScrollDirection.cjs 1.34 kB
packages/react-simplikit/dist/hooks/useScrollDirection/useScrollDirection.mjs 1.33 kB
packages/react-simplikit/dist/hooks/useSet/useSet.cjs 1.03 kB
packages/react-simplikit/dist/hooks/useSet/useSet.mjs 1 kB
packages/react-simplikit/dist/hooks/useStorageState/storage.cjs 543 B
packages/react-simplikit/dist/hooks/useStorageState/storage.mjs 527 B
packages/react-simplikit/dist/hooks/useStorageState/useStorageState.cjs 973 B
packages/react-simplikit/dist/hooks/useStorageState/useStorageState.mjs 964 B
packages/react-simplikit/dist/hooks/useThrottle/throttle.cjs 431 B
packages/react-simplikit/dist/hooks/useThrottle/throttle.mjs 422 B
packages/react-simplikit/dist/hooks/useThrottle/useThrottle.cjs 894 B
packages/react-simplikit/dist/hooks/useThrottle/useThrottle.mjs 871 B
packages/react-simplikit/dist/hooks/useThrottledCallback/useThrottledCallback.cjs 1.03 kB
packages/react-simplikit/dist/hooks/useThrottledCallback/useThrottledCallback.mjs 1 kB
packages/react-simplikit/dist/hooks/useThrottledValue/useThrottledValue.cjs 1.1 kB
packages/react-simplikit/dist/hooks/useThrottledValue/useThrottledValue.mjs 1.07 kB
packages/react-simplikit/dist/hooks/useToggle/useToggle.cjs 524 B
packages/react-simplikit/dist/hooks/useToggle/useToggle.mjs 506 B
packages/react-simplikit/dist/hooks/useVisualViewport/useVisualViewport.cjs 1.54 kB
packages/react-simplikit/dist/hooks/useVisualViewport/useVisualViewport.mjs 1.53 kB
packages/react-simplikit/dist/index.cjs 1.42 kB
packages/react-simplikit/dist/index.mjs 1.02 kB
packages/react-simplikit/dist/utils/buildContext/buildContext.cjs 864 B
packages/react-simplikit/dist/utils/buildContext/buildContext.mjs 844 B
packages/react-simplikit/dist/utils/disableBodyScrollLock/disableBodyScrollLock.cjs 667 B
packages/react-simplikit/dist/utils/disableBodyScrollLock/disableBodyScrollLock.mjs 660 B
packages/react-simplikit/dist/utils/enableBodyScrollLock/enableBodyScrollLock.cjs 663 B
packages/react-simplikit/dist/utils/enableBodyScrollLock/enableBodyScrollLock.mjs 652 B
packages/react-simplikit/dist/utils/getKeyboardHeight/getKeyboardHeight.cjs 609 B
packages/react-simplikit/dist/utils/getKeyboardHeight/getKeyboardHeight.mjs 602 B
packages/react-simplikit/dist/utils/getSafeAreaInset/getSafeAreaInset.cjs 902 B
packages/react-simplikit/dist/utils/getSafeAreaInset/getSafeAreaInset.mjs 893 B
packages/react-simplikit/dist/utils/isAndroid/isAndroid.cjs 543 B
packages/react-simplikit/dist/utils/isAndroid/isAndroid.mjs 534 B
packages/react-simplikit/dist/utils/isIOS/isIOS.cjs 753 B
packages/react-simplikit/dist/utils/isIOS/isIOS.mjs 746 B
packages/react-simplikit/dist/utils/isKeyboardVisible/isKeyboardVisible.cjs 431 B
packages/react-simplikit/dist/utils/isKeyboardVisible/isKeyboardVisible.mjs 419 B
packages/react-simplikit/dist/utils/isServer/isServer.cjs 381 B
packages/react-simplikit/dist/utils/isServer/isServer.mjs 379 B
packages/react-simplikit/dist/utils/mergeProps/mergeProps.cjs 645 B
packages/react-simplikit/dist/utils/mergeProps/mergeProps.mjs 643 B
packages/react-simplikit/dist/utils/mergeRefs/mergeRefs.cjs 790 B
packages/react-simplikit/dist/utils/mergeRefs/mergeRefs.mjs 787 B
packages/react-simplikit/dist/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs 1.12 kB
packages/react-simplikit/dist/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs 1.1 kB

compressed-size-action

@codecov-commenter

codecov-commenter commented Sep 28, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (83ae1a3) to head (d4bae72).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##           v1-base      #530   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           71        71           
  Lines         2287      2287           
  Branches       735       732    -3     
=========================================
  Hits          2287      2287           
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@hyesungoh

Copy link
Copy Markdown
Member
// Before
useInterval(tick, { delay: 1000, immediate: true });
useDebouncedCallback({ onChange: setQuery, timeThreshold: 300, leading: true });
useThrottledCallback({ onChange: setTop, timeThreshold: 200, edges: ['leading'] });

// After
useInterval(tick, 1000, { immediate: true });
useDebouncedCallback(setQuery, 300, { leading: true });
useThrottledCallback(setTop, 200, { edges: ['leading'] });

With positional arguments, 300 and 200 lose their names at the call site. What do you think? 🤔 🤔 🤔

@mnxmnz mnxmnz changed the title refactor: standardize hook parameter shapes refactor(useInterval, useTimeout): take a single options object Oct 6, 2026
@mnxmnz
mnxmnz force-pushed the refactor/hook-parameter-shapes branch from c36cf6e to 41bf0a7 Compare October 6, 2026 08:07
@mnxmnz

mnxmnz commented Oct 6, 2026

Copy link
Copy Markdown
Member Author

@hyesungoh Totally agree! Seeing a bare 300 at the call site really doesn't tell you much, so I flipped the direction and force-pushed.

  • useDebouncedCallback and useThrottledCallback already take an object, so I left them alone
  • useInterval and useTimeout now take a single options object, callback included
useInterval({ onTick: poll, delayMs: 1000, immediate: true });
useTimeout({ onTimeout: close, delayMs: 3000 });

useTimeout wasn't in the original scope, but leaving it positional right next to useInterval felt a bit off, so I brought it along 😅 If you'd rather split it out, or if onTick / onTimeout don't feel right, just let me know! 🙏

@mnxmnz
mnxmnz marked this pull request as ready for review October 6, 2026 13:43
@mnxmnz
mnxmnz requested a review from hyesungoh as a code owner October 6, 2026 13:43

@hyesungoh hyesungoh left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super thanks!! 👍 👍

@mnxmnz
mnxmnz merged commit c6511ef into v1-base Oct 8, 2026
19 checks passed
@mnxmnz
mnxmnz deleted the refactor/hook-parameter-shapes branch October 8, 2026 05:13
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.

Standardize hook parameter shapes

3 participants