Skip to content

Commit

Permalink
fix[DevTools]: support useResourceEffect (#32088)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
hoxyq authored Jan 16, 2025
1 parent 6093f18 commit 5b51a2b
Showing 1 changed file with 23 additions and 0 deletions.
23 changes: 23 additions & 0 deletions packages/react-debug-tools/src/ReactDebugHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -731,6 +731,24 @@ function useHostTransitionStatus(): TransitionStatus {
return status;
}

function useResourceEffect(
create: () => mixed,
createDeps: Array<mixed> | void | null,
update: ((resource: mixed) => void) | void,
updateDeps: Array<mixed> | void | null,
destroy: ((resource: mixed) => void) | void,
) {
nextHook();
hookLog.push({
displayName: null,
primitive: 'ResourceEffect',
stackError: new Error(),
value: create,
debugInfo: null,
dispatcherHookName: 'ResourceEffect',
});
}

const Dispatcher: DispatcherType = {
use,
readContext,
Expand All @@ -755,6 +773,7 @@ const Dispatcher: DispatcherType = {
useFormState,
useActionState,
useHostTransitionStatus,
useResourceEffect,
};

// create a proxy to throw a custom error
Expand Down Expand Up @@ -943,6 +962,10 @@ function parseHookName(functionName: void | string): string {
startIndex += 'unstable_'.length;
}

if (functionName.slice(startIndex).startsWith('unstable_')) {
startIndex += 'experimental_'.length;
}

if (functionName.slice(startIndex, startIndex + 3) === 'use') {
if (functionName.length - startIndex === 3) {
return 'Use';
Expand Down

0 comments on commit 5b51a2b

Please sign in to comment.