@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>
}