react: Bug: DevTools not finding/showing React components

When I use DevTools to select an element on the page, it can’t jump/find it. It also doesn’t show it in the Components page. This was checked by finding its parent and checking the children, non of the newly generated ones are there. As a probably related bug Profiler doesn’t show/record the changes.

React version: 16.13.1 React-dom version: 16.13.1 Parcel: 2.0.0-beta.1

Steps To Reproduce

Have a parent element
Have a child element (A)
Using conditional rendering (condition ? A : B) “hide” A
B now shows
Try and select B using Chrome Dev Tools’s “Select an element in the page to inspect it”
Jumps nowhere/Can’t find it manually in the list.

Example

2020-10-26_12-38-43 In this example, I demonstrate that it works on the Search Bar (light grey bar) which is the TextField=>InputBase tree, and the Container that contains the search & images and how hovering over the image doesn’t do anything. I then click on the image and nothing happens & the state panel on the right of Dev Tools empties itself.

The current behaviour

Can’t find newly rendered components in React Dev Tools Components panel

The expected behavior

Being able to find the newly rendered components in React Dev Tools Components panel

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 28 (16 by maintainers)

Most upvoted comments

Thanks for the fix @bvaughn 😃

Lagicrus on Oct 30, 2020

I’ve been able to reduce the repro to the following:

import React, { useEffect, useState } from 'react'

export default function App() {
  const [showChild, setShowChild] = useState(false);

  useEffect(() => {
    // This setTimeout() is necessary to repro the bug.
    // Some value larger than 100 seems necessary too (on my local hardware).
    setTimeout(() => {
      setShowChild(true);
    }, 250);
  }, []);

  return showChild ? <div>TEST</div> : null;
}

Unfortunately I have not been able to reproduce the failing behavior in one of our integration tests.

Still, a small repro is very promising. Going to dig into the actual code now and see what’s breaking 😄

bvaughn on Oct 29, 2020

Interesting to note that I stepped all the way back to DevTools v4.0.0 and this bug still happens. This is definitely not a recent regression.

bvaughn on Oct 28, 2020

The smaller it is, the better chance someone will be able to look at it and find/fix the problem.

bvaughn on Oct 26, 2020