@samitouri / QOS-React / commits / 5b51a2b9e2

fix[DevTools]: support useResourceEffect (#32088)

Since we've started experimenting with it, I've started seeing a spike in errors: ``` Unsupported hook in the react-debug-tools package: Missing method in Dispatcher: useResourceEffect ``` Adding missing hook to the `Dispatcher` that is proxied by React DevTools. I can't really add an example that will use it to our RDT testing shell, because it uses experimental builds of `react`, which don't have this hook. I've tested it manually by rebuilding artifacts with `enableUseResourceEffectHook` flag enabled. ![Screenshot 2025-01-16 at 15 20 00](https://github.com/user-attachments/assets/a0d63fd6-1f17-4710-a2b2-82d484b8987f)

Ruslan Lesiutin committed Jan 16, 2025 at 15:42 UTC 5b51a2b9e249f264b1345cc35b275464ae3ef6eb
1 file changed +23
packages/react-debug-tools/src/ReactDebugHooks.js
+23
@@ -731,6 +731,24 @@ function useHostTransitionStatus(): TransitionStatus {
731 return status;
732 }
733
734 +function useResourceEffect(
735 + create: () => mixed,
736 + createDeps: Array<mixed> | void | null,
737 + update: ((resource: mixed) => void) | void,
738 + updateDeps: Array<mixed> | void | null,
739 + destroy: ((resource: mixed) => void) | void,
740 +) {
741 + nextHook();
742 + hookLog.push({
743 + displayName: null,
744 + primitive: 'ResourceEffect',
745 + stackError: new Error(),
746 + value: create,
747 + debugInfo: null,
748 + dispatcherHookName: 'ResourceEffect',
749 + });
750 +}
751 +
752 const Dispatcher: DispatcherType = {
753 use,
754 readContext,
@@ -755,6 +773,7 @@ const Dispatcher: DispatcherType = {
773 useFormState,
774 useActionState,
775 useHostTransitionStatus,
776 + useResourceEffect,
777 };
778
779 // create a proxy to throw a custom error
@@ -943,6 +962,10 @@ function parseHookName(functionName: void | string): string {
962 startIndex += 'unstable_'.length;
963 }
964
965 + if (functionName.slice(startIndex).startsWith('unstable_')) {
966 + startIndex += 'experimental_'.length;
967 + }
968 +
969 if (functionName.slice(startIndex, startIndex + 3) === 'use') {
970 if (functionName.length - startIndex === 3) {
971 return 'Use';