Component name with React hooks in DevTools

Question

I've just updated a from a class based to a functional component.

When I look in React's DevTools, I'd usually see my component named Gallery with all the named state variables.

Now though, All I see is a component named _default with a bunch of non-descriptive State: definitions.

From other answers, I've read that React Dev Tools now supports hooks but I've not seen any examples of the component name being wrong.

Is this normal behaviour or is there something I'm doing wrong?

Versions

React 16.9.0

React Developer Tools Chrome extension: 4.1.1

Also getting the same issue in Firefox.

Component code

// The component
import React, { useState, useEffect } from 'react';

const Gallery = ({ images, layout }) => {
  const [showLightbox, toggleLightbox] = useState(false);
  const [activeImage, setActiveImage] = useState(false);

  return (
    // Some JSX here
  )
};

Render code

// Rendering the component
import React from 'react';
import { render } from 'react-dom';
import Gallery from '../../global/scripts/components/Gallery';

render(
  <Gallery images={images} />,
  document.getElementById('image-gallery'),
);

Devtools screenshot

I haven't actually tried it because I don't personally care much about component names, but maybe try to use a named function expression const Gallery = function Gallery({...}) { ... } instead of an arrow function to define the component. And yes, that's normal behavior: you're using a default export/import with webpack (from CRA?) so it gets compiled to _default. — Jared Smith
– Jared Smith, Commented Sep 27, 2019 at 12:54
Gotcha! Thanks Jared, yeah it's a legacy project so it's using gulp-uglify for minifying. Just a tweak to my settings needed. Still not seeing any clarity in the docs on whether the State: is supposed to have the actual state name though? — Eli Nathan
– Eli Nathan, Commented Sep 27, 2019 at 14:55
I'm not sure how the internals of the React developer tools work, but here's what I do know: 1. React has to track which hooks are called on render, and in what order (which is why you can't call them conditionally, it messes up the order tracking). So it definitely knows about any use of useState/useReducer and what actual state is at any point in time. 2. According to the ES2015 standard the name for an arrow function bound to a var is the name of the var so your component function should be named 'Gallery'. What happens with this after 5 steps in a build pipeline depends on the pipeline... — Jared Smith
– Jared Smith, Commented Sep 27, 2019 at 14:59
...which is why I recommended you try a named function expression which even in ES3 gives the function a proper name property. Whether the React tools are smart enough to read it rather than the module-level _default binding is an open question. 3. React knows its a functional component and not just a function because it's part of a render tree, so it knows that the destructured object is actually props and what they are. — Jared Smith
– Jared Smith, Commented Sep 27, 2019 at 15:01
See the answer about the state names in devtools. stackoverflow.com/a/65808453/10128619 — cbdeveloper
– cbdeveloper, Commented Jan 20, 2021 at 19:52

Ravi Theja · Accepted Answer · 2021-04-22 08:47:05Z

1

Try adding a displayName to your component before export. Check the following link for reference. DisplayName

Use it like Gallery.displayName = 'Gallery'

answered Apr 22, 2021 at 8:47

Ravi Theja

3,4111 gold badge25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Component name with React hooks in DevTools

Versions

Component code

Render code

Devtools screenshot

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Versions

Component code

Render code

Devtools screenshot

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related