use-callback-ref 📞🔄

Hello State-Savvy Developer! 🧠

The use-callback-ref hook is a handy utility for situations where you have a callback function (like an event handler) that depends on some state or props, but you want to provide a stable reference to that callback to a child component or a useEffect dependency array.

It's like having a phone number 📞 that never changes, even if the person answering (your callback logic) updates!

The Problem:

If you define a callback inside your component that uses useState or props, its reference changes on every render. If you pass this changing callback to a memoized child or a useEffect with a dependency array, it can cause unnecessary re-renders or effect re-runs.

The Solution:

useCallbackRef gives you a stable ref to a function. You can call this ref, and it will always execute the latest version of your callback, even if the callback itself has been redefined with new state/props.

Basic Usage:

import { useCallbackRef } from '@ryvora/react-use-callback-ref';
import React, { useState, useEffect, useCallback } from 'react';

const MyChild = React.memo(({ onStableClick }) => {
  console.log('MyChild rendered');
  return <button onClick={onStableClick}>Click Me (Child)</button>;
});

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

  // This callback changes on every render because of `count`
  const handleClick = () => {
    console.log('Clicked! Count is:', count);
  };

  // But this ref to it is stable!
  const stableHandleClick = useCallbackRef(handleClick);

  useEffect(() => {
    console.log('Effect with stable callback ref');
    // stableHandleClick can be used in a dependency array without causing re-runs due to handleClick changing
  }, [stableHandleClick]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <MyChild onStableClick={stableHandleClick} />
    </div>
  );
}

Keep those callbacks stable and your components performant! ⚡👍