1 min read

Are your Chrome Timeline Recordings inconsistent?

You know you have a memory leak. So you set out to record a Timeline with Chrome DevTools to see if the memory is cleaned up.

But the results are so inconsistent! Sometimes the listeners or node count is going down, sometimes it isn't. Sometimes the node count does not go down immediately, but only after a period of time.

Timeline recording - do I have a leak

So what is going on?

You cannot control when the browser does the garbage collection.

That's why, many times, what you are looking at in the timeline is actually occupied memory instead of used memory.

This happens because the memory is not released immediately after it's not used anymore. Usually, it only gets cleaned up when the browser needs to allocate even more memory and there's no more room.

How do you get consistent Timelines?

Always force a garbage collection before and after every Timeline recording that you are doing.
You can do this using the Collect garbage button on Timeline toolbar.

This will force the browser to collect the garbage then and there, so you can make sure you're only looking at used memory.

Timeline recording - memory actually gets freed

Know you should be immutably updating state in React,
but not sure what the best way is?

Get a handy reference of the most common state update operations and anti-patterns to watch out for 🕵🏻‍♀️

Drop in your email below to get a printable PDF with the cheatsheet. I'll also let you know whenever I publish a new blog post.

React Immutable State Updates Cheatsheet