Can I call a functional component inside a custom hook? Is it okay for such a hook to be a .tsx, not .ts files?

Question

I made a custom hook that wraps Chakra's custom hook. Chakra UI is a component library.

export const useToast = () => {
  const chakraToast = useChakraToast();

  // ...

  const toast = ({ id, title, delay, position = `bottom-right` }: Options) => {
    return chakraToast({
      id,
      position,
      duration: null,
      render: ({ onClose }) => (<Toast title={title} onClose={onClose} />)
    });
  };

  // ...

  return toast;
};

As you can see, I need to tell Chakra to use my Toast component. The question is, is it okay to call a functional component in a custom hook? If so, I need to change the extension of my custom hook file from .ts to .tsx. Is it okay as well?

Thanks!

Answer 1

Given:

export const useToast = () => {
  const chakraToast = useChakraToast();

  // ...

  const toast = ({ id, title, delay, position = `bottom-right` }: Options) => {
    return chakraToast({
      id,
      position,
      duration: null,
      render: ({ onClose }) => (<Toast title={title} onClose={onClose} />)
    });
  };

  // ...

  return toast;
};

The question is, is it okay to call a functional component in a custom hook?

It seems you are specifically referring to the render function. As such, it seems a perfectly valid use of a render function that returns JSX. From what I can tell, your question about function components is irrelevant. You are defining a function that returns JSX.

See Custom Component

If so, I need to change the extension of my custom hook file from *.ts to *.tsx. Is it okay as well?

I see no issue here. *.jsx and *.tsx (vs *.js and *.ts) only indicate that JSX syntax is used in the file. The Rules of Hooks make no rules governing the files they can be declared in, but rather only how they are used.