@openrewrite/recipes-react 0.2.9

package/src/react19/replace-default-props.ts

@@ -0,0 +1,220 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {Expression, isIdentifier, J} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+/**
+ * Converts `Component.defaultProps` to ES6 default parameter values.
+ *
+ * In React 19, `defaultProps` for function components is deprecated.
+ * This recipe moves default values into the function's parameter destructuring.
+ *
+ * Before:
+ * ```tsx
+ * function Greeting({name}) {
+ *     return <div>Hello {name}</div>;
+ * }
+ * Greeting.defaultProps = { name: 'World' };
+ * ```
+ *
+ * After:
+ * ```tsx
+ * function Greeting({name = 'World'}) {
+ *     return <div>Hello {name}</div>;
+ * }
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-defaultprops
+ */
+export class ReplaceDefaultProps extends Recipe {
+    readonly name = "org.openrewrite.react.19.replace-default-props";
+    readonly displayName: string = "Replace `defaultProps` with default parameter values";
+    readonly description: string = "Converts `Component.defaultProps = {...}` to ES6 default parameter values in function components. `defaultProps` for function components is deprecated in React 19.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            // Map: component name → { propName → default value expression }
+            private defaultPropsMap = new Map<string, Map<string, Expression>>();
+            // Track which statement IDs to remove
+            private statementsToRemove = new Set<string>();
+
+            override async visitJsCompilationUnit(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<J | undefined> {
+                this.defaultPropsMap.clear();
+                this.statementsToRemove.clear();
+
+                // First pass: collect all defaultProps assignments
+                this.collectDefaultProps(cu);
+
+                if (this.defaultPropsMap.size === 0) {
+                    return cu;
+                }
+
+                // Second pass: apply defaults to function declarations
+                let result = await super.visitJsCompilationUnit(cu, ctx) as JS.CompilationUnit;
+
+                // Remove defaultProps assignment statements
+                if (this.statementsToRemove.size > 0) {
+                    const filteredStatements = result.statements.filter(stmt => {
+                        const s = stmt.element;
+                        return !s || !this.statementsToRemove.has((s as any).id);
+                    });
+
+                    if (filteredStatements.length !== result.statements.length) {
+                        result = create(result, draft => {
+                            draft.statements = filteredStatements as any;
+                        });
+                    }
+                }
+
+                return result;
+            }
+
+            private collectDefaultProps(cu: JS.CompilationUnit): void {
+                for (const stmt of cu.statements) {
+                    const s = stmt.element;
+                    if (!s) continue;
+
+                    // Look for ExpressionStatement wrapping an Assignment
+                    let assignment: J.Assignment | undefined;
+
+                    if (s.kind === JS.Kind.ExpressionStatement) {
+                        const exprStmt = s as JS.ExpressionStatement;
+                        const expr = exprStmt.expression;
+                        if (expr.kind === J.Kind.Assignment) {
+                            assignment = expr as J.Assignment;
+                        }
+                    } else if (s.kind === J.Kind.Assignment) {
+                        assignment = s as J.Assignment;
+                    }
+
+                    if (!assignment) continue;
+
+                    // Check for Component.defaultProps = { ... }
+                    if (assignment.variable.kind !== J.Kind.FieldAccess) continue;
+                    const fa = assignment.variable as J.FieldAccess;
+                    if (fa.name.element.simpleName !== 'defaultProps') continue;
+                    if (!isIdentifier(fa.target)) continue;
+                    const componentName = (fa.target as J.Identifier).simpleName;
+
+                    // Extract the object literal values
+                    const rhs = assignment.assignment.element;
+                    if (!rhs) continue;
+
+                    const defaults = this.extractObjectLiteralDefaults(rhs);
+                    if (defaults.size > 0) {
+                        this.defaultPropsMap.set(componentName, defaults);
+                        this.statementsToRemove.add((s as any).id);
+                    }
+                }
+            }
+
+            private extractObjectLiteralDefaults(expr: Expression): Map<string, Expression> {
+                const defaults = new Map<string, Expression>();
+
+                // Object literals are represented as J.NewClass in the AST
+                if (expr.kind === J.Kind.NewClass) {
+                    const newClass = expr as J.NewClass;
+                    if (newClass.body) {
+                        for (const stmt of newClass.body.statements) {
+                            const s = stmt.element;
+                            if (!s) continue;
+
+                            if (s.kind === JS.Kind.PropertyAssignment) {
+                                const prop = s as JS.PropertyAssignment;
+                                const nameExpr = prop.name.element;
+                                if (isIdentifier(nameExpr) && prop.initializer) {
+                                    defaults.set(nameExpr.simpleName, prop.initializer);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                return defaults;
+            }
+
+            // Apply defaults to function parameter destructuring
+            override async visitMethodDeclaration(method: J.MethodDeclaration, ctx: ExecutionContext): Promise<J | undefined> {
+                const m = await super.visitMethodDeclaration(method, ctx) as J.MethodDeclaration;
+                return this.applyDefaults(m.name.simpleName, m);
+            }
+
+            private applyDefaults(componentName: string, method: J.MethodDeclaration): J.MethodDeclaration {
+                const defaults = this.defaultPropsMap.get(componentName);
+                if (!defaults || defaults.size === 0) return method;
+
+                // Parameters structure: method.parameters.elements → [J.VariableDeclarations]
+                // Each VariableDeclarations has .variables → [J.RightPadded<NamedVariable>]
+                // NamedVariable.name → ObjectBindingPattern
+                // ObjectBindingPattern.bindings.elements → [J.RightPadded<JS.BindingElement>]
+                const params = method.parameters;
+                if (!params) return method;
+
+                const paramElements = params.elements;
+                if (!paramElements || paramElements.length === 0) return method;
+
+                // The first param element is J.VariableDeclarations (the destructured props)
+                const firstParamPadded = paramElements[0];
+                const firstParam = (firstParamPadded as any).element ?? firstParamPadded;
+
+                if (firstParam.kind !== J.Kind.VariableDeclarations) return method;
+
+                const varDecls = firstParam as J.VariableDeclarations;
+                if (!varDecls.variables || varDecls.variables.length === 0) return method;
+
+                const firstVarPadded = varDecls.variables[0];
+                const namedVar = firstVarPadded.element as J.VariableDeclarations.NamedVariable;
+                const varName = namedVar.name;
+
+                if ((varName as any).kind !== JS.Kind.ObjectBindingPattern) return method;
+
+                const obp = varName as unknown as JS.ObjectBindingPattern;
+                const updatedBindings = this.addDefaultsToBindings(obp, defaults);
+                if (updatedBindings === obp) return method;
+
+                // Rebuild the tree with updated bindings
+                return create(method, draft => {
+                    const dp = (draft.parameters!.elements[0] as any).element ?? draft.parameters!.elements[0];
+                    dp.variables[0].element.name = updatedBindings;
+                });
+            }
+
+            private addDefaultsToBindings(obp: JS.ObjectBindingPattern, defaults: Map<string, Expression>): JS.ObjectBindingPattern {
+                let changed = false;
+                const updatedElements = obp.bindings.elements.map((elem: any) => {
+                    const el = elem.element ?? elem;
+
+                    // BindingElement: { name: Identifier, initializer?: ... }
+                    if (el.kind === JS.Kind.BindingElement) {
+                        const binding = el as JS.BindingElement;
+                        const name = binding.name;
+                        if (isIdentifier(name) && defaults.has(name.simpleName) && !binding.initializer) {
+                            const defaultVal = defaults.get(name.simpleName)!;
+                            changed = true;
+                            const updatedBinding = create(binding, draft => {
+                                draft.initializer = {
+                                    kind: J.Kind.LeftPadded,
+                                    before: {kind: 'org.openrewrite.java.tree.Space' as const, whitespace: ' ', comments: []},
+                                    element: defaultVal,
+                                    markers: binding.markers
+                                } as any;
+                            });
+                            if (elem.element) {
+                                return {...elem, element: updatedBinding};
+                            }
+                            return updatedBinding;
+                        }
+                    }
+
+                    return elem;
+                });
+
+                if (!changed) return obp;
+
+                return create(obp, draft => {
+                    (draft as any).bindings.elements = updatedElements;
+                });
+            }
+        }();
+    }
+}

package/src/react19/replace-react-shallow-renderer.ts

@@ -0,0 +1,75 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+
+/**
+ * Replaces `react-test-renderer/shallow` imports with `react-shallow-renderer`.
+ *
+ * In React 19, the shallow renderer has been removed from `react-test-renderer`.
+ * This recipe updates imports to use the standalone `react-shallow-renderer` package.
+ *
+ * Before:
+ * ```tsx
+ * import ShallowRenderer from 'react-test-renderer/shallow';
+ * ```
+ *
+ * After:
+ * ```tsx
+ * import ShallowRenderer from 'react-shallow-renderer';
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide
+ */
+export class ReplaceReactShallowRenderer extends Recipe {
+    readonly name = "org.openrewrite.react.19.replace-react-shallow-renderer";
+    readonly displayName: string = "Replace `react-test-renderer/shallow` import";
+    readonly description: string = "Changes import of shallow renderer from `react-test-renderer/shallow` to the standalone `react-shallow-renderer` package, as it was removed from React 19.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitJsCompilationUnit(cu: JS.CompilationUnit, ctx: ExecutionContext): Promise<J | undefined> {
+                let result = await super.visitJsCompilationUnit(cu, ctx) as JS.CompilationUnit;
+
+                let changed = false;
+                const newStatements = result.statements.map((paddedStmt: any) => {
+                    const stmt = paddedStmt.element;
+                    if (!stmt || stmt.kind !== JS.Kind.Import) return paddedStmt;
+
+                    const imp = stmt as JS.Import;
+                    const modSpec = (imp.moduleSpecifier as any).element ?? imp.moduleSpecifier;
+                    if (modSpec.kind !== J.Kind.Literal) return paddedStmt;
+
+                    const literal = modSpec as J.Literal;
+                    if (literal.value !== 'react-test-renderer/shallow') return paddedStmt;
+
+                    const newLiteral = create(literal, draft => {
+                        draft.value = 'react-shallow-renderer';
+                        if (draft.valueSource) {
+                            draft.valueSource = draft.valueSource.replace('react-test-renderer/shallow', 'react-shallow-renderer');
+                        }
+                    });
+
+                    const newModSpec = (imp.moduleSpecifier as any).element
+                        ? {...(imp.moduleSpecifier as any), element: newLiteral}
+                        : newLiteral;
+
+                    changed = true;
+                    return {
+                        ...paddedStmt,
+                        element: {
+                            ...imp,
+                            moduleSpecifier: newModSpec
+                        }
+                    };
+                });
+
+                if (!changed) return result;
+
+                return create(result, draft => {
+                    draft.statements = newStatements as any;
+                });
+            }
+        }();
+    }
+}

package/src/react19/replace-reactdom-hydrate.ts

@@ -0,0 +1,67 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {
+    capture,
+    JavaScriptVisitor,
+    maybeAddImport,
+    maybeRemoveImport,
+    pattern,
+    rewrite,
+    template
+} from "@openrewrite/rewrite/javascript";
+import {Expression, J} from "@openrewrite/rewrite/java";
+
+/**
+ * Replaces `ReactDOM.hydrate()` with `hydrateRoot()`.
+ *
+ * In React 18+, `ReactDOM.hydrate()` is deprecated in favor of
+ * `hydrateRoot()` from `react-dom/client`.
+ *
+ * Before:
+ * ```tsx
+ * import ReactDOM from 'react-dom';
+ * ReactDOM.hydrate(<App />, document.getElementById('root'));
+ * ```
+ *
+ * After:
+ * ```tsx
+ * import { hydrateRoot } from 'react-dom/client';
+ * hydrateRoot(document.getElementById('root'), <App />);
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-reactdom-render
+ */
+export class ReplaceReactDomHydrate extends Recipe {
+    readonly name = "org.openrewrite.react.19.replace-reactdom-hydrate";
+    readonly displayName: string = "Replace `ReactDOM.hydrate` with `hydrateRoot`";
+    readonly description: string = "Migrates from the legacy `ReactDOM.hydrate()` API to the `hydrateRoot()` API from `react-dom/client`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const reactDomOptions = {
+            context: ['import { hydrate } from "react-dom";'],
+            dependencies: {'@types/react-dom': '^17.0.0'}
+        };
+
+        const element = capture<Expression>();
+        const container = capture<Expression>();
+
+        const rule = rewrite(() => ({
+            before: pattern`hydrate(${element}, ${container})`.configure(reactDomOptions),
+            after: template`hydrateRoot(${container}, ${element})`
+        }));
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+
+                const result = await rule.tryOn(this.cursor, m!);
+                if (result) {
+                    maybeRemoveImport(this, "react-dom", "hydrate");
+                    maybeAddImport(this, {module: "react-dom/client", member: "hydrateRoot", onlyIfReferenced: false});
+                    return result;
+                }
+
+                return m;
+            }
+        }();
+    }
+}

