Solving Memory Issues: What is a FiberNode in Chrome Dev Tools?

Question

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).

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!

Answer 1

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.