3

So I'm currently trying to debug some memory leaks within our Nodejs/React application using heap snapshots in the Chrome Dev Tools and after some analysis it looks like the pieces in the application that are growing the fastest are Objects, Arrays, Strings, and this thing called a FiberNode. It looks like the fastest growing out of all of them ends up being the FiberNode, but I have no idea what that is referencing in our code. I've searched online and could not find a reference to FiberNode in Chrome Dev Tools anywhere, so finding our memory leaks has become just that much harder. When expanding the FiberNode in Chrome Dev Tools I get this unreadable mess, that I can't understand (See Picture Below).

enter image description here

The picture above shows the comparison between the last snapshot and the one right before it and I've set it to sort by Size Delta descending. If anyone has any idea what this FiberNode is in reference to then that would help solving these memory issues a little better. Thanks in advance!

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
Michael
  • 1,454
  • 3
  • 19
  • 45
  • It's a React thing, devtools simply shows its class name. See also https://crbug.com/1064433 – wOxxOm Sep 10 '20 at 17:18
  • @wOxxOm if it's a React thing then how do I debug this to know where the leak is coming from? Some of the ones that I'm noticing say ```bound_this in native_bind()``` found with ```onclick() and onchange()```. Does this mean that onclick and onchange are not getting freed up? The Dev Tools is kind of hard to understand. – Michael Sep 10 '20 at 17:34
  • IDK. Let's wait for react specialists. – wOxxOm Sep 10 '20 at 17:39
  • this used to be simpler when we have class components and we can see the number of class component instances in the memory profile using class name and can easily detect where memory leak is happening, now with functional components it became very hard to debug – Mohan Teja Chitturi Apr 10 '23 at 04:45

1 Answers1

2

FiberNode is just an internal data structure used by react to perform the reconciliation process (keep track of your app state and perform screen updates). For more info about the reconciliation process you could refer back to the official react docs.

The algorithm used here is called Fiber and it's been used since react 16 ( another implementation was used before this version).

In the background each React element returned from the render method is merged into the tree of fiber nodes which are a mutable objects that hold components states and DOM and unlike React elements they aren't re-created on every render.

Hizem
  • 181
  • 10