package/src/react19/replace-string-ref.ts

@@ -0,0 +1,89 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, raw, template} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+import {JS, JSX} from "@openrewrite/rewrite/javascript";
+
+/**
+ * Replaces deprecated string refs with callback refs.
+ *
+ * String refs have been deprecated in React and are removed in React 19.
+ *
+ * Before:
+ * ```tsx
+ * <input ref="myInput" />
+ * ```
+ *
+ * After:
+ * ```tsx
+ * <input ref={(ref) => { this.refs.myInput = ref; }} />
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-string-refs
+ */
+export class ReplaceStringRef extends Recipe {
+    readonly name = "org.openrewrite.react.19.replace-string-ref";
+    readonly displayName: string = "Replace string refs with callback refs";
+    readonly description: string = "String refs are removed in React 19. This recipe converts them to callback refs.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitJsxAttribute(attribute: JSX.Attribute, ctx: ExecutionContext): Promise<J | undefined> {
+                let attr = await super.visitJsxAttribute(attribute, ctx) as JSX.Attribute;
+
+                // Check if the attribute key is "ref"
+                if (attr.key.kind !== J.Kind.Identifier) {
+                    return attr;
+                }
+                if ((attr.key as J.Identifier).simpleName !== 'ref') {
+                    return attr;
+                }
+
+                // Check if the value is a string literal
+                if (!attr.value) {
+                    return attr;
+                }
+
+                const valueExpr = attr.value.element;
+                if (valueExpr.kind !== J.Kind.Literal) {
+                    return attr;
+                }
+
+                const literal = valueExpr as J.Literal;
+                if (typeof literal.value !== 'string') {
+                    return attr;
+                }
+
+                const refName = literal.value;
+
+                // Use template with raw() to create the callback ref expression
+                const callbackExpr = await template`(ref) => { this.refs.${raw(refName)} = ref; }`.apply(literal, this.cursor);
+
+                if (!callbackExpr) {
+                    return attr;
+                }
+
+                // Wrap in a JSX embedded expression
+                const embeddedExpr = {
+                    kind: JS.Kind.JsxEmbeddedExpression,
+                    id: literal.id,
+                    prefix: literal.prefix,
+                    markers: literal.markers,
+                    expression: {
+                        kind: J.Kind.RightPadded,
+                        element: callbackExpr,
+                        after: literal.prefix,
+                        markers: literal.markers
+                    }
+                } as JSX.EmbeddedExpression;
+
+                return {
+                    ...attr,
+                    value: {
+                        ...attr.value,
+                        element: embeddedExpr
+                    }
+                } as any as JSX.Attribute;
+            }
+        }();
+    }
+}

