Customize display name of custom hooks

[lilactown]

Do you want to request a feature or report a bug?

• Feature

What is the current behavior?

For toolchains/languages that munge the names of functions, the display of custom hooks in React DevTools is unreadable.

For instance, in ClojureScript we might have a custom hook named <-window that would be compiled into the name my_app$hooks$_LT__window.

What is the expected desired behavior?

To have the ability to set a displayName-like value on a custom hook to customize it's name in React DevTools.

A potential solution:

function useSomeReallyLongNameThatIDontWantToShow() {
  // Implement my custom hook
}

useSomeReallyLongNameThatIDontWantToShow.debugName = "useShortName";

useShortName would show up in React DevTools instead of useSomeReallyLongNameThatIDontWantToShow.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.8 / Chrome / macOS 10.13.6

[lilactown]

Here's an example of a particularly bad case. This is a multi-arity wrapper around useState:

Should I file an issue in the devtools repo as well as / instead of here?

[gaearon]

This already exists:

https://reactjs.org/docs/hooks-reference.html#usedebugvalue

[orestis]

It exists for the value - but not for the title of the hook - afaict Thanks, Orestis 3 Απρ 2019, 5:02 μμ, ο χρήστης «Dan Abramov <notifications@github.com>» έγραψε:

…

This already exists: https://reactjs.org/docs/hooks-reference.html#usedebugvalue — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[lilactown]

Yeah - this is not about the value of the hook but the name.

[gaearon]

We get the name from the stack trace so I'm not sure this is even possible. Sounds like you want to ask the engines to respect a field like fn.displayName for stack traces.

[lilactown]

Hm. I'm ignorant of how hooks work under the hood; it sounds like all we get is the function name and not a reference to it that we could query for a displayName property?

[gaearon]

Yep.

[gaearon]

FWIW this isn't specific to Hooks — you'd still have the same problem for stack traces. Solving it for stack traces would also solve it in DevTools. So sounds like this is something you'd want to fix at a different level than React.

[orestis]

I think what we are asking is whether react Dev tools could use a name override, if present, for this (rather trying to change how compilers and engines deal with stacktraces). There is precedent for displayName for warnings and display in the component tree, so it seems like there is some alignment? Allowing this would mean that when a component or custom hook uses three useState calls in a row, there could be a descriptive name for each one of them. Does this use case make sense for plain JS or is it a problem only for compile-to-JS languages? 3 Απρ 2019, 5:53 μμ, ο χρήστης «Will <notifications@github.com>» έγραψε:

…

Exactly. On Wed, Apr 3, 2019, 8:43 AM Dan Abramov ***@***.***> wrote: > We get the name from the stack trace so I'm not sure this is even > possible. Sounds like you want to ask the engines to respect a field like > fn.displayName for stack traces. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#15259 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ACkApDUxTd351kbAlOE_eDdNc5v4-9YCks5vdMwcgaJpZM4cTJcE> > . > — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[gaearon]

Let's keep it open for discussion. Happy to look at specific proposals.

[orestis]

Thanks :)

Could this be addressed directly in DevTools or would it need changes to React? Just to know where to direct our efforts (and which source to dive into)

[orestis]

A follow up - could DevTools use source maps to get the original function name?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[forivall]

You can set function.name via the following, and it shows up in devtools and stack traces:

    try {
      Object.defineProperty(useCustom, 'name', {
        value: displayName,
        configurable: true,
      });
    } catch (_) {}

(some environments dont make "name" configurable, so that's why the try/catch is necessary)