TYPESCRIPT

react forwardref useImperativeHandle typescript

type CountdownProps = {}
    
type CountdownHandle = {
  start: () => void,
}
    
const Countdown: React.ForwardRefRenderFunction<CountdownHandle, CountdownProps> = (
  props,
  forwardedRef,
) => {
  React.useImperativeHandle(forwardedRef, ()=>({
    start() {
      alert('Start');
    }
  });

  return <div>Countdown</div>;
}

export default React.forwardRef(Countdown);

/* 
and then use React utility ElementRef, TypeScript
can infer exact ref type of your component
*/
const App: React.FC = () => {
  // this will be inferred as `CountdownHandle`
  type CountdownHandle = React.ElementRef<typeof Countdown>;

  const ref = React.useRef<CountdownHandle>(null); // assign null makes it compatible with elements.

  return (
    <Countdown ref={ref} />
  );
};

react forwardref typescript

type MyProps = {
  name: string;
}

const CustomInput = forwardRef<HTMLInputElement, MyProps>(props) => {
  // access your props and ref here
}

forwardRef And UseImperativeHandle

forwardRef is to be able to attach a ref to an instance of this component in its parent.
UseImperativeHandle is for its instance(refs) to be able to use its functions

forwardRef and useimperativehandle

forwardRef: makes this grabbable with useRef
useImperativeHandle: now this ref can use the function.