package/src/react19/replace-use-form-state.ts

@@ -0,0 +1,66 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {
+    JavaScriptVisitor,
+    maybeAddImport,
+    maybeRemoveImport,
+    capture,
+    pattern,
+    rewrite,
+    template
+} from "@openrewrite/rewrite/javascript";
+import {Expression, J} from "@openrewrite/rewrite/java";
+
+/**
+ * Replaces `useFormState()` with `useActionState()` for React 19.
+ *
+ * In React 19, `useFormState` from `react-dom` has been renamed to
+ * `useActionState` and moved to `react`.
+ *
+ * Before:
+ * ```tsx
+ * import { useFormState } from 'react-dom';
+ * const [state, formAction] = useFormState(action, initialState);
+ * ```
+ *
+ * After:
+ * ```tsx
+ * import { useActionState } from 'react';
+ * const [state, formAction] = useActionState(action, initialState);
+ * ```
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#new-hook-useactionstate
+ */
+export class ReplaceUseFormState extends Recipe {
+    readonly name = "org.openrewrite.react.19.replace-use-form-state";
+    readonly displayName: string = "Replace `useFormState` with `useActionState`";
+    readonly description: string = "In React 19, `useFormState` from `react-dom` has been renamed to `useActionState` and moved to `react`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const reactDomOptions = {
+            context: ['import { useFormState } from "react-dom";'],
+            dependencies: {'@types/react-dom': '^18.0.0'}
+        };
+
+        const args = capture<Expression>({variadic: true});
+
+        const rule = rewrite(() => ({
+            before: pattern`useFormState(${args})`.configure(reactDomOptions),
+            after: template`useActionState(${args})`
+        }));
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+
+                const result = await rule.tryOn(this.cursor, m!);
+                if (result) {
+                    maybeRemoveImport(this, "react-dom", "useFormState");
+                    maybeAddImport(this, {module: "react", member: "useActionState", onlyIfReferenced: false});
+                    return result;
+                }
+
+                return m;
+            }
+        }();
+    }
+}

