Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
use-delayed-function
Advanced tools
React hook to call a function with delay
This hook provides a safe way to call a function with delay and it takes care of required cleanups.
It doesn't have state and it won't cause extra rendering, so it is useful for sequential (or asynchronous) tasks where we want chain async functions on top of each others.
npm install --save use-delayed-function
General structure:
const [delayedFunction, cancelIt] = useDelayedFunction(
originalFunction,
delay,
rejectOnCancel
)
General usage format:
delayedFunction(para).then(result=>{setState(result)})
It can be used for debouncing which simply delays all consecuative attempts to call a function and finally the last attempt runs if it persists enough time.
It is also a handy tool for applying timing logics inside react components e.g. Showing a notification for few seconds.
It is also a good choice to handle initializing stage of a component. Combination of calling functions, async task or even changing states in sequence can be handled through promise chain provided behind the scene. This kind of behaviour is mostly desirable while initializing a component.
Activities of this hook doesn't change state of the component (unless the called function set an state) so it won't cause extra rendering. The stateful version of this hook is use-delayed-state
To see deployed examples and source codes click here.
The most simplest use case is calling a function in future. In below example changeContentLater
is a function that will call changeContent
with delay.
Note that delay
is a prop (it could be a local state as well) and it dynamically controls delay value.
import React, { useRef, useEffect } from 'react'
import useDelayedFunction from 'use-delayed-function'
const SimpleExample = ({ delay = 4000 }) => {
const divRef = useRef()
const [changeContentLater] = useDelayedFunction(changeContent, delay)
function changeContent(target, content) {
target.innerHTML = content
}
useEffect(() => {
changeContentLater(divRef.current, 'This is the new content')
}, [])
return (
<div>
<div ref={divRef} className='description'>
{`This content will change after ${delay}ms from component mounting`}
</div>
</div>
)
}
export default SimpleExample
In debouncing example any debounced changes in textarea appears in another paragraph.
const [debounceChange] = useDelayedFunction(changeContent, 900)
const [removeStyleLater] = useDelayedFunction(removeStyle, 1000)
const [addStyleNow] = useDelayedFunction(addStyle)
function changeContent(target, content) {
target.innerHTML = content
return target
}
function addStyle(target) {
target.className = 'updating'
return target
}
function removeStyle(target) {
target.className = ''
}
function handleChange(e) {
debounceChange(contentRef.current, e.target.value)
.then(addStyleNow)
.then(removeStyleLater)
}
return (
<div>
<textarea
type='text'
placeholder='Type something'
onChange={handleChange}
/>
<p ref={contentRef}></p>
</div>
)
As you can see in this line of code we can easily manage the timing logic that we want.
debounceChange(contentRef.current, e.target.value)
.then(addStyleNow)
.then(removeStyleLater)
const [delayedFunction, cancelIt] = useDelayedFunction(
originalFunction,
delay,
rejectOnCancel
)
delayedFunction
originalFunction
and always returns a promise.originalFunction
.originalFunction
.setState
or DOM manipulation tasks is where it resolved.
delayedFunction(para).then(doSetState)
cancelIt(doNotReject)
originalFunction
.originalFunction
already fired it will break the chain and ignore its return value.delayedFunction
if rejectOnCancel===true
otherwise it leaves
the promise in pending state to be removed by garbage collector.doNotReject==true
it won't reject the promise even rejectOnCancel===true
originalFunction
It can be a regular or async function
It can accept arguments and return values
setState
or DOM manipulation tasks can be done inside this function with no worries if they are synchronous.
Any setState
or DOM manipulation based on async processes is forbidden inside this function because it throw errors if
component was unmounted. For this purpose use this format
delayedFunction(para).then(result=>{setState(result)})
delay
originalFunction
useRef
object so delay value loaded from refObject.current
rejectOnCancel
false
rejectOnCancel==true
the canceled calls will reject to
{ message: 'Function call canceled', timestamp: Date.now() }
MIT © makannew
FAQs
React hook to call function with delay
The npm package use-delayed-function receives a total of 3 weekly downloads. As such, use-delayed-function popularity was classified as not popular.
We found that use-delayed-function demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.