Customize display name of custom hooks

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

[orestis]

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

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