DEV Community

Discussion on: Top three React & TypeScript pitfalls

Collapse
 
ypresto profile image
Yuya Tanaka

While I agree with keeping props type un-exported where possible, I don't recommend ComponentProps.

  • It is quite complicated type (see its declaration) and it might hit performance of type check.
  • Generics is not supported with typeof, and it cause weird type error if the component has generic props. (i.e. you can't ComponentProps<typeof FooComponent<T>>)
  • Explicit dependency to props type helps to find reference and to decouple (props) type from (component) implementation.

You can also use React.VFC to omit children from React.FC and annotate type correctly.
(I personally use function Foo() { ... } as it also supports overload when it is absolutely necessary.)

Collapse
 
psiho profile image
Mirko Vukušić

Uh, React.VFC! Good one. Didn't know that. Thx.

Collapse
 
sqlrob profile image
Robert Myers

Wouldn't that performance hit only be on compile?