Skip to content

Instantly share code, notes, and snippets.

@ellemedit
Last active October 13, 2024 12:51
Show Gist options
  • Save ellemedit/46cb6ac6a8c65aa69e010b1c88f406c3 to your computer and use it in GitHub Desktop.
Save ellemedit/46cb6ac6a8c65aa69e010b1c88f406c3 to your computer and use it in GitHub Desktop.
React18 Component -> React19 Component Refactor Prompt

With following context, refactor React components

Minimalistic Deps:

  • replace import * as React from "react" things to import { useState, use, ... } from React only required in the code

Prefer safe prop interface:

  • replace React.*HTMLAttributes to ComponentPropsWithRef<*>
  • replace type props to interface props. if props: A & B found, convert to interface 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 be export const/function for each module identifier
  • replace ComponentProps<T> to ComponentPropsWithRef<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} />} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment