ref is null Typescript + NextJS

I need to call methods from a custom child component inside the parent component.

But unfortunately the ref to the child component (called CanvasUI) is always null. I don’t understand why as it seems to me that I have implemented everything correctly.

This is my parent component

...

export default function Home() {
  ...
  const canvas = useRef<CanvasRef>(null);

  ...
  function clearCanvas() {
    // canvas.current.resetCanvas();
    console.log(canvas.current);
  }
  return (
    <div className="flex justify-center items-center min-h-screen min-w-screen bg-main">
      <div className="flex flex-col">
        ...
        <div className="flex justify-center">
          ...
          <CanvasUI disabled={disableCanvas} word={activeWord} ref={canvas} />
          ...
        </div>
        ...
        <button onClick={() => clearCanvas()}>clear canvas</button>
      </div>
    </div>
  );
}

And this is the CanvasUI component

...

export default function CanvasUI({
  disabled,
  word,
  ref,
}: {
  disabled: boolean;
  word: string;
  ref: Ref<CanvasRef>;
}) {
  ...
  useImperativeHandle(ref, () => ({ getCanvas, loadCanvas, resetCanvas }));

  ...

  function resetCanvas(): void {
    ...
  }

  ...

  function getCanvas(): String {
    ...
  }

  function loadCanvas(data: String, immediate: Boolean): void {
    ...
  }

  return (
    ...
  );
}

CanvasRef Interface

export default interface CanvasRef {
  getCanvas: () => String;
  loadCanvas: (data: String, immediate: Boolean) => void;
  resetCanvas: () => void;
}

I left out unimportant code to make it more readable

Answer

You can’t use ref as a prop in a component because it is reserved (just like key). React will omit the ref prop from props when invoking your function component.

Instead, you should position ref as the second parameter to your CanvasUI component, and then create it using forwardRef. This is explained in the documentation for useImperativeHandle:

useImperativeHandle

useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef:

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

In this example, a parent component that renders <FancyInput ref={inputRef} /> would be able to call inputRef.current.focus().