With following context, refactor React components
Minimalistic Deps:
- replace
import * as React from "react"
things toimport { useState, use, ... } from React
only required in the code
Prefer safe prop interface:
- replace
React.*HTMLAttributes
toComponentPropsWithRef<*>
- replace type props to interface props. if
props: A & B
found, convert tointerface Props extends A, B {}
shape
Remove legacy forwardRef API:
- remove all
forwardRef
usages - replace arrow functions to be named functions, remove all displayName set if found
- replace
export {...}
to beexport const/function
for each module identifier - replace
ComponentProps<T>
toComponentPropsWithRef<T>
if it spreads all props or drill out ref prop
Replace unsafe React polymorphic render interface to safer interface:
- replace component prop
<Component asChild><button /></Component>
pattern to be<Component render={props => <button {...props} />} />
- replace component prop
<Component slot={Button} />
pattern to be<Component render={props => <Button {...props} />} />