Ever used React DevTools Flamegraph? Flipper comes with an implementation of it and it’s super useful for finding slow-performing components. Listen to Robin, Jon Major, and Jamon discuss all things flamegraph.
Ever used React DevTools Flamegraph? Flipper comes with an implementation of it and it’s super useful for finding slow-performing components. Listen to Robin, Jon Major, and Jamon discuss all things flamegraph.
This episode brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Connect With Us!
Todd Werth:
Welcome back to React Native Radio podcast. Brought to you by the Ford Motor Company. Ford, you'll get what you ordered, eventually. Episode 231, Using Flipper's Flamegraph Tool.
Jamon Holmgren:
I hear there are some new developments in your truck saga, Jon Major. I don't know how many segments, how many openings we've done on your truck so far, but it feels like a lot.
Jon Major Condon:
Yeah, I think on here just a few, but I have done now some on the React Native newsletter videos.
Jamon Holmgren:
Yeah. Which, by the way, you go to reactnativenewsletter.com. You can see those awesome videos. Quick little plug there.
Jon Major Condon:
There you go. But I have gone through about 10 different Ford trucks. I like to call it 50 shades of Ford, but I'm super excited to say that the truck had arrived a couple days ago.
Robin Heinze:
Finally, the right one.
Jon Major Condon:
Yeah. It's the right truck.
Robin Heinze:
Can you remind us what was the mistake in the original truck?
Jon Major Condon:
Yes. So the original truck wasn't big enough.
Robin Heinze:
Physically big?
Jon Major Condon:
Payload, capacity of towing.
Robin Heinze:
Payload. Okay.
Jon Major Condon:
I should have just gone big or go home. I didn't and it was my mistake, but Kunis corrected it for me. And again, it's the right truck so I'm super happy.
Robin Heinze:
Do you live in Janesville?
Jon Major Condon:
Yeah. Janesville, Wisconsin. I feel like if you live in Wisconsin, a big truck is probably more useful, right? That's the type of vehicle you want to have when it's snowing and there are trees lying around on the ground or whatever happens over there.
Jamon Holmgren:
Yeah, snowing. If you get bored, you can take it out to the field and just start muddying. Do all the Wisconsin stuff.
Jon Major Condon:
Yeah.
Robin Heinze:
The phrase that I've heard about Wisconsin and Minnesota and the sort of upper Midwest is like, we don't have hurricanes, we don't have earthquakes, we don't have alligators and that's how you make it through the horrendous winter.
Jon Major Condon:
Facts.
Jamon Holmgren:
Yeah. You do get snowstorms though?
Jon Major Condon:
Yeah.
Jamon Holmgren:
Well, I guess every place has its ups and downs. Speaking of major purchases, did either of you buy a Mac Studio? The apple announcement was Tuesday.
Robin Heinze:
I didn't catch it.
Jamon Holmgren:
You didn't even watch it.
Robin Heinze:
No, of course I watched it. It's pretty much required if you work here.
Jamon Holmgren:
It is required. We shut down the company.
Robin Heinze:
It's true actually.
Jon Major Condon:
I'm thinking about it.
Robin Heinze:
I did not buy one.
Jamon Holmgren:
I did. And here's the thing. I actually just recently bought a MacBook Pro with an M1 Max. I mean, it wasn't that long ago, a few months ago, but here's the thing. I wanted a desktop set up here and I was hoping they would come out with new IMAX, but they didn't. So I ended up buying this MacBook Pro M1 Max. It's been great. It's been awesome. And then I bought one of those 5K LG displays. And the problem is it's really awkward on my desk. I know this is total first world problems, right? But it's really awkward on my desk because I like to have...
Robin Heinze:
My $4,000 computer isn't quite pretty enough for my desk. It's just not quite the right size.
Jamon Holmgren:
Well, you're making this sound really bad. I really shouldn't complain anymore, but what I ended up doing was selling it to one of our developers here, Lizzie, who needed an M1.
Robin Heinze:
I tried.
Jamon Holmgren:
I know you got there just a little too late.
Robin Heinze:
I honestly tried. I was too late. I guess, I'll rough it on this clunky Intel chip.
Jamon Holmgren:
Obsolete.
Robin Heinze:
2019.
Jon Major Condon:
I do have the original M1 MacBook. It's a 13 inch. It's for sale. There you go.
Jamon Holmgren:
It's amazing how much mileage you can get out of those M1s. But I have a Mac Studio on the way, and then I'll just hook it up to this 5K monitor. I feel like it'll be a good fit for what I do here and then I actually dropped off that M1 over at Lizzy's house, because she lives near us over in Portland.
Jon Major Condon:
Nice.
Jamon Holmgren:
So I'm back on my Intel, in my older Intel, which isn't even that old. It's like three years old.
Robin Heinze:
It's the same vintage as mine which wasn't an upgrade for me.
Jamon Holmgren:
And then they come out with M1 and it's all just obsolete. I don't know.
Robin Heinze:
I don't know. I'm too afraid to make the switch to a desktop because I'm really attached to the flexibility of a laptop.
Jamon Holmgren:
I am too.
Robin Heinze:
I think I spent maybe half my pregnancy working from my bed. So it's like if I had a desktop, that would be difficult.
Jamon Holmgren:
I pretty much agree.
Jon Major Condon:
Except I have been in coffee shops where people do bring their desktops. Believe it or not.
Robin Heinze:
Oh my God.
Jon Major Condon:
And those desktops are full on towers.
Robin Heinze:
Oh my gosh.
Jon Major Condon:
So the Mac Studio will be much easier to bring into a coffee shop.
Jamon Holmgren:
I am definitely not doing that. I'll definitely hang on my Intel Mac just to have that portability. That'll be nice. But yeah, I'm looking forward to having that Mac Studio. I was thinking about getting the M1 ultra, which seems a little weird because isn't max the top? You can't go above max, but somehow ultra is more. It's like double max. [crosstalk 00:05:54]. I think they just doubled it. They put them together anyway.
Jon Major Condon:
But if you want to code in warp speed, you do have to get the ultra, I'm pretty sure.
Robin Heinze:
We were putting bets on what the next modifier would be since they're clearly not going to go to M2.
Jamon Holmgren:
No.
Robin Heinze:
You would think the one that was just like doubled up would've been called M2 because it's two they want, but no, I think they're going to go...
Jamon Holmgren:
Like M squared.
Robin Heinze:
Yes.
Jon Major Condon:
That'd be good.
Jamon Holmgren:
Of course, then didn't have to be like quad, right?
Robin Heinze:
M infinity was my guess.
Jamon Holmgren:
I guess we should get to work here. This is a classic Infinite Red meeting where we spend most of the time just biasing. And then if we have time, we get some work done. I'm Jamon Holmgren, your host and friendly CTO of Infinite Red. I am joined today by my, inspired by the Apple Event, unprecedented co-hosts Robin and Jon Major. Robin is a senior software engineer located in Portland, Oregon at Infinite Red, specializes in React Native. What's up, Robin?
Robin Heinze:
Oh, it's a typical Thursday. It's very sunny today. It's nice.
Jamon Holmgren:
You seem a little more chipper. Are you getting more sleep?
Robin Heinze:
Last night was actually a very good night.
Jamon Holmgren:
Oh, that's good. The little one?
Robin Heinze:
Both.
Jamon Holmgren:
Both the little ones.
Robin Heinze:
The little one and the slightly bigger one have been giving us a run for our money at night. But last night was thankfully a good night. So I'm rested and happy.
Jamon Holmgren:
That's great, because I think you're going to have to carry today. Jon Major is also with us. Jon Major lives in Janesville, Wisconsin and is a senior software engineer here at Infinite Red. He's also the editor in chief of the React Native newsletter, which you can go to reactnativenewsletter.com to see. What's up, Jon Major?
Jon Major Condon:
Not a whole lot doing so well. Got a little tickle in the throat, but I'll be okay.
Jamon Holmgren:
Yeah, it happens. I have kids. I have four kids and they just take turns being sick in various ways.
Robin Heinze:
Someone's always sick.
Jon Major Condon:
Always.
Jamon Holmgren:
Yeah. This episode is sponsored by Infinite Red. Infinite red is a premier React Native design and development agency located fully remote in the US and Canada. If you're looking for React Native expertise on your next React Native project, is this SEO? I'm just saying React Native a lot. Hit us up. You can learn more on our website, infinite.red/, you guessed it, reactnative. Don't forget to mention you heard about us through the React Native Radio podcast. Also, imagine working with this amazing React Native team. I'm just inserting stuff where I don't even have. Who wouldn't want to work with Robin and Jon Major and all of the other awesome people here? If you're a senior level React Native engineer located in the US or Canada, go to careers.infinite.red. And we are missing Mazen today, but he is at home with his own little one and hopefully trying to get some sleep, but probably not getting any.
Robin Heinze:
You all should be jealous because we get to see pictures in Slack.
Jamon Holmgren:
Absolutely adorable. Just like your boy, Robin. I mean, Infinite Red people make cute babies.
Robin Heinze:
Do have a lot of cute Infinite Red kids.
Jamon Holmgren:
Okay. Let's get to our topic for today.
Jon Major Condon:
I think that was the second time we said that.
Robin Heinze:
Let's get to our topic for today.
Jamon Holmgren:
I know. We are just circling it.
Robin Heinze:
For real.
Jamon Holmgren:
Speaking of children, Flipper has a child called React dev tools and built into that, it has the React profiler, which has the flamegraph. So we're going to be talking about using Flipper's flamegraph tool today. It's a relatively specific thing, but I kind of talking about specific things because we can kind of take our time and really kind of explore it the topic a little more rather than having to do kind of this high level quick skim across the entire tool. And I think we're going to be probably doing more of that and in the audience, if you want us to do more deep dives into specific tools, please let us know on Twitter @ReactNativeRDIO. We definitely read those and we take those into account and we'll give you a little shout out if we take your idea and run with it.
Robin Heinze:
If you don't know what Flipper is, a little refresher. It's Facebook's debugging tool for React Native. It has a bunch of Native debugging tools and it also embeds React dev tools for looking at task.
Jamon Holmgren:
We did talk somewhat about it in React Native Radio 183. This was a long time ago, debugging techniques. Probably we need to do a full Flipper episode at some point. I don't think we've done that.
Robin Heinze:
Yeah, we've done a full React Tron episode.
Jamon Holmgren:
That's right.
Robin Heinze:
We tend to give more love to React Tron because we built it.
Jamon Holmgren:
Yeah. We're a little biased in that one, but Flipper is really cool too.
Robin Heinze:
Flipper, yeah.
Jamon Holmgren:
I'm going to ask Jon Major first. What is a flamegraph just in general or a flame chart?
Jon Major Condon:
Sure. It's an interactive visualization tool for your application stack trace. On the flamegraph, there's your X axis and your Y axis. On your X, you have functions that are sorted alphabetically and then the length of that function call is the time that it takes to run. The Y axis would be showing the depth of those stack traces. And then traditionally, flamegraphs are also colored differently than React dev tools. They use a red, green color gradient, whereas the React dev tools uses a blue, yellow color gradient, but we'll probably get more into React dev tools later on.
Jamon Holmgren:
Yeah, that makes sense. They legitimately look like flames. You have red kind of going up and obviously you can have the color gradient be various things, but the more red it is, the more like, hey, you need to look at this.
Jon Major Condon:
Right.
Jamon Holmgren:
Something's going on.
Jon Major Condon:
It's the dumpster fire to your application.
Robin Heinze:
That's why they call it a flamegraph, because it tells you that your app is a dumpster fire.
Jamon Holmgren:
You get to visualize that. Brendan Greg actually came up with the concept, I guess, and at least according to the internet, which is never wrong, it created a tool for flamegraphing. And if you go look at it's like, literally, legitimately looks like flames, like red and yellow flames kind of popping up. But Robin, can you kind of give a sense for why are these useful?
Robin Heinze:
I mean, at least in the context of React Native, they tell you what in your application is taking a really long time to render. So if something is taking a long time to render, there maybe opportunities to optimize or streamline to make your app more performant, more snappy to load more quickly,
Jamon Holmgren:
I've been working on the Ignite CLI lately trying to make it a little faster and this sort of tool would be really helpful, even though it doesn't use components necessarily, but just maybe function calls like Jon Major mention because often I'm having to just like spit out more or less the numbers. I just spit out the numbers on the screen, then I have to kind of scan through and see, okay, what is taking a long time, then drill down deeper into that. It's very manual process usually using console log and performance stuff, mark stuff. flamegraphs just let you kind of just scan through really quickly and see, oh, there's something red. Let's drill down. Let's see what that is.
Robin Heinze:
Yeah. And like Jon Major was talking about how a traditional flamegraph, it's sorted by functions. The React dev tools or Flipper flamegraph is basically your component hierarchy.
Jamon Holmgren:
Like the tree itself. Yeah.
Robin Heinze:
Right. The tree itself. You can also sort it by time. So the longest rendering components at the top, which is helpful in obvious ways.
Jamon Holmgren:
Yeah. That makes sense. And you can kind of see parents and then you can drill down to children underneath that and see which children or what child is taking the longest to render. So the React dev tools come with a flamegraph and it was introduced in 2018 just for React JS, not for React Native because this is a kind of universally a useful thing.
Robin Heinze:
It's basically a React tool. It's just your JavaScript. It's not your Native layer.
Jamon Holmgren:
It shows essentially one commit. And we're not talking Git commits though. Git commits are different.
Robin Heinze:
Like React commits.
Jamon Holmgren:
Yeah. What's a React commit?
Robin Heinze:
So if you're familiar with a render, like we talk about renders all the time, a commit is sort of the opposite end of the cycle from a render. A render figures out what has changed and a commit is when that's actually applied to the DOM or page.
Jamon Holmgren:
The UI kit or Androids.
Robin Heinze:
Yeah.
Jamon Holmgren:
So basically, it lands on your actual UI then?
Robin Heinze:
Right. So what you'll see when you run a flamegraph is you'll see a bunch of bars, different colored bars, for each commit. And so you can scan through that and pick the tallest, most red commit and then that will then break down into the component tree for that particular commit and you can figure out what was making that commit so long.
Jamon Holmgren:
Yeah. It's a very striking thing when you look at it and unfortunately this medium, of course, as a podcast, we don't have the luxury of showing you, but if you just search for a Flipper's flamegraph or flame chart, you're going to find something about that and be able to see what that looks like, or just fire a Flipper yourself and see what it's doing on your machine.
Jon Major Condon:
And I would add that you can hide commits, like the ones that are fast, so you can just focus on the ones that are slow.
Robin Heinze:
Yeah. It took me a couple days to find that setting, but it's definitely helpful. It sort of weeds out the things, the noise that you don't really care about.
Jamon Holmgren:
So once you find a slow render, what's sort of your next step? I know, Robin, you've been doing a bunch of work with this recently in the project you're on? What would be your next? If you see something really slow, what's your next step?
Robin Heinze:
So if I were to see something really slow, I would pop it open, see maybe what component in the tree is causing the problem. And then I would go to that component and probably the first thing I would do would be comment out the entire contents. So it's just rendering an empty view and then go run it again and make sure it does what I expect and it goes down to zero or close to zero.
Jamon Holmgren:
Boy, that is actually really fantastic advice. That's like old school debugging where you are testing your assumptions, because if it doesn't go down, there are a few different potential things going on. One you're in the wrong file. You're not even editing the right file. And I've spent too many hours debugging and trying to fix the wrong file. So just commenting that out is just a sanity check of like, am I in the right file? And then also, is there something else going on that's making this thing slow that isn't even internal to it because if you comment the whole thing out and nothing changes, there's no point in messing with the internals.
Robin Heinze:
Right. Exactly.
Jon Major Condon:
I would say probably back in the day, you would just comment out the whole entire app or you just start over.
Robin Heinze:
Just throw it away.
Jamon Holmgren:
Not quite, but the thing is it's not that much different. If you notice some slowness in your app and you go and you comment out a particular function and it gets fast, then you've narrowed it down. So yeah, we didn't have all the fancy flamegraphs back in the day, but we had this.
Robin Heinze:
Once you've reduced it down to zero, you can start adding things back in and then try and figure out exactly what is being slow and it might surprise you. On the client project that I've been working on recently, we're just about to launch and so we've built everything, but now we're just working on performance. And so recently I was trying to make the search results screen faster. So the search result screen is a flat list. It has a bunch of items and then each item has a photo and it was really slow. The scrolling was laggy. It just was taking a long time to load. So I dug in. The component that had the image was causing a lot of the slowness and so that made sense.
Robin Heinze:
We went in, we optimized the image. We used React Native fast image which has a lot of caching and optimization built in lazy loading. And then I tried it again and it was still slow. And so we ended up nailing it down to the currency formatter. So this particular component would render up a price in dollars or whatever your particular local currency is and so it would render the text of the price and that currency formatter was causing most of the slowness in that component, which was not what we expected and it turns out it was creating a new instance of international or INTL.number format every single time that it rendered. And so that was actually the source of the slowness and flamegraph helped us source that out.
Jamon Holmgren:
Yeah. That's a great example of that. And I feel like you kind of notice performance issues more in situations like a flat list where you're rendering a lot of different components and there's data involved and there's maybe images involved and whatnot. So yeah, that's definitely a big one.
Robin Heinze:
Yeah. Definitely, flat list is one of the first places you should look when you're optimizing your app, because even just a little bit of slowness, if you repeat it over and over and over again hundreds and hundreds of times in a list, it's going to add up.
Jamon Holmgren:
Sounds like me, a little bit of slowness repeated over and over. It's my career. What are some other solutions that you might have to kind of fix slow render? Slow render is kind of one of those things that is ongoing topic here at React Native radio?
Jon Major Condon:
The first thing that comes to mind would be to lift state up. I think that would be like a common solution for the potential flatless problem is to like in that example, perhaps you could lift the state of that used locale hook up into the parent component to then just pass down the one value versus having each individual component try to render that value individually. Another one would be lazy load images as Robin pointed out. What are some other ones, Robin?
Robin Heinze:
Definitely optimizing your images for sure and making your repeated components as dumb as possible. Also, the built in memorization hooks that React gives use callback, use memo can be really powerful if you have some expensive computations or variables to avoid having to recalculate every render that can be really helpful.
Jamon Holmgren:
And if you want to get into more kind of, I guess, general solutions for any slowness, you can front load some of that stuff during idle states. So you've loaded everything and they're sitting looking at the initial page, if you can kind of precalculate some things that they're going to need later, that would be one way to do it is to make sure that you kind of use those idle states to perform calculations, but often, if you're doing a lot of calculations, you pull down a bunch of data or something, then you need to form a bunch of calculations on it. You should probably be asking your backend team to do some of that stuff beforehand and give it to you in a consumable format so you're not having to do a bunch of extra work because to be honest, extra work on a device, even if it's fast is going to burn battery, no matter what you do. Cycles will burn better.
Robin Heinze:
No matter how fast your A15 chip is, the power has to come from somewhere.
Jamon Holmgren:
Yes. Has to come from somewhere. Exactly. And we have an obligation as application developers to make sure that we're doing things to be a good citizen on people's phones. I think those are good ones. But to kind of go back to the main topic here about Flipper and the flamegraph specifically, this is a tool that I think is probably underutilized. I think that it probably should be kind of open on your machine a lot when you're just doing stuff. And if you finish up a screen or a component of some sort, just run it through and see what it looks like. You may notice something early and you have all the context in your brain to go in there and be like, I bet it's that thing that's being slow because maybe it wasn't slow before and now you just made some change and now it is.
Jamon Holmgren:
So it's another tool. I like having these types of tools. I like being an expert in these types of tools so that I'm not guessing. The last thing you want to do is just sit there and guess at what might be the slowness. You want to actually have tools that measure. And when people come to me and are like, "Can you help me figure out why this is being slow?" I'm often like, well, let's get some reporting in here. Let's get some metrics, because otherwise we're just guessing and we make too many wrong assumptions as programmers to rely on that.
Robin Heinze:
I can tell you it's a real dopamine hit to see 20 milliseconds turn into five milliseconds.
Jamon Holmgren:
That's awesome. Well, we're going to have a little bit of a shorter one today. Thanks to both of you for sharing your knowledge on that. If you'd like to nerd out more about React Native and I will be doing probably some performance stuff, check out my Twitch stream at rn.live or youtube.infinite.red. By the way rn.live goes to Twitch. Well, probably at some point, change that to a landing page. So all I have to do is say rn.live, and then you can go to either from there. That's going to happen sometime. You can also join our Slack community at community.infinite.red and there are about 2000 React Native developers in there and they have a lot of advice about performance and stuff. So you can go in there and ask. Where can people find you if they have questions or whatnot, Robin?
Robin Heinze:
I'm @robin_heinze on Twitter.
Jamon Holmgren:
Jon Major?
Jon Major Condon:
And I'm @jonmajorc.
Jamon Holmgren:
And you can go to Twitter or GitHub or whatever @jamonholmgren. You can find us on Twitter @ReactNativeRDIO for the show and give us ideas on what you'd like to hear us talk about or even guests that we might have on. As always thanks to our producer and editor, Todd Werth, who by the way is going to have his work cut out for him unless it's Jed, who is the other one. Assistant editor and episode release coordinator, Jed Bartausky.
Jamon Holmgren:
This one for some reason, my recording failed part way through. And I don't know I was moving some cables and everything went wonky. This would never have happened with an M1. It's all Intel's fault. I'm very sorry about that. Also, thanks to our designer, Justin Huskey, our guest coordinator, Derek Greenberg. Thanks to our sponsor Infinite Red. Check us out at infinite.red/reactnative. Special thanks to all of you listening today. Make sure to subscribe on all the major podcasting platforms. We are React Native Radio. Reminder, we're hiring careers.infinite.red. Boy, it's just slurring everything together. We'll see you all next time. See you.