React Codemods 
This repository contains a collection of codemods to help update React apps.
All codemods, whether you use the codemod CLI command or react-codemod, are free and open source, with the source code available in this repository.
Usage
We recommend using the codemod command for an enhanced experience and better support.
npx codemod <framework>/<version>/<transform> --target <path> [...options]
transform- name of transform, see available transforms below.path- directory to transform
Check codemod docs for the full list of available commands.
For the legacy react-codemod command, see LEGACY.md.
Available Codemods
All React codemods are also available in the Codemod Registry.
remove-context-provider
Converts Context.Provider JSX opening and closing elements into Context.
npx codemod react/19/remove-context-provider --target <path>remove-forward-ref
Removes usages of forwardRef.
npx codemod react/19/remove-forward-ref --target <path>use-context-hook
Replaces usages of React.useContext(...) with React.use(...).
npx codemod react/19/use-context-hook --target <path>replace-act-import
Updates act import path from react-dom/test-utils to react.
npx codemod react/19/replace-act-import --target <path>replace-string-ref
Replaces deprecated string refs with callback refs.
npx codemod react/19/replace-string-ref --target <path>replace-use-form-state
Replaces usages of useFormState() to use useActionState().
npx codemod react/19/replace-use-form-state --target <path>replace-reactdom-render
Replaces usages of ReactDom.render() with createRoot(node).render().
npx codemod react/19/replace-reactdom-render --target <path>create-element-to-jsx
Converts calls to React.createElement into JSX elements.
npx codemod react/create-element-to-jsx --target <path>error-boundaries
Renames the experimental unstable_handleError lifecycle hook to componentDidCatch.
npx codemod react/error-boundaries --target <path>findDOMNode
Updates this.getDOMNode() or this.refs.foo.getDOMNode() calls inside of
React.createClass components to React.findDOMNode(foo). Note that it will
only look at code inside of React.createClass calls and only update calls on
the component instance or its refs. You can use this script to update most calls
to getDOMNode and then manually go through the remaining calls.
npx codemod react/findDOMNode --target <path>manual-bind-to-arrow
Converts manual function bindings in a class (e.g., this.f = this.f.bind(this)) to arrow property initializer functions (e.g., f = () => {}).
npx codemod react/manual-bind-to-arrow --target <path>pure-component
Converts ES6 classes that only have a render method, only have safe properties (statics and props), and do not have refs to Functional Components.
The wizard will ask for 2 options -
- Use arrow functions?: converts to arrow function. Converts to
functionby default. - Destructure props?: will destructure props in the argument where it is safe to do so.
npx codemod react/pure-component --target <path>pure-render-mixin
Removes PureRenderMixin and inlines shouldComponentUpdate so that the ES2015
class transform can pick up the React component and turn it into an ES2015
class. NOTE: This currently only works if you are using the master version
(>0.13.1) of React as it is using React.addons.shallowCompare
npx codemod react/pure-render-mixin --target <path>- The wizard will ask to optionally override
mixin-name, and look for it instead ofPureRenderMixin. Note that it is not possible to use a namespaced name for the mixin.mixins: [React.addons.PureRenderMixin]will not currently work.
React-PropTypes-to-prop-types
Replaces React.PropTypes references with prop-types and adds the appropriate import or require statement. This codemod is intended for React 15.5+.
npx codemod react/React-PropTypes-to-prop-types --target <path>- In addition to running the above codemod you will also need to install the
prop-typesNPM package.
rename-unsafe-lifecycles
Adds UNSAFE_ prefix for deprecated lifecycle hooks. (For more information about this codemod, see React RFC #6)
npx codemod react/rename-unsafe-lifecycles --target <path>react-to-react-dom
Updates code for the split of the react and react-dom packages (e.g.,
React.render to ReactDOM.render). It looks for require('react') and
replaces the appropriate property accesses using require('react-dom'). It does
not support ES6 modules or other non-CommonJS systems. We recommend performing
the findDOMNode conversion first.
npx codemod react/react-to-react-dom --target <path>- After running the automated codemod, you may want to run a regex-based
find-and-replace to remove extra whitespace between the added requires, such
as
codemod.py -m -d src --extensions js '(var React\s*=\s*require\(.react.\);)\n\n(\s*var ReactDOM)' '\1\n\2'using https://github.com/facebook/codemod.
React-DOM-to-react-dom-factories
Converts calls like React.DOM.div(...) to React.createElement('div', ...).
npx codemod react/React-DOM-to-react-dom-factories --target <path>ReactNative-View-propTypes
Replaces View.propTypes references with ViewPropTypes and adds the appropriate import or require statement. This codemod is intended for ReactNative 44+.
npx codemod react/ReactNative-View-propTypes --target <path>update-react-imports
As of Babel 7.9.0, when using runtime: automatic in @babel/preset-react or @babel/plugin-transform-react-jsx, you will not need to explicitly import React for compiling jsx. This codemod removes the redundant import statements. It also converts default imports (import React from 'react') to named imports (e.g. import { useState } from 'react').
The wizard will ask for 1 option -
- Destructure namespace imports as well?: If chosen, namespace imports like
import * as Reactwill also be converted. By default, it's false, so only default imports (import React) are converted.
npx codemod react/update-react-imports --target <path>Support and Contributing
The scripts in this repository are maintained by the React team in collaboration with the Codemod.com team.
If you want to contribute, you're welcome to submit a pull request.
License
react-codemod is MIT licensed.