The callback function to be stabilized.
Custom React hook that returns a stable function reference to the provided callback.
This hook maintains a reference to the latest callback using a ref, ensuring that the returned function always calls the most recent version of the callback without triggering unnecessary re-renders. This is particularly useful in event handlers or when passing callbacks to child components.
const MyComponent = () => {
const handleClick = useEvent(() => {
console.log('Button clicked!');
});
return <button onClick={handleClick}>Click Me</button>;
};
The callback function to be stabilized.
Custom React hook that returns a stable function reference to the provided callback.
This hook maintains a reference to the latest callback using a ref, ensuring that the returned function always calls the most recent version of the callback without triggering unnecessary re-renders. This is particularly useful in event handlers or when passing callbacks to child components.
Example