CODEWITHSUNDEEP
reactjsfunctional-programmingreact-hooksreact-devtools
Eli Nathan
Eli Nathan

Reputation: 1141

Component name with React hooks in DevTools

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

Upvotes: 12

Views: 6025

Answers (1)

Ravi Theja
Ravi Theja

Reputation: 3401

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

Use it like Gallery.displayName = 'Gallery'

Upvotes: 1

Related Questions