useCallback

Persists the creation of a function across updates.

Example

import { useCallback, useState } from "kaioken"

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

  // Without useCallback, handleIncrement will be recreated on every render.
  const handleIncrement = useCallback(() => {
    setCount(prevCount => prevCount + 1)
  }, [])

  return (
    <div>
      <ChildComponent onIncrement={handleIncrement} />
      <p>Count: {count}</p>
    </div>
  )
}

function ChildComponent({ onIncrement }) {
  return (
    <button onclick={onIncrement}>
      Increment
    </button>
  )
}

Related