diff --git a/CHANGELOG.md b/CHANGELOG.md index aaad14734d..24b31fe081 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Fix event lister leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227)) +### Features +- Allow `useRef` hook used for storing debugging data to be defined in any order with other hooks in functional components @layershifter, @mnajdova ([#2236](https://github.com/microsoft/fluent-ui-react/pull/2236)) + ## [v0.43.0](https://github.com/microsoft/fluent-ui-react/tree/v0.43.0) (2020-01-08) [Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.42.0..v0.43.0) diff --git a/packages/react/src/components/Debug/FiberNavigator.ts b/packages/react/src/components/Debug/FiberNavigator.ts index c94ef51b49..4a4bec8b61 100644 --- a/packages/react/src/components/Debug/FiberNavigator.ts +++ b/packages/react/src/components/Debug/FiberNavigator.ts @@ -324,13 +324,39 @@ class FiberNavigator { } get instance() { - return this.isClassComponent - ? this.__fiber.stateNode - : this.isFunctionComponent // TODO: assumes functional component w/useRef - ? this.__fiber.memoizedState && - this.__fiber.memoizedState.memoizedState && - this.__fiber.memoizedState.memoizedState.current - : null + if (this.isClassComponent) { + return this.__fiber.stateNode + } + + if (this.isFunctionComponent) { + // assumes functional component w/useRef + return this.findDebugHookState(this.__fiber.memoizedState) + } + + return null + } + + /** + * Hooks state is represented by a recursive structure where: + * - `memoizedState` is a current value if applicable + * - `next` is next hook in order + * @param node - fiber + */ + findDebugHookState(node) { + if ( + node && + node.memoizedState && + node.memoizedState.current && + node.memoizedState.current.fluentUIDebug + ) { + return node.memoizedState.current + } + + if (node === null || node.next === null) { + return null + } + + return this.findDebugHookState(node.next) } get reactComponent() { @@ -358,10 +384,6 @@ class FiberNavigator { return !!fiberNav && fiberNav.instance === this.instance } - usesHook(name) { - return this.__fiber._debugHookTypes.some(hook => hook === name) - } - find(condition, move) { let fiber: FiberNavigator = FiberNavigator.fromFiber(this.__fiber)