Skip to content
This repository has been archived by the owner on Jan 10, 2025. It is now read-only.

✨ Add useDelayedCallback hook #1595

Merged
merged 1 commit into from
Aug 18, 2020

Conversation

carolopolo
Copy link
Contributor

@carolopolo carolopolo commented Aug 17, 2020

Description

  • Adds a new useDelayedCallback hook to the react-hooks package.

  • It's useful for when you want to call a function after a given delay. For example, in web, we are currently looking to use it to call the onClose() of a Modal after a slight delay, in order to wait for the progress bar to become 100% filled visually. Without the delay, the Modal closes abruptly before the progress bar reaches 100% visually.

  • This PR also introduces minor corrections in README.md to fix grammar errors/typos/inconsistent verb tenses.

Type of change

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

Checklist

  • I have added a changelog entry, prefixed by the type of change noted above (Documentation fix and Test update does not need a changelog as we do not publish new version)

@carolopolo carolopolo self-assigned this Aug 17, 2020
@carolopolo carolopolo marked this pull request as ready for review August 17, 2020 19:43
@carolopolo carolopolo force-pushed the reactHooks/add-use-delayed-callback branch 3 times, most recently from 20bae4c to 420e8d0 Compare August 18, 2020 15:02
Copy link
Contributor

@mathieulag mathieulag left a comment

Choose a reason for hiding this comment

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

Looks great! Good to see this shared within Quilt so we can use it everywhere 💯

Bonus points for the fixed grammar 😂

import {useEffect, useState} from 'react';

export function useDelayedCallback(callback: () => void, delay: number) {
const [timeoutId, setTimeoutId] = useState<ReturnType<typeof setTimeout>>();
Copy link
Contributor

Choose a reason for hiding this comment

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

ReturnType<typeof setTimeout> 🎉

fakeComponent.unmount();

fakeComponent.act(() => {
clock.tick(delay - 1);
Copy link
Contributor

Choose a reason for hiding this comment

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

Shouldn't this be delay instead of delay - 1?
If you haven't reached the delay the callback shouldn't be called wether the component unmounted or not.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

you're right. we don't even need the clock tbh. just the unmount!

Copy link
Contributor

@tleunen tleunen left a comment

Choose a reason for hiding this comment

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

Added comments, but otherwise it looks good indeed. And thanks for the grammar fixes!

packages/react-hooks/src/hooks/delayed-callback.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@loic-d loic-d left a comment

Choose a reason for hiding this comment

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

Great contribution 👍 💯

@carolopolo carolopolo force-pushed the reactHooks/add-use-delayed-callback branch from 420e8d0 to a28c0fa Compare August 18, 2020 16:46
@carolopolo carolopolo merged commit 6001033 into master Aug 18, 2020
@carolopolo carolopolo deleted the reactHooks/add-use-delayed-callback branch August 18, 2020 17:14
@michenly michenly temporarily deployed to production August 18, 2020 22:21 Inactive
@gmcgibbon gmcgibbon temporarily deployed to gem August 24, 2020 19:15 Inactive
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants