diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts index 1c471930f620d..e43d5f1c57b05 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts @@ -17,6 +17,7 @@ import { BuiltInUseReducerId, BuiltInUseRefId, BuiltInUseStateId, + BuiltInUseTransitionId, ShapeRegistry, addFunction, addHook, @@ -324,6 +325,17 @@ const REACT_APIS: Array<[string, BuiltInType]> = [ returnValueKind: ValueKind.Frozen, }), ], + [ + "useTransition", + addHook(DEFAULT_SHAPES, { + positionalParams: [], + restParam: Effect.Freeze, + returnType: { kind: "Object", shapeId: BuiltInUseTransitionId }, + calleeEffect: Effect.Read, + hookKind: "useTransition", + returnValueKind: ValueKind.Frozen, + }), + ], [ "useEffect", addHook( diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts index b79414de0310f..ba2c7d3eed0cc 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts @@ -1563,8 +1563,19 @@ export function isDispatcherType(id: Identifier): boolean { return id.type.kind === "Function" && id.type.shapeId === "BuiltInDispatch"; } +export function isStartTransitionType(id: Identifier): boolean { + return ( + id.type.kind === "Function" && id.type.shapeId === "BuiltInStartTransition" + ); +} + export function isStableType(id: Identifier): boolean { - return isSetStateType(id) || isSetActionStateType(id) || isDispatcherType(id); + return ( + isSetStateType(id) || + isSetActionStateType(id) || + isDispatcherType(id) || + isStartTransitionType(id) + ); } export function isUseEffectHookType(id: Identifier): boolean { diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts index 0a3451023cd4c..62a5bd9853f6b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts @@ -125,6 +125,7 @@ export type HookKind = | "useLayoutEffect" | "useMemo" | "useCallback" + | "useTransition" | "Custom"; /* @@ -207,6 +208,8 @@ export const BuiltInUseInsertionEffectHookId = "BuiltInUseInsertionEffectHook"; export const BuiltInUseOperatorId = "BuiltInUseOperator"; export const BuiltInUseReducerId = "BuiltInUseReducer"; export const BuiltInDispatchId = "BuiltInDispatch"; +export const BuiltInUseTransitionId = "BuiltInUseTransition"; +export const BuiltInStartTransitionId = "BuiltInStartTransition"; // ShapeRegistry with default definitions for built-ins. export const BUILTIN_SHAPES: ShapeRegistry = new Map(); @@ -445,6 +448,25 @@ addObject(BUILTIN_SHAPES, BuiltInRefValueId, [ ["*", { kind: "Object", shapeId: BuiltInRefValueId }], ]); +addObject(BUILTIN_SHAPES, BuiltInUseTransitionId, [ + ["0", { kind: "Poly" }], + [ + "1", + addFunction( + BUILTIN_SHAPES, + [], + { + positionalParams: [], + restParam: Effect.Freeze, + returnType: PRIMITIVE_TYPE, + calleeEffect: Effect.Read, + returnValueKind: ValueKind.Primitive, + }, + BuiltInStartTransitionId + ), + ], +]); + addObject(BUILTIN_SHAPES, BuiltInMixedReadonlyId, [ [ "toString", diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useTransition-startTransition-considered-as-non-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useTransition-startTransition-considered-as-non-reactive.expect.md new file mode 100644 index 0000000000000..c53b98df8d215 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useTransition-startTransition-considered-as-non-reactive.expect.md @@ -0,0 +1,61 @@ + +## Input + +```javascript +import { useTransition, useState } from "react"; + +function Component() { + const [isPending, startTransition] = useTransition(); + const [state, setState] = useState(1); + return ( +