Improve debugging info in useAtomsDevtools

[dai-shi]

Moved from pmndrs/jotai#931

Experimental PR: pmndrs/jotai#943

If we do something, it will be jotai, not only jotai-devtools, but this should be a good place for discussion.

[dai-shi]

This can be a hint: pmndrs/zustand#2061 (comment) by @AlexeevSasha

[Wendystraite]

I quite like Zedux's way of capturing the React component name without a stack trace.

Basically using React's internal API.

Snippet taken from https://github.com/Omnistac/zedux/blob/master/packages/react/src/hooks/useReactComponentId.ts :

const react19KeyBase = '_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE';
const clientKey = `__CLIENT${react19KeyBase}` as const;
const serverKey = `__SERVER${react19KeyBase}` as const;

export function useReactComponentId() {
  const component: MaybeComponent =
    ((React as React19)[clientKey] ?? (React as React19)[serverKey])?.A?.getOwner?.().type ??
    (React as React18).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentOwner?.current?.type;
  const name = component?.displayName || component?.name || 'unknown';
  const id = useId();
  return `${name}-${id}`;
}

Cons :

• It can break after any React update
• It doesn't give you the potential names of custom hooks, only the React component using them
• (as I can see) It must be called in the render function, not inside an useEffect, callback or whatever. This means that Jotai core must be changed in order to get the component's name.