diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index b85d9425cb7ac..c2918121d2afd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -852,7 +852,9 @@ export class Environment { */ return ( this.#globals.get(binding.imported) ?? - (isHookName(binding.imported) ? this.#getCustomHookType() : null) + (isHookName(binding.imported) || isHookName(binding.name) + ? this.#getCustomHookType() + : null) ); } else { const moduleType = this.#resolveModuleType(binding.module, loc); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.expect.md new file mode 100644 index 0000000000000..fea502d0d3bfe --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.expect.md @@ -0,0 +1,140 @@ + +## Input + +```javascript +import { + useEffect, + useRef, + // @ts-expect-error + experimental_useEffectEvent as useEffectEvent, +} from 'react'; + +let id = 0; +function uniqueId() { + 'use no memo'; + return id++; +} + +export function useCustomHook(src: string): void { + const uidRef = useRef(uniqueId()); + const destroyed = useRef(false); + const getItem = (srcName, uid) => { + return {srcName, uid}; + }; + + const getItemEvent = useEffectEvent(() => { + if (destroyed.current) return; + + getItem(src, uidRef.current); + }); + + useEffect(() => { + destroyed.current = false; + getItemEvent(); + }, []); +} + +function Component() { + useCustomHook('hello'); + return
Hello
; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + isComponent: true, + params: [{x: 1}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { + useEffect, + useRef, + // @ts-expect-error + experimental_useEffectEvent as useEffectEvent, +} from "react"; + +let id = 0; +function uniqueId() { + "use no memo"; + return id++; +} + +export function useCustomHook(src) { + const $ = _c(6); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = uniqueId(); + $[0] = t0; + } else { + t0 = $[0]; + } + const uidRef = useRef(t0); + const destroyed = useRef(false); + const getItem = _temp; + let t1; + if ($[1] !== src) { + t1 = () => { + if (destroyed.current) { + return; + } + + getItem(src, uidRef.current); + }; + $[1] = src; + $[2] = t1; + } else { + t1 = $[2]; + } + const getItemEvent = useEffectEvent(t1); + let t2; + if ($[3] !== getItemEvent) { + t2 = () => { + destroyed.current = false; + getItemEvent(); + }; + $[3] = getItemEvent; + $[4] = t2; + } else { + t2 = $[4]; + } + let t3; + if ($[5] === Symbol.for("react.memo_cache_sentinel")) { + t3 = []; + $[5] = t3; + } else { + t3 = $[5]; + } + useEffect(t2, t3); +} +function _temp(srcName, uid) { + return { srcName, uid }; +} + +function Component() { + const $ = _c(1); + useCustomHook("hello"); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 =
Hello
; + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + isComponent: true, + params: [{ x: 1 }], +}; + +``` + +### Eval output +(kind: exception) (0 , _react.experimental_useEffectEvent) is not a function \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.tsx new file mode 100644 index 0000000000000..a1c7220f29058 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/import-as-local.tsx @@ -0,0 +1,42 @@ +import { + useEffect, + useRef, + // @ts-expect-error + experimental_useEffectEvent as useEffectEvent, +} from 'react'; + +let id = 0; +function uniqueId() { + 'use no memo'; + return id++; +} + +export function useCustomHook(src: string): void { + const uidRef = useRef(uniqueId()); + const destroyed = useRef(false); + const getItem = (srcName, uid) => { + return {srcName, uid}; + }; + + const getItemEvent = useEffectEvent(() => { + if (destroyed.current) return; + + getItem(src, uidRef.current); + }); + + useEffect(() => { + destroyed.current = false; + getItemEvent(); + }, []); +} + +function Component() { + useCustomHook('hello'); + return
Hello
; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + isComponent: true, + params: [{x: 1}], +};