@s-ui/performance
v1.2.0
Published
> Performance utilities to make your web application go fast ⚡️
Downloads
3,421
Maintainers
Keywords
Readme
@s-ui/performance
Performance utilities to make your web application go fast ⚡️
Installation
npm install @s-ui/performance
Usage
Delay code execution
Use this function to delay the execution of an expensive operation and prioritize user actions. Keep in mind that it only delays the response by a maximum of 1 frame, an average of 8ms, which is too little for a human to notice for the types of major actions where you’d use this function.
import {delayTask} from '@s-ui/performance';
export default function Example() {
const [counter, setCounter] = useState(0)
const handleClick = async () => {
setCounter(counter => counter + 1)
await delayTask()
work() // expensive work
}
return <button onClick={handleClick}>{counter}</button>
}
Delay code execution until urgent
Use this function to delay the execution of an expensive operation while the main thread is idle, using requestIdleCallback, and to prioritize user actions. This method ensures the execution is completed before the user leaves the page. It is especially useful for delaying tracking execution.
The delayTaskUntilUrgent
function optionally receives an options object. The documentation can be found here (idlefy is used under the hood).
import {delayTaskUntilUrgent} from '@s-ui/performance';
export default function Example() {
const [counter, setCounter] = useState(0)
const handleClick = async () => {
setCounter(counter => counter + 1)
await delayTaskUntilUrgent()
track() // expensive work
}
return <button onClick={handleClick}>{counter}</button>
}