Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

devtools: Use context displayName for context hook name #25954

Merged
merged 3 commits into from
Feb 24, 2024
+41 −2
Merged

devtools: Use context displayName for context hook name #25954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4b7d443
devtools: Use context displayName for context hook name
eps1lon Jan 1, 2023
d0a4b61
f
Feb 18, 2024
b173f2e
Remove duplicate test
Feb 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions packages/react-debug-tools/src/ReactDebugHooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
// Used to track hooks called during a render

type HookLogEntry = {
displayName: string | null,
primitive: string,
stackError: Error,
value: mixed,
Expand Down Expand Up @@ -164,6 +165,7 @@ function use<T>(usable: Usable<T>): T {
case 'fulfilled': {
const fulfilledValue: T = thenable.value;
hookLog.push({
displayName: null,
primitive: 'Promise',
stackError: new Error(),
value: fulfilledValue,
Expand All @@ -180,6 +182,7 @@ function use<T>(usable: Usable<T>): T {
// If this was an uncached Promise we have to abandon this attempt
// but we can still emit anything up until this point.
hookLog.push({
displayName: null,
primitive: 'Unresolved',
stackError: new Error(),
value: thenable,
Expand All @@ -192,6 +195,7 @@ function use<T>(usable: Usable<T>): T {
const value = readContext(context);

hookLog.push({
displayName: context.displayName || 'Context',
primitive: 'Context (use)',
stackError: new Error(),
value,
Expand All @@ -208,6 +212,7 @@ function use<T>(usable: Usable<T>): T {

function useContext<T>(context: ReactContext<T>): T {
hookLog.push({
displayName: context.displayName || null,
primitive: 'Context',
stackError: new Error(),
value: context._currentValue,
Expand All @@ -228,6 +233,7 @@ function useState<S>(
initialState()
: initialState;
hookLog.push({
displayName: null,
primitive: 'State',
stackError: new Error(),
value: state,
Expand All @@ -249,6 +255,7 @@ function useReducer<S, I, A>(
state = init !== undefined ? init(initialArg) : ((initialArg: any): S);
}
hookLog.push({
displayName: null,
primitive: 'Reducer',
stackError: new Error(),
value: state,
Expand All @@ -261,6 +268,7 @@ function useRef<T>(initialValue: T): {current: T} {
const hook = nextHook();
const ref = hook !== null ? hook.memoizedState : {current: initialValue};
hookLog.push({
displayName: null,
primitive: 'Ref',
stackError: new Error(),
value: ref.current,
Expand All @@ -272,6 +280,7 @@ function useRef<T>(initialValue: T): {current: T} {
function useCacheRefresh(): () => void {
const hook = nextHook();
hookLog.push({
displayName: null,
primitive: 'CacheRefresh',
stackError: new Error(),
value: hook !== null ? hook.memoizedState : function refresh() {},
Expand All @@ -286,6 +295,7 @@ function useLayoutEffect(
): void {
nextHook();
hookLog.push({
displayName: null,
primitive: 'LayoutEffect',
stackError: new Error(),
value: create,
Expand All @@ -299,6 +309,7 @@ function useInsertionEffect(
): void {
nextHook();
hookLog.push({
displayName: null,
primitive: 'InsertionEffect',
stackError: new Error(),
value: create,
Expand All @@ -312,6 +323,7 @@ function useEffect(
): void {
nextHook();
hookLog.push({
displayName: null,
primitive: 'Effect',
stackError: new Error(),
value: create,
Expand All @@ -334,6 +346,7 @@ function useImperativeHandle<T>(
instance = ref.current;
}
hookLog.push({
displayName: null,
primitive: 'ImperativeHandle',
stackError: new Error(),
value: instance,
Expand All @@ -343,6 +356,7 @@ function useImperativeHandle<T>(

function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
hookLog.push({
displayName: null,
primitive: 'DebugValue',
stackError: new Error(),
value: typeof formatterFn === 'function' ? formatterFn(value) : value,
Expand All @@ -353,6 +367,7 @@ function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
const hook = nextHook();
hookLog.push({
displayName: null,
primitive: 'Callback',
stackError: new Error(),
value: hook !== null ? hook.memoizedState[0] : callback,
Expand All @@ -368,6 +383,7 @@ function useMemo<T>(
const hook = nextHook();
const value = hook !== null ? hook.memoizedState[0] : nextCreate();
hookLog.push({
displayName: null,
primitive: 'Memo',
stackError: new Error(),
value,
Expand All @@ -388,6 +404,7 @@ function useSyncExternalStore<T>(
nextHook(); // Effect
const value = getSnapshot();
hookLog.push({
displayName: null,
primitive: 'SyncExternalStore',
stackError: new Error(),
value,
Expand All @@ -406,6 +423,7 @@ function useTransition(): [
nextHook(); // State
nextHook(); // Callback
hookLog.push({
displayName: null,
primitive: 'Transition',
stackError: new Error(),
value: undefined,
Expand All @@ -417,6 +435,7 @@ function useTransition(): [
function useDeferredValue<T>(value: T, initialValue?: T): T {
const hook = nextHook();
hookLog.push({
displayName: null,
primitive: 'DeferredValue',
stackError: new Error(),
value: hook !== null ? hook.memoizedState : value,
Expand All @@ -429,6 +448,7 @@ function useId(): string {
const hook = nextHook();
const id = hook !== null ? hook.memoizedState : '';
hookLog.push({
displayName: null,
primitive: 'Id',
stackError: new Error(),
value: id,
Expand Down Expand Up @@ -478,6 +498,7 @@ function useOptimistic<S, A>(
state = passthrough;
}
hookLog.push({
displayName: null,
primitive: 'Optimistic',
stackError: new Error(),
value: state,
Expand All @@ -500,6 +521,7 @@ function useFormState<S, P>(
state = initialState;
}
hookLog.push({
displayName: null,
primitive: 'FormState',
stackError: new Error(),
value: state,
Expand Down Expand Up @@ -773,7 +795,7 @@ function buildTree(
}
prevStack = stack;
}
const {primitive, debugInfo} = hook;
const {displayName, primitive, debugInfo} = hook;

// For now, the "id" of stateful hooks is just the stateful hook index.
// Custom hooks have no ids, nor do non-stateful native hooks (e.g. Context, DebugValue).
Expand All @@ -788,7 +810,7 @@ function buildTree(

// For the time being, only State and Reducer hooks support runtime overrides.
const isStateEditable = primitive === 'Reducer' || primitive === 'State';
const name = primitive === 'Context (use)' ? 'Context' : primitive;
const name = displayName || primitive;
const levelChild: HooksNode = {
id,
isStateEditable,
Expand Down
17 changes: 17 additions & 0 deletions packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -772,8 +772,11 @@ describe('ReactHooksInspectionIntegration', () => {

it('should inspect the value of the current provider in useContext', () => {
const MyContext = React.createContext('default');
const ThemeContext = React.createContext('default');
ThemeContext.displayName = 'Theme';
function Foo(props) {
const value = React.useContext(MyContext);
React.useContext(ThemeContext);
return <div>{value}</div>;
}
const renderer = ReactTestRenderer.create(
Expand All @@ -799,6 +802,20 @@ describe('ReactHooksInspectionIntegration', () => {
"subHooks": [],
"value": "contextual",
},
{
"debugInfo": null,
"hookSource": {
"columnNumber": 0,
"fileName": "**",
"functionName": "Foo",
"lineNumber": 0,
},
"id": null,
"isStateEditable": false,
"name": "Theme",
"subHooks": [],
"value": "default",
},
]
`);
});
Expand Down