New
Codemod Registry
Explore community-led codemods to migrate, optimize, and transform your codebase.
Ready to contribute?
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
- Replaces usages of `ReactDom.render()` with `createRoot(node).render()`. - Replaces usages of `ReactDom.hydrate()` with `hydrateRoot()` - Replaces usages of `ReactDom.unmountComponentAtNode()` with `root.unmount()` ## Example ### Before ```ts import ReactDom from "react-dom"; import Component from "Component"; ReactDom.render(<Component />, document.getElementById('app')); ``` ### After ```ts import { createRoot } from "react-dom/client"; import ReactDom from "react-dom"; import Component from "Component"; const root = createRoot(document.getElementById('app')); root.render(<Component />); ``` ### Before ```ts import ReactDom from "react-dom"; import Component from "Component"; ReactDom.hydrate(<Component />, document.getElementById("app")); ``` ### After ```ts import { hydrateRoot } from "react-dom/client"; import ReactDom from "react-dom"; import Component from "Component"; hydrateRoot(document.getElementById("app"), <Component />); ```
This codemod migrates string refs (deprecated) to callback refs. ## Example ### Before: ```ts < div ref = 'refName' / > ; ``` ### After: ```ts < div ref = { ref => this.refs.refName = ref } /> ```
This codemod will replace the usages of `TestUtils.act()` to use `React.act()`, introduced in React v19. ## Example ### Before: ```ts import { act } from "react-dom/test-utils"; act(); ``` ### After: ```ts import { act } from "react"; act(); ``` ### Before: ```ts import * as ReactDOMTestUtils from "react-dom/test-utils"; ReactDOMTestUtils.act(); ``` ### After: ```ts import * as React from "react"; React.act(); ```
Codemod to convert React PropTypes to TypeScript types. - Supports function and class components - Supports `static propTypes` declarations on class components - Supports [`forwardRef`s](https://reactjs.org/docs/forwarding-refs.html) - Supports files with multiple components - Copies JSDoc comments to the generated TypeScript types - Option to remove or preserve PropTypes after converting to TS ## Before: ```jsx import PropTypes from "prop-types"; import React from "react"; export function MyComponent(props) { return <span />; } MyComponent.propTypes = { bar: PropTypes.string.isRequired, foo: PropTypes.number, }; ``` ## After: ```tsx import React from "react"; interface MyComponentProps { bar: string; foo?: number; } export function MyComponent(props: MyComponentProps) { return <span />; } ```
This codemod transforms React imports to use named imports instead of default or namespace imports. This helps reduce bundle size by allowing better tree-shaking of unused React exports. ### Before ```tsx import React from "react"; function MyComponent() { return React.createElement( "div", null, React.createElement(React.Fragment, null, "Hello"), ); } ``` ### After ```tsx import { createElement, Fragment } from "react"; function MyComponent() { return createElement("div", null, createElement(Fragment, null, "Hello")); } ```
This recipe is a set of codemods that will fix some of React 19 breaking changes. The recipe includes the following codemods: - react/19/replace-reactdom-render - react/19/replace-string-ref - react/19/replace-act-import - react/19/replace-use-form-state - react/prop-types-typescript
React.forwardRef will be deprecated for Function Components in near future. This codemod removes forwardRef function. ### Before: ```jsx import { forwardRef } from "react"; const MyInput = forwardRef(function MyInput(props, ref) { // ... }); ``` ### After: ```tsx const MyInput = function MyInput({ ref, ...props }) { // ... }; ```
This codemod will replace the usages of `useFormState()` to use `useActionState()`, introduced in React v19. ## Example ### Before: ```ts import { useFormState } from "react-dom"; async function increment(previousState, formData) { return previousState + 1; } function StatefulForm({}) { const [state, formAction] = useFormState(increment, 0); return ( <form> {state} <button formAction={formAction}>Increment</button> </form> ) } ``` ### After: ```ts import { useActionState } from "react"; async function increment(previousState, formData) { return previousState + 1; } function StatefulForm({}) { const [state, formAction] = useActionState(increment, 0); return ( <form> {state} <button formAction={formAction}>Increment</button> </form> ) } ``` ### Before: ```ts import * as ReactDOM from "react-dom"; function StatefulForm({}) { const [state, formAction] = ReactDOM.useFormState(increment, 0); return <form></form>; } ``` ### After: ```ts import { useActionState } from "react"; function StatefulForm({}) { const [state, formAction] = useActionState(increment, 0); return <form></form>; } ```
This codemod will remove manual memoization hooks: `useCallback`, `useMemo` and `memo`. This codemod goes hand in hand with React Compiler. > Please note that this is not a safe codemod, as the compiler isn't 1-1 with inserting useMemo/useCallback, so there may be some occurrences that need to be kept in order to keep the semantics. ## Example ### Before: ```tsx import { memo } from "react"; const MyComponent = ({ name }) => { return <div>Hello, {name}!</div>; }; const MemoizedMyComponent = memo(MyComponent); ``` ### After: ```tsx const MyComponent = ({ name }) => { return <div>Hello, {name}!</div>; }; const MemoizedMyComponent = MyComponent; ```
This codemod will convert the usage of `useContext` to the new hook format, introduced in React v19. ## Example ### Before: ```tsx import { useContext } from "react"; import UseTheme from "./UseTheme"; const theme = useContext(UseTheme); ``` ### After: ```tsx import { use } from "react"; import UseTheme from "./UseTheme"; const theme = use(UseTheme); ```
This codemod removes `React.FC`, `React.FunctionComponent` and `React.SFC` and replaces the Props as the type of the unique argument in the component definition. This codemod supports: - Inline defined props. - Generics. - Props defined with intersection. - Component modules defined using intersection. - Regular named functions. - Functions that accept a component definition. - Using FC, FunctionComponent and SFC as a named export. ## Before: ```jsx type Props2 = { id: number }; export const MyComponent2: React.FC<Props2> = (props) => { return <span>{props.id}</span> } ``` ## After: ```tsx type Props2 = { id: number }; export const MyComponent2 = (props: Props2) => { return <span>{props.id}</span>; }; ```
This codemod transforms React.createElement calls into JSX syntax, making your code more readable and maintainable. ## Example ### Before ```tsx return React.createElement( "div", { className: "container" }, React.createElement("h1", null, "Hello World"), React.createElement("p", { style: { color: "blue" } }, "Welcome to React") ); ``` ### After ```tsx return ( <div className="container"> <h1>Hello World</h1> <p style={{ color: "blue" }}>Welcome to React</p> </div> ); ```
Build your own codemod and share it with the community.