useCallback

Persists the creation of a function across updates.

Example

import { useCallback, useState } from "kaioken"

function App() {
  const [count, setCount] = useState(0)

  /**
   * Without useCallback, handleClick will be recreated on every render,
   * causing the old event handler to be removed and new event handler to be added.
   */
  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1)
  }, [])

  return (
    <div>
      <button onclick={handleClick}>Increment</button>
      <p>Count: {count}</p>
    </div>
  )
}

Related