#useManageableRef

import { useManageableRef } from '@hitechline/reactools';
import { useCallback } from 'react';

const Component = () => {
  const ref = useManageableRef(null);

  const handle = useCallback(() => {
    ref.current = {
      foo: () => {
        // bar
      },
    };
  }, []);

  return (
    <div>
      <button type="button" onClick={handle}>
        Click
      </button>

      <Child asRef={ref} />
    </div>
  );
};

const Child = ({ asRef }) => {
  const click = useCallback(() => {
    asRef.current?.foo?.();
  }, []);

  return (
    <button type="button" onClick={click}>
      Change
    </button>
  );
};