React/Update React Imports

Last update

Dec 18, 2024

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

import React from "react";

function MyComponent() {
  return React.createElement(
    "div",
    null,
    React.createElement(React.Fragment, null, "Hello"),
  );
}

After

import { createElement, Fragment } from "react";

function MyComponent() {
  return createElement("div", null, createElement(Fragment, null, "Hello"));
}

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

import React from "react";

function MyComponent() {
  return React.createElement(
    "div",
    null,
    React.createElement(React.Fragment, null, "Hello"),
  );
}

After

import { createElement, Fragment } from "react";

function MyComponent() {
  return createElement("div", null, createElement(Fragment, null, "Hello"));
}

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now