@s-ui/performance

> Performance utilities to make your web application go fast ⚡️

Installation

``sh
npm install @s-ui/performance
`

Usage

$3

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.

`jsx
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 {counter}
}
`

$3

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).

`jsx
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 {counter}
}
``