package/src/react19/upgrade-to-react-19.ts

@@ -0,0 +1,66 @@
+import {Recipe} from "@openrewrite/rewrite";
+import {UpgradeToReact18} from "../react18/upgrade-to-react-18";
+import {RemoveForwardRef} from "./remove-forward-ref";
+import {RemoveReactFC} from "./remove-react-fc";
+import {ReplaceActImport} from "./replace-act-import";
+import {RemoveContextProvider} from "./remove-context-provider";
+import {UseContextHook} from "./use-context-hook";
+import {ReplaceUseFormState} from "./replace-use-form-state";
+import {ReplaceStringRef} from "./replace-string-ref";
+import {ReplaceDefaultProps} from "./replace-default-props";
+import {ReplaceReactDomHydrate} from "./replace-reactdom-hydrate";
+import {UseRefRequiredInitial} from "./use-ref-required-initial";
+import {RemovePropTypes} from "./remove-prop-types";
+import {NoImplicitRefCallbackReturn} from "./no-implicit-ref-callback-return";
+import {DeprecatedReactTypes} from "./deprecated-react-types";
+import {ReplaceReactShallowRenderer} from "./replace-react-shallow-renderer";
+
+/**
+ * Composite recipe that applies all React 19 migration recipes.
+ *
+ * Running this recipe applies all necessary changes to upgrade
+ * a React 18 codebase to React 19.
+ *
+ * Changes include:
+ * - Remove `forwardRef` wrapper (ref is now a regular prop)
+ * - Remove `React.FC` type annotations
+ * - Move `act` import from `react-dom/test-utils` to `react`
+ * - Remove `.Provider` from Context JSX elements
+ * - Replace `useContext` with `use`
+ * - Replace `useFormState` with `useActionState`
+ * - Replace string refs with callback refs
+ * - Replace `defaultProps` with default parameters
+ * - Replace `ReactDOM.hydrate` with `hydrateRoot`
+ * - Add `undefined` to `useRef()` calls with no arguments
+ * - Remove `propTypes` assignments
+ * - Wrap implicit ref callback returns in block bodies
+ * - Replace deprecated TypeScript types
+ * - Replace `react-test-renderer/shallow` with `react-shallow-renderer`
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide
+ */
+export class UpgradeToReact19 extends Recipe {
+    readonly name = "org.openrewrite.react.migrate.upgrade-to-react-19";
+    readonly displayName = "Upgrade to React 19";
+    readonly description = "Migrate deprecated and removed APIs for React 19 compatibility. This includes removing forwardRef, updating Context.Provider usage, replacing useContext with use, and other breaking changes.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            new UpgradeToReact18(),
+            new RemoveForwardRef(),
+            new RemoveReactFC(),
+            new ReplaceActImport(),
+            new RemoveContextProvider(),
+            new UseContextHook(),
+            new ReplaceUseFormState(),
+            new ReplaceStringRef(),
+            new ReplaceDefaultProps(),
+            new ReplaceReactDomHydrate(),
+            new UseRefRequiredInitial(),
+            new RemovePropTypes(),
+            new NoImplicitRefCallbackReturn(),
+            new DeprecatedReactTypes(),
+            new ReplaceReactShallowRenderer(),
+        ];
+    }
+}

package/src/react19/use-context-hook.ts

@@ -0,0 +1,67 @@
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {
+    JavaScriptVisitor,
+    maybeAddImport,
+    maybeRemoveImport,
+    capture,
+    pattern,
+    rewrite,
+    template
+} from "@openrewrite/rewrite/javascript";
+import {Expression, J} from "@openrewrite/rewrite/java";
+
+/**
+ * Replaces `useContext()` with `use()` for React 19.
+ *
+ * In React 19, `useContext` is replaced by the new `use` API.
+ *
+ * Before:
+ * ```tsx
+ * import { useContext } from 'react';
+ * const theme = useContext(ThemeContext);
+ * ```
+ *
+ * After:
+ * ```tsx
+ * import { use } from 'react';
+ * const theme = use(ThemeContext);
+ * ```
+ *
+ * Also handles `React.useContext()` → `React.use()`.
+ *
+ * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#use-context
+ */
+export class UseContextHook extends Recipe {
+    readonly name = "org.openrewrite.react.19.use-context-hook";
+    readonly displayName: string = "Replace `useContext` with `use`";
+    readonly description: string = "In React 19, `useContext` is replaced by the `use` API. This recipe updates both direct and namespace imports.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const reactOptions = {
+            context: ['import { useContext } from "react";'],
+            dependencies: {'@types/react': '^18.0.0'}
+        };
+
+        const ctx = capture<Expression>({variadic: true});
+
+        const rule = rewrite(() => ({
+            before: pattern`useContext(${ctx})`.configure(reactOptions),
+            after: template`use(${ctx})`
+        }));
+
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            override async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                let m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+
+                const result = await rule.tryOn(this.cursor, m!);
+                if (result) {
+                    maybeRemoveImport(this, "react", "useContext");
+                    maybeAddImport(this, {module: "react", member: "use", onlyIfReferenced: false});
+                    return result;
+                }
+
+                return m;
+            }
+        }();
+    }
+}