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.
Moves HOC calls to the global scope ## Example ### Before ```ts <Router history={browserHistory}> <Switch> <Route path='/' render={(props) => ( <Route exact path='/a' component={HOC(PageComponent)} /> )} /> </Switch> </Router>; ``` ### After ```ts const HOCPageComponent = HOC(PageComponent); <Router history={browserHistory}> <Switch> <Route path='/' render={(props) => ( <Route exact path='/a' component={HOCPageComponent} /> )} /> </Switch> </Router>; ```
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 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> ); ```
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 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 migrates string refs (deprecated) to callback refs. ## Example ### Before: ```ts < div ref = 'refName' / > ; ``` ### After: ```ts < div ref = { ref => this.refs.refName = ref } /> ```
- 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 />); ```
Replaces `react-test-renderer/shallow` import. ## Example ### Before ```ts import ShallowRenderer from "react-test-renderer/shallow"; ``` ### After ```ts import ShallowRenderer from "react-shallow-renderer"; ```
Replaces default props with ES6 default parameters. ## Example ### Before ```tsx const Button = ({ size, color }) => { return <button style={{ color, fontSize: size }}>Click me</button>; }; Button.defaultProps = { size: "16px", color: "blue", }; ``` ### After ```tsx const Button = ({ size = "16px", color = "blue" }) => { return <button style={{ color, fontSize: size }}>Click me</button>; }; ```
Replaces deprecated `React.createFactory` method with JSX. ## Example ### Before ```tsx import { createFactory } from "react"; const route = createFactory(Route); ``` ### After ```tsx const route = <Route />; ```
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(); ```
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; ```
Build your own codemod and share it with the community.
