11

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

Dev Tools screenshot

Eli Nathan
  • 1,020
  • 2
  • 13
  • 35
  • 3
    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 Sep 27 '19 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 Sep 27 '19 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 Sep 27 '19 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 Sep 27 '19 at 15:01
  • See the answer about the state names in devtools. https://stackoverflow.com/a/65808453/10128619 – cbdeveloper Jan 20 '21 at 19:52

1 Answers1

1

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

Use it like Gallery.displayName = 'Gallery'

Ravi Theja
  • 3,371
  • 1
  • 22
  • 34