2

I joined a team. There are thousands of components and codes. It takes so much time to find the exact place of the component. That's why when I open the React Dev Tools I see this picture below.I did so much research about it and I understand that React.memo, forwardRef cause this problem. But I could not find the solution that I want to find. enter image description here

Ufuk UYSAL
  • 87
  • 8
  • I tried it.@AjeetShah – Ufuk UYSAL Feb 28 '21 at 11:04
  • If you don't see your component when searching by its name, then it means it is currently not being rendered. You need to check your code why it was not rendered. Maybe it would be rendered at a different route. – Ajeet Shah Feb 28 '21 at 11:06
  • I'm afraid you are wrong. Everything works as expected. As far as I have read all forums and articles memo hooks can cause this@AjeetShah – Ufuk UYSAL Feb 28 '21 at 11:11
  • You should post code. Arrow functions (and components made from them) are given names by doing `const Name = () => {}`, if you're doing `const Name = React.memo(() => {})` then the function (and component) will have no name. – david Feb 28 '21 at 22:47
  • It is solved. Thanks for your comments. I really appreciate that https://github.com/facebook/react/issues/20892 – Ufuk UYSAL Mar 02 '21 at 14:32
  • You can write an answer to this question, to help future readres :) – Ajeet Shah Mar 02 '21 at 14:34

1 Answers1

0

For anyone who faces this issue, I fixed it by changing all the nameless export default components.

Example: I changed this

 export default () => { //your component }

into this :

const Xyz = () => { //your component }

export default Xyz
Amr
  • 759
  • 1
  • 6
  • 13