What's the difference between React.ComponentProps and React.PropsWithChildren ?

I just saw someone post something on youtube but didnt't really explain it.

Whats the difference between these 2, and when should I use either? Except the obvious part that the Component... has the types already included and you just call the type of element.

type Props = React.PropsWithChildren<HTMLButtonElement>;

type Props2 = React.ComponentProps<"button">;


And this goes for all these types PropWithChildren, PropsWithRef, PropsWithoutRef and their counterparts ComponentPropsWithRef and ComponentPropsWithoutRef.
Was this page helpful?