feat(debugging): the order of the ref hook that contains the debug data is not required to be first

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 ]------------------------------- -->
 ## [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)

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)