bippy 0.6.1-dev.d7876ea → 0.6.1-dev.f9e6c65

package/src/errors.ts

@@ -5,55 +5,6 @@ export class BippyError extends Error {
   }
 }
 
-export class BippyInstrumentationError extends BippyError {
-  readonly callbackName: string;
-  readonly instrumentationName: string;
-
-  constructor(instrumentationName: string, callbackName: string, cause: unknown) {
-    super(
-      `Bippy instrumentation "${instrumentationName}" callback "${callbackName}" failed`,
-      cause,
-    );
-    this.name = "BippyInstrumentationError";
-    this.callbackName = callbackName;
-    this.instrumentationName = instrumentationName;
-  }
-}
-
-export class BippyReactDevToolsError extends BippyError {
-  readonly callbackName: string;
-
-  constructor(callbackName: string, cause: unknown) {
-    super(`React DevTools callback "${callbackName}" failed`, cause);
-    this.name = "BippyReactDevToolsError";
-    this.callbackName = callbackName;
-  }
-}
-
-export class BippyHookListenerError extends BippyError {
-  readonly listenerName: string;
-
-  constructor(listenerName: string, cause: unknown) {
-    super(`Bippy hook listener "${listenerName}" failed`, cause);
-    this.name = "BippyHookListenerError";
-    this.listenerName = listenerName;
-  }
-}
-
-export class BippyHookInstallationError extends BippyError {
-  constructor(cause: unknown) {
-    super("Bippy could not install the React DevTools hook", cause);
-    this.name = "BippyHookInstallationError";
-  }
-}
-
-export class BippyReactBuildError extends BippyError {
-  constructor(message: string, cause?: unknown) {
-    super(message, cause);
-    this.name = "BippyReactBuildError";
-  }
-}
-
 export class BippyHookInspectionError extends BippyError {
   constructor(message: string, cause?: unknown) {
     super(message, cause);
@@ -81,19 +32,3 @@ export class BippySourceMapError extends BippyError {
     this.name = "BippySourceMapError";
   }
 }
-
-interface BippyErrorFactory {
-  (cause: unknown): BippyError;
-}
-
-export const runWithBippyError = <Result>(
-  callback: () => Result,
-  createError: BippyErrorFactory,
-): Result => {
-  try {
-    return callback();
-  } catch (cause) {
-    if (cause instanceof BippyError) throw cause;
-    throw createError(cause);
-  }
-};

package/src/index.ts

@@ -1,3 +1,4 @@
 import "./install-hook-only.js";
 
 export * from "./core.js";
+export * from "./react.js";

package/src/install-hook-only.ts

@@ -1,3 +1,3 @@
-import { safelyInstallRDTHook } from "./rdt-hook.js";
+import { getRDTHook } from "./rdt-hook.js";
 
-safelyInstallRDTHook();
+getRDTHook();

package/src/rdt-hook.ts

@@ -1,13 +1,10 @@
 // This module must load before React so renderers can inject into the hook.
 
-import {
-  BippyHookInstallationError,
-  BippyHookListenerError,
-  BippyReactBuildError,
-  runWithBippyError,
-} from "./errors.js";
-import type { ReactDevToolsGlobalHook, ReactRenderer } from "./types.js";
-import { toUnsubscribe, type Unsubscribe } from "./unsubscribe.js";
+import type { ReactDevToolsGlobalHook, ReactRenderer } from "./react-internals/index.js";
+
+export interface Unsubscribe extends Disposable {
+  (): void;
+}
 
 interface ActiveListener {
   (): unknown;
@@ -28,20 +25,19 @@ const objectDefineProperty = Object.defineProperty;
 
 const noOp = (): void => {};
 
-const runHookListener = (listenerName: string, callback: () => unknown): void =>
-  runWithBippyError(callback, (cause) => new BippyHookListenerError(listenerName, cause));
+export const createUnsubscribe = (unsubscribe: () => void): Unsubscribe =>
+  Object.assign(unsubscribe, { [Symbol.dispose]: unsubscribe });
 
 const checkDCE = (functionToCheck: unknown): void => {
   try {
     const code = Function.prototype.toString.call(functionToCheck);
-    if (code.includes("^_^")) {
-      // HACK: React DevTools reports failed dead-code elimination asynchronously.
+    if (code.indexOf("^_^") > -1) {
       setTimeout(() => {
-        throw new BippyReactBuildError(
+        throw new Error(
           "React is running in production mode, but dead code " +
             "elimination has not been applied. Read how to correctly " +
             "configure React for production: " +
-            "https://reactjs.org/link/perf-use-production-build",
+            "https://react.dev/link/perf-use-production-build",
         );
       });
     }
@@ -69,19 +65,19 @@ const notifyingInjectByHook = new WeakMap<
 
 const notifyActiveListeners = (): void => {
   for (const listener of _onActiveListeners) {
-    runHookListener("onActive", listener);
+    listener();
   }
 };
 
 const notifyRendererInjectListeners = (renderer: ReactRenderer): void => {
   for (const listener of rendererInjectListeners) {
-    runHookListener("onRendererInject", () => listener(renderer));
+    listener(renderer);
   }
 };
 
 const notifyRDTHookReplaceListeners = (rdtHook: ReactDevToolsGlobalHook): void => {
   for (const listener of rdtHookReplaceListeners) {
-    runHookListener("onRDTHookReplace", () => listener(rdtHook));
+    listener(rdtHook);
   }
 };
 
@@ -103,14 +99,14 @@ const setRendererInjectDispatcher = (rdtHook: ReactDevToolsGlobalHook): void =>
 export const onRendererInject = (listener: RendererInjectListener): Unsubscribe => {
   setRendererInjectDispatcher(getRDTHook());
   rendererInjectListeners.add(listener);
-  return toUnsubscribe(() => {
+  return createUnsubscribe(() => {
     rendererInjectListeners.delete(listener);
   });
 };
 
 export const onRDTHookReplace = (listener: RDTHookReplaceListener): Unsubscribe => {
   rdtHookReplaceListeners.add(listener);
-  return toUnsubscribe(() => {
+  return createUnsubscribe(() => {
     rdtHookReplaceListeners.delete(listener);
   });
 };
@@ -122,6 +118,20 @@ const getRendererMap = (rdtHook: ReactDevToolsGlobalHook): Map<number, ReactRend
   return rdtHook.renderers;
 };
 
+const trackInjectedRenderer = (
+  rdtHook: ReactDevToolsGlobalHook,
+  renderers: Map<number, ReactRenderer>,
+  rendererId: number,
+  renderer: ReactRenderer,
+): void => {
+  renderers.set(rendererId, renderer);
+  _renderers.add(renderer);
+  if (!rdtHook._instrumentationIsActive) {
+    rdtHook._instrumentationIsActive = true;
+    notifyActiveListeners();
+  }
+};
+
 export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHook => {
   if (onActive) {
     _onActiveListeners.add(onActive);
@@ -135,12 +145,7 @@ export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHo
     hasUnsupportedRendererAttached: false,
     inject: (renderer) => {
       const nextRendererId = ++rendererIdCounter;
-      renderers.set(nextRendererId, renderer);
-      _renderers.add(renderer);
-      if (!rdtHook._instrumentationIsActive) {
-        rdtHook._instrumentationIsActive = true;
-        notifyActiveListeners();
-      }
+      trackInjectedRenderer(rdtHook, renderers, nextRendererId, renderer);
       return nextRendererId;
     },
     on: noOp,
@@ -163,12 +168,10 @@ export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHo
           const ourRenderers = rdtHook.renderers;
           rdtHook = newHook;
           const nextRenderers = getRendererMap(rdtHook);
-          if (ourRenderers.size > 0) {
-            ourRenderers.forEach((renderer, rendererId) => {
-              _renderers.add(renderer);
-              nextRenderers.set(rendererId, renderer);
-            });
-          }
+          ourRenderers.forEach((renderer, rendererId) => {
+            _renderers.add(renderer);
+            nextRenderers.set(rendererId, renderer);
+          });
           if (ourRenderers.size > 0 || rdtHookReplaceListeners.size > 0) {
             patchRDTHook(onActive);
           }
@@ -193,14 +196,14 @@ export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHo
       };
       objectDefineProperty(window, "hasOwnProperty", {
         configurable: true,
-        value: (...propertyKeys: [PropertyKey]) => {
-          if (!didRunHasOwnPropertyHack && propertyKeys[0] === "__REACT_DEVTOOLS_GLOBAL_HOOK__") {
+        value: (propertyKey: PropertyKey) => {
+          if (!didRunHasOwnPropertyHack && propertyKey === "__REACT_DEVTOOLS_GLOBAL_HOOK__") {
             didRunHasOwnPropertyHack = true;
             restoreWindowHasOwnProperty();
             globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = undefined;
             return false;
           }
-          return originalWindowHasOwnProperty(...propertyKeys);
+          return originalWindowHasOwnProperty(propertyKey);
         },
         writable: true,
       });
@@ -240,17 +243,12 @@ export const patchRDTHook = (onActive?: ActiveListener): void => {
     const previousInject = rdtHook.inject;
     rdtHook.inject = (renderer) => {
       const rendererId = previousInject.call(rdtHook, renderer);
-      _renderers.add(renderer);
-      renderers.set(rendererId, renderer);
-      if (!rdtHook._instrumentationIsActive) {
-        rdtHook._instrumentationIsActive = true;
-        notifyActiveListeners();
-      }
+      trackInjectedRenderer(rdtHook, renderers, rendererId, renderer);
       return rendererId;
     };
   }
   if (!didNotifyActiveListeners && (renderers.size || rdtHook._instrumentationIsActive)) {
-    if (onActive) runHookListener("onActive", onActive);
+    onActive?.();
   }
 };
 
@@ -269,7 +267,3 @@ export const getRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHook =
   patchRDTHook(onActive);
   return globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? installRDTHook(onActive);
 };
-
-export const safelyInstallRDTHook = (): void => {
-  runWithBippyError(getRDTHook, (cause) => new BippyHookInstallationError(cause));
-};

package/src/{generated/react-work-tags.js → react-internals/generated/react-work-tags.ts}

@@ -1,8 +1,10 @@
 import { compareSemver } from "../semver.js";
+
 export const ReactBuildType = {
   Development: 1,
   Production: 0,
-};
+} as const;
+
 export const ReactFiberFlags = {
   ChildDeletion: 16,
   Cloned: 8,
@@ -13,7 +15,8 @@ export const ReactFiberFlags = {
   Snapshot: 1024,
   Update: 4,
   Visibility: 8192,
-};
+} as const;
+
 export const ReactSymbols = {
   CONCURRENT_MODE_NUMBER: 60111,
   CONCURRENT_MODE_SYMBOL_DESCRIPTION: "react.concurrent_mode",
@@ -22,8 +25,49 @@ export const ReactSymbols = {
   DEPRECATED_ASYNC_MODE_SYMBOL_STRING: "Symbol(react.async_mode)",
   ELEMENT_SYMBOL_STRING: "Symbol(react.transitional.element)",
   LEGACY_ELEMENT_SYMBOL_STRING: "Symbol(react.element)",
-};
-const defineReactWorkTags = (workTags) => workTags;
+} as const;
+
+export interface ReactWorkTagMap {
+  ActivityComponent: number;
+  CacheComponent: number;
+  ClassComponent: number;
+  ContextConsumer: number;
+  ContextProvider: number;
+  CoroutineComponent: number;
+  CoroutineHandlerPhase: number;
+  DehydratedSuspenseComponent: number;
+  ForwardRef: number;
+  Fragment: number;
+  FunctionComponent: number;
+  HostComponent: number;
+  HostHoistable: number;
+  HostPortal: number;
+  HostRoot: number;
+  HostSingleton: number;
+  HostText: number;
+  IncompleteClassComponent: number;
+  IncompleteFunctionComponent: number;
+  IndeterminateComponent: number;
+  LazyComponent: number;
+  LegacyHiddenComponent: number;
+  MemoComponent: number;
+  Mode: number;
+  OffscreenComponent: number;
+  Profiler: number;
+  ScopeComponent: number;
+  SimpleMemoComponent: number;
+  SuspenseComponent: number;
+  SuspenseListComponent: number;
+  Throw: number;
+  TracingMarkerComponent: number;
+  ViewTransitionComponent: number;
+  YieldComponent: number;
+}
+
+const defineReactWorkTags = <const VersionedWorkTags extends Record<string, ReactWorkTagMap>>(
+  workTags: VersionedWorkTags,
+): VersionedWorkTags => workTags;
+
 const reactWorkTagsByVersion = defineReactWorkTags({
   "16.0.0": {
     ActivityComponent: -1,
@@ -206,7 +250,37 @@ const reactWorkTagsByVersion = defineReactWorkTags({
     YieldComponent: -1,
   },
 });
-const reactWorkTagRanges = [
+
+export type ReactWorkTagVersion = keyof typeof reactWorkTagsByVersion;
+
+export interface GetReactWorkTags {
+  (): Readonly<ReactWorkTagMap>;
+  <Version extends ReactWorkTagVersion>(
+    reactVersion: Version,
+  ): Readonly<(typeof reactWorkTagsByVersion)[Version]>;
+  (reactVersion: string): Readonly<ReactWorkTagMap>;
+}
+
+export type ReactWorkTag = Exclude<
+  (typeof reactWorkTagsByVersion)[ReactWorkTagVersion][keyof ReactWorkTagMap],
+  -1
+>;
+
+export type HostWorkTag = Exclude<
+  | (typeof reactWorkTagsByVersion)[ReactWorkTagVersion]["HostComponent"]
+  | (typeof reactWorkTagsByVersion)[ReactWorkTagVersion]["HostHoistable"]
+  | (typeof reactWorkTagsByVersion)[ReactWorkTagVersion]["HostSingleton"]
+  | (typeof reactWorkTagsByVersion)[ReactWorkTagVersion]["HostText"],
+  -1
+>;
+
+interface ReactWorkTagRange {
+  isMinimumExcluded: boolean;
+  minimumVersion: string;
+  workTags: Readonly<ReactWorkTagMap>;
+}
+
+const reactWorkTagRanges: ReactWorkTagRange[] = [
   {
     isMinimumExcluded: true,
     minimumVersion: "17.0.1",
@@ -228,10 +302,14 @@ const reactWorkTagRanges = [
     workTags: reactWorkTagsByVersion["16.4.3-alpha"],
   },
 ];
-export const getReactWorkTags = (reactVersion) => {
+
+const defaultReactWorkTags = reactWorkTagsByVersion["17.0.2"];
+
+export const getReactWorkTags: GetReactWorkTags = (reactVersion?: string) => {
+  if (reactVersion === undefined) return defaultReactWorkTags;
   for (const range of reactWorkTagRanges) {
     const comparison = compareSemver(reactVersion, range.minimumVersion);
-    if (comparison === null) return reactWorkTagsByVersion["17.0.2"];
+    if (comparison === null) return defaultReactWorkTags;
     if (comparison === 1 || (comparison === 0 && !range.isMinimumExcluded)) {
       return range.workTags;
     }

package/src/{react-internals.ts → react-internals/index.ts}

@@ -1,8 +1,9 @@
 import { getReactWorkTags, ReactFiberFlags } from "./generated/react-work-tags.js";
 import type { ReactWorkTagMap } from "./generated/react-work-tags.js";
-import { compareSemver } from "./semver.js";
+import { isSemver } from "./semver.js";
 import type { Fiber, ReactRenderer } from "./types.js";
 
+export { compareSemver } from "./semver.js";
 export {
   getReactWorkTags,
   ReactBuildType,
@@ -15,18 +16,19 @@ export type {
   ReactWorkTagMap,
   ReactWorkTagVersion,
 } from "./generated/react-work-tags.js";
+export * from "./types.js";
 
-const defaultReactWorkTags = getReactWorkTags("");
+const defaultReactWorkTags = getReactWorkTags();
 const fiberReactWorkTags = new WeakMap<Fiber, Readonly<ReactWorkTagMap>>();
 
 export const getReactWorkTagsForRenderer = (
   renderer?: ReactRenderer | null,
 ): Readonly<ReactWorkTagMap> => {
   const reconcilerVersion = renderer?.reconcilerVersion;
-  if (reconcilerVersion && compareSemver(reconcilerVersion, reconcilerVersion) === 0) {
+  if (reconcilerVersion && isSemver(reconcilerVersion)) {
     return getReactWorkTags(reconcilerVersion);
   }
-  return getReactWorkTags(renderer?.version ?? "");
+  return renderer?.version ? getReactWorkTags(renderer.version) : defaultReactWorkTags;
 };
 
 export const setReactWorkTagsForFiber = (fiber: Fiber, renderer?: ReactRenderer): void => {

package/src/{semver.ts → react-internals/semver.ts}

@@ -9,6 +9,8 @@ const SEMVER_PATTERN =
   /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?(?:\+[0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*)?$/;
 const NUMERIC_IDENTIFIER_PATTERN = /^\d+$/;
 
+export const isSemver = (version: string): boolean => parseSemver(version) !== null;
+
 const parseSemver = (version: string): SemanticVersion | null => {
   const match = SEMVER_PATTERN.exec(version);
   if (!match) return null;

package/src/{types.ts → react-internals/types.ts}

@@ -1,85 +1,13 @@
 import type { ReactNode } from "react";
 import type ReactReconciler from "react-reconciler";
-import type { HostWorkTag, ReactWorkTag } from "./react-internals.js";
+import type { HostWorkTag, ReactWorkTag } from "./generated/react-work-tags.js";
 
-export type BundleType = ReactReconciler.BundleType;
-export type Flags = ReactReconciler.Flags;
-export type HookType = ReactReconciler.HookType;
-export type LanePriority = ReactReconciler.LanePriority;
-export type Lanes = ReactReconciler.Lanes;
-export type MutableSource = ReactReconciler.MutableSource;
-export type OpaqueHandle = ReactReconciler.OpaqueHandle;
-export type OpaqueRoot = ReactReconciler.OpaqueRoot;
-export type React$AbstractComponent<
-  Config,
-  Instance = unknown,
-> = ReactReconciler.React$AbstractComponent<Config, Instance>;
-export type RootTag = ReactReconciler.RootTag;
-export type TypeOfMode = ReactReconciler.TypeOfMode;
 export type WorkTag = ReactReconciler.WorkTag | ReactWorkTag;
 
-export interface HostConfig<
-  Type = unknown,
-  HostProps = unknown,
-  Container = unknown,
-  Instance = unknown,
-  TextInstance = unknown,
-  SuspenseInstance = unknown,
-  HydratableInstance = unknown,
-  FormInstance = unknown,
-  PublicInstance = unknown,
-  HostContext = unknown,
-  ChildSet = unknown,
-  TimeoutHandle = unknown,
-  NoTimeout = unknown,
-  TransitionStatus = unknown,
-> extends ReactReconciler.HostConfig<
-  Type,
-  HostProps,
-  Container,
-  Instance,
-  TextInstance,
-  SuspenseInstance,
-  HydratableInstance,
-  FormInstance,
-  PublicInstance,
-  HostContext,
-  ChildSet,
-  TimeoutHandle,
-  NoTimeout,
-  TransitionStatus
-> {}
-
 export interface Source extends ReactReconciler.Source {}
-export interface RefObject extends ReactReconciler.RefObject {}
-export interface Thenable<T> extends ReactReconciler.Thenable<T> {}
 
 export interface ReactContext<T> extends ReactReconciler.ReactContext<T> {}
 
-export interface ReactProviderType<T> extends ReactReconciler.ReactProviderType<T> {}
-export interface ReactProvider<T> extends ReactReconciler.ReactProvider<T> {}
-export interface ReactConsumer<T> extends ReactReconciler.ReactConsumer<T> {}
-export interface ReactPortal extends ReactReconciler.ReactPortal {}
-
-export interface ComponentSelector extends ReactReconciler.ComponentSelector {}
-export interface HasPseudoClassSelector extends ReactReconciler.HasPseudoClassSelector {}
-export interface RoleSelector extends ReactReconciler.RoleSelector {}
-export interface TextSelector extends ReactReconciler.TextSelector {}
-export interface TestNameSelector extends ReactReconciler.TestNameSelector {}
-export type Selector = ReactReconciler.Selector;
-
-export interface DevToolsConfig<
-  Instance = unknown,
-  TextInstance = unknown,
-  RendererInspectionConfig = unknown,
-> extends ReactReconciler.DevToolsConfig<Instance, TextInstance, RendererInspectionConfig> {}
-
-export interface SuspenseHydrationCallbacks<
-  SuspenseInstance = unknown,
-> extends ReactReconciler.SuspenseHydrationCallbacks<SuspenseInstance> {}
-
-export interface TransitionTracingCallbacks extends ReactReconciler.TransitionTracingCallbacks {}
-
 // HACK: React 17 exposes observedBits while React 18+ exposes memoizedValue on context dependencies.
 export interface ContextDependency<T> extends Omit<
   ReactReconciler.ContextDependency<T>,
@@ -98,15 +26,6 @@ export interface Dependencies extends Omit<ReactReconciler.Dependencies, "firstC
   firstContext: ContextDependency<unknown> | null;
 }
 
-export interface Effect {
-  [key: string]: unknown;
-  create: (...args: unknown[]) => unknown;
-  deps: null | unknown[];
-  destroy: ((...args: unknown[]) => unknown) | null;
-  next: Effect | null;
-  tag: number;
-}
-
 export interface ServerComponentInfo {
   name?: string;
   env?: string;
@@ -131,8 +50,6 @@ export interface FiberDebugSource extends Source {
 
 export interface FiberUpdateQueue {
   [key: string]: unknown;
-  dispatch?: unknown;
-  lastEffect: Effect | null;
   memoCache?: ReactMemoCache;
 }
 

package/src/react.ts

@@ -0,0 +1,76 @@
+import "./install-hook-only.js";
+import * as React from "react";
+import { isValidFiber } from "./core.js";
+import type { Fiber } from "./react-internals/index.js";
+
+export type { Fiber } from "./react-internals/index.js";
+
+const preserveState = (state: undefined): undefined => state;
+const readEmptySnapshot = (): undefined => undefined;
+const unsubscribeFromEmptyStore = (): void => {};
+const subscribeToEmptyStore = (): (() => void) => unsubscribeFromEmptyStore;
+const useSyncExternalStore: unknown = Reflect.get(React, "useSyncExternalStore");
+
+const captureFiberFromHook = (useCaptureHook: () => void): Fiber | null => {
+  const originalBind = Function.prototype.bind;
+  let capturedFiber: Fiber | null = null;
+  // HACK: React binds hook callbacks to the rendering Fiber in production but exposes no public API for it.
+  const bindProxy = new Proxy(originalBind, {
+    apply: (bind, functionToBind, boundArguments) => {
+      const fiber = boundArguments[1];
+      if (!capturedFiber && isValidFiber(fiber)) {
+        capturedFiber = fiber;
+      }
+      return Reflect.apply(bind, functionToBind, boundArguments);
+    },
+  });
+  Reflect.set(Function.prototype, "bind", bindProxy);
+
+  try {
+    useCaptureHook();
+  } finally {
+    if (Function.prototype.bind === bindProxy) {
+      Reflect.set(Function.prototype, "bind", originalBind);
+    }
+  }
+
+  return capturedFiber;
+};
+
+const useExternalStoreCapture = (): void => {
+  Reflect.apply(useSyncExternalStore, React, [
+    subscribeToEmptyStore,
+    readEmptySnapshot,
+    readEmptySnapshot,
+  ]);
+};
+
+const useReducerCapture = (): void => {
+  React.useReducer(preserveState, undefined);
+};
+
+const useFiberWithExternalStore = (): Fiber | undefined =>
+  captureFiberFromHook(useExternalStoreCapture) ?? undefined;
+
+const useFiberWithReducer = (): Fiber | undefined => {
+  const committedFiberRef = React.useRef<Fiber | null>(null);
+  const renderedFiberRef = React.useRef<Fiber | null>(null);
+  const hookFiber = captureFiberFromHook(useReducerCapture);
+  const fiber =
+    hookFiber ??
+    (renderedFiberRef.current !== committedFiberRef.current
+      ? renderedFiberRef.current
+      : committedFiberRef.current?.alternate) ??
+    committedFiberRef.current;
+
+  renderedFiberRef.current = fiber;
+
+  React.useEffect(() => {
+    committedFiberRef.current = fiber;
+  }, [fiber]);
+
+  return fiber ?? undefined;
+};
+
+export const useFiber =
+  typeof useSyncExternalStore === "function" ? useFiberWithExternalStore : useFiberWithReducer;