TypeSafe에 React의 Ref를 혼자 설치할 때의 요약

import { forwardRef, ForwardRefRenderFunction, useImperativeHandle } from 'react';

export interface HogeElement {
  bar: string;
  buzz: () => void;
}

export interface HogeProps {
  bizz: string;
}

const HogeRefFunction: ForwardRefRenderFunction<HogeElement, HogeProps> = ({
  bizz,
}, ref)=> {
  useImperativeHandle(ref, () => {
    return {
      bar: '参照等',
      buzz: () => {
        // 処理群
      }
    }
  })
  return <div>{bizz}</div>;
}
export const Hoge = forwardRef(HogeRefFunction);

다양한 명명 규칙

시험을 준비하다