React: Explain the use of forwardRef in React

1import { forwardRef, useRef, useImperativeHandle } from "react";
2
3// Simple forwarding
4const FancyInput = forwardRef<HTMLInputElement>((props, ref) => {
5  return <input ref={ref} className="fancy" {...props} />;
6});
7
8function Parent() {
9  const inputRef = useRef<HTMLInputElement>(null);
10
11  const focusInput = () => {
12    inputRef.current?.focus();
13  };
14
15  return (
16    <div>
17      <FancyInput ref={inputRef} />
18      <button onClick={focusInput}>Focus</button>
19    </div>
20  );
21}

1interface InputHandle {
2  focus: () => void;
3  clear: () => void;
4}
5
6const ControlledInput = forwardRef<InputHandle>((props, ref) => {
7  const inputRef = useRef<HTMLInputElement>(null);
8
9  useImperativeHandle(ref, () => ({
10    focus: () => inputRef.current?.focus(),
11    clear: () => {
12      if (inputRef.current) inputRef.current.value = "";
13    },
14  }));
15
16  return <input ref={inputRef} {...props} />;
17});
18
19// Parent can only call focus() and clear()
20function Form() {
21  const inputRef = useRef<InputHandle>(null);
22
23  return (
24    <>
25      <ControlledInput ref={inputRef} />
26      <button onClick={() => inputRef.current?.focus()}>Focus</button>
27      <button onClick={() => inputRef.current?.clear()}>Clear</button>
28    </>
29  );
30}