#useCurrentRef

import { useCurrentRef } from '@hitechline/reactools';
import { useEffect } from 'react';

const Component = () => {
  const [value, ref] = useCurrentRef();

  useEffect(() => {
    value?.focus();
  }, []);

  return <div ref={ref}>Component</div>;
};

import { useCurrentRef } from '@hitechline/reactools';
import { useEffect, useCallback, forwardRef } from 'react';

const Wrap = () => {
  const [value, ref] = useCurrentRef({ loading: false });

  return (
    <section>
      <Component ref={ref} />

      {value.loading && <h1>Loading</h1>}
    </section>
  );
};

const Component = forwardRef((props, ref) => {
  const done = useCallback(() => {
    ref({
      loading: false,
    });
  }, []);

  useEffect(() => {
    ref({
      loading: true,
    });
  }, []);

  return (
    <div {...props}>
      <button type="button" onClick={done}>
        Click
      </button>
    </div>
  );
});