Profiling in Native and React Native
Subtitles
Show
let's go back hello everyone and welcome in the react native Show podcast I'm Lucas your host and in this episode we will focus on how to profile apps in react and Native I want to talk about performance optimization because like you know in January we release The Ultimate Guide to react native optimization profiling is one of the topics that we covered in the ebook and who is better to talk about profiling than the author of the iOS profiling chapter Edo and performance optimization experts from callstack yakubinda JB hi guys how are you hey So Adam maybe you want to go first I need to introduce yourself yeah sure hi everyone I'm medu I'm being in this I.
T world around 12 years doing games and mobile uh been touching a little bit of Android iOS flatter react native a little bit of everything um well and I'm working here Costa and excited to be here with you and we're great to have you uh grateful to have you here on podcast and in callstack as well uh JB can you go next and introduce yourself to our listeners yeah of course hello everyone welcome my name is jacobinda AKA ajb so um I'm here since a couple of years already and yeah I mainly focus on Improvement uh the performance and working on that in my daily work so yeah I very excited to invite me here so thanks awesome and great to have you uh guys today in this episode I want to cover three uh different aspects so profiling in react native in iOS in Android I want to also talk about what metrics do we want to profile and the workflow that we follow when profiling the app what is how is it useful how is it most useful what you have to do in order to squeeze the most out of the profiling so I guess let's start from the beginning and if anyone can tell me what
T world around 12 years doing games and mobile uh been touching a little bit of Android iOS flatter react native a little bit of everything um well and I'm working here Costa and excited to be here with you and we're great to have you uh grateful to have you here on podcast and in callstack as well uh JB can you go next and introduce yourself to our listeners yeah of course hello everyone welcome my name is jacobinda AKA ajb so um I'm here since a couple of years already and yeah I mainly focus on Improvement uh the performance and working on that in my daily work so yeah I very excited to invite me here so thanks awesome and great to have you uh guys today in this episode I want to cover three uh different aspects so profiling in react native in iOS in Android I want to also talk about what metrics do we want to profile and the workflow that we follow when profiling the app what is how is it useful how is it most useful what you have to do in order to squeeze the most out of the profiling so I guess let's start from the beginning and if anyone can tell me what
the profiling actually is what does it mean to profile your app yeah so actually profiling is grabbing an information from the app while interactive interacting with it so profiler app means that you need to use a specific tools to do so those tools are called profiler and based on the result of using those two units if a set of data those data are called metrics and actually if you compare the profiling you can think about this about like a debugging when you are looking for a issue inside your app but with the profiling you get this data that you can spot the performance issue doing analyzing those data okay and uh what are the use cases for profiling you said debugging so debugging is when you want to find the bug in your code when you want to know more about it what is the use case to profile your app yeah so the use case is uh you need to profile your app to get the data according to what what I just said and based on these data the shape of this data you are able to spot a performance issue in your app or to this profiling in a regular basis to actually check the health uh the healthy state of your app or boost your performance even or even more and from the business perspective it's also necessary to profile your app because then uh you are able to make a good decision and unlock some resources or decide if you need to put more effort to optimize your app and work pretty extensively in upcoming product increment to actually focus on the performance in your app those are the the basics one yeah thanks uh and do you want to chime in and uh tell us some more about your take on why you should profile your app yeah sure uh like shape is set you use it for a sport performance issues and there are a couple of different of them
that you I can name off like uh you can identify bottlenecks like if you start using your app and you navigate to one screen and that that screen start consuming a lot of memory or resources or something uh the the the device will start asking for more resources to try to handle uh your feature or your or the behavior you are trying to achieve uh so in that moment you are start like requesting more stuff and try to handle all the actions and you have uh that bottleneck that we can uh identify when we start profiling and also because of this like I sell all the start requesting more memory probably there is something that we try to load an image or we try to do some uh I don't know some logic and that logic because we need to store store some variables or we need to store something into memory and start growing up and we have something that is called garbage collector and try to keep the memory the memory clean but if that doesn't happens the memory starts growing and growing and we can profiling we can find this uh like we call memory leaks because the garbage collector never clean it and the memory keeps growing and all these issues can impact on the for example on the battery it start when we start asking for more memory the CPU I start doing more Works uh start working more start using more cores and all of that will start draining the battery because it's basically needs more energy to keep all the the app working as the user spec right um yeah something that probably that we should probably take care of yeah I I noticed that you started talking about metrics which is my actual other question the next question that I wanted to ask you is like what are the
specific metrics that we see in the profiling tools so you already said memory you would really say battery life you already said CPU but let's start from the beginning and maybe uh talk some more uh around those what do we see in profiling and what actually does it mean and how we can see the bigger picture how we can connect uh the measurement of memory the measurement of CPU consumption how we can see what's behind those metrics yes uh those metrics as well we start and you start saying uh time basically uh that is like the one of the most out of there we are always in Russia and every user is in curry so time is something that we want to keep track on and a couple of them are like uh first time interaction with the with your app the or your screen and also when you need to do any updates on your screen or any feature is the render time when you start showing components to your user and and depending on where you are like on react native react web or native will that will mean different stuff like in react native could be uh when a component updates because abrupt change or if you start changing and moving your bottoms uh from different places will be like a layout uh change or in web could be like the Dom so those are like uh metrics that you need to be aware of um well we said we talk about memory that uh you need to uh to keep the memory at certain level right uh if not there are like Android start doing some process that start killing uh different apps that are in background to give you more memory and that means that the next time the user wants to navigate to the app if the OS kill it will take more time for the other apps so we probably need to think of that and don't consume too much memory and uh sorry sorry to interrupt you for the first metric that
you said time like broadly time but in specifics maybe a render time of some components in reactor react native or maybe frames per second can be like translated to time as well because something has to happen in uh in a time that allows us for 60 frames per second that is uh I would say harder to spot and harder to actually see and measure those time differences and memory consumption it's really easy to visualize because you have a graph that's probably growing or staying the same and if it grows constantly you have a problem there my friend right like if it's not releasing if it's not releasing the memory that it takes there is a memory Leak with time it's quite different yeah sometimes let me if you are using like an animation and you are doing like a really heavy work updating the components the animation let's say we have a ball that is bouncing we start seeing like at the top and start dropping frame as you said and we see we lose the the moment that he goes the balls goes down and up and we keep saying like up let's start moving and translate it let's say on the X or in the Y uh axis but never going down so we missed the bouncing so that also is a weight like we can start like a spotting like we are dropping frames something is uh we are doing something heavy and probably uh is we have to track the time and as you said the drop in frame sometimes it's like a symptom drop in frame because of timing of because of all the updating on all the layout changes that we are doing so if you if your device are capable to render in 60 FPS it means it renders 60 frames per second which is 1000 milliseconds so technically each frame uh or should be rendered in 16 milliseconds so you need to keep that in mind to actually have your application efficient enough
to handle not only on the more powerful device to render your content in that time but also you should actually aim and consider weaker device to fit all of the logic in that time because you users are smart and there are also some tools on a user device that allow users to check and do some maintenance mode and if your app becomes to memory and consumption too much memory and drain battery user will definitely uninstall your app and also the same case is connected with the longer vended time because if the user notice that you upload slowly uh there are measurements and a benchmark that 70 of user are capable to develop your app if it loads too slow for them so it's also important to get those metrics understand them and use them to forge it to success and uh to encourage you with the user and gives the the best user experience that you get yeah I can imagine that that statistic that you just mentioned can be extrapolated to other metrics that like up size up size is not something that we profile but maybe memory usage is also something that uh might encourage your users to drop your app because it takes too much memory and it doesn't perform well because it takes too much memory okay we talk about time we talked about memory what are other metrics that we uh want to profile to measure or we can profile and measure uh yeah we have CPU Network and I like to have user engagement I don't know if for for the user engagement uh I feel like this is this doesn't belong in the profiling because you cannot actually profile how users are using your app but I think this will be relevant in the workflow user engagement can can give us some insights about our application and can be really useful in uh providing workflow so let's let's uh Circle back to that when we are in the workflow
section yeah of course I have a couple of examples about it I think a little bit about CPU uh is uh we on we have a couple of uh tools to as we said but CPU the idea is uh how how much work the the CPU and the course are using are yep are doing so if we just start doing some heavy computation uh the the device will try to uh give the that work to to the course and start trying to resolve all the problems that you are trying to achieve and if we start giving a lot of work to that that could make like your uh you are your UI phrase or stop being responsive because uh the course are like working too much in solving all your computations and all the work that you are planning so it's not only about the number itself but also the correlation with other things that happened in the same time so it's totally natural that CPU usage will increase while operating and interacting with the app the question is how to conclude that this CPU is too too high and for example investigate that this amount of CPA usage at that time is actually something that we do to work on yeah I can imagine in your profiling tools which we will talk about the tools this one but I can imagine in your profiling tool tools if your graph is on 95 of CPU usage at all times it doesn't necessarily mean that something is wrong you might want your app to be on 95 CPU usage at all time you might I don't know mine Bitcoin or do some heavy GPU calculations or something like that and it's it's logical that it's gonna stay there but if you don't expect your app to uh to eat resources and it does something is wrong so like the xgb said you have to like correlate it with actual user actions you click something you don't expect it to be heavy but it is something is wrong and you have to like
look into it yeah exactly and you need to be aware that a high CPU usage also will impact a higher battery again which probably is not also something that you would expect on your app when shipping it your final user yeah definitely okay I think we touched several metrics and I guess metrics will also come in as a side note in the later part of this podcast so let's move on and right now I want to move on to what kind of tools we are using to profile apps in react native first and then in Native Android and iOS so let's start with tools to to profile your app in react native so okay we can start with the simplest one because you can technically put a timestamp in in your code you get active and then comparing the result you can actually grab some measurement connected with uh how much time does it take to on your components to to render itself so this is that I would say basic one but on the top of that there are a tools built that allows you to do the same and affecting the code you are able to measure the same thing for example with the react profiler using the profile component and also for example there is a library called White juvenile which allows you to grab another aspect not only or maybe not the render time of the component but how many time and why your component gets rendered and this aims to the political case related to too many renders which also can uh impact your CPU and memory usage on your device next more complicated one and I would say this is a real profiler its profiler comes from the react native Dev tools it can be used separately it can be used also as a plugin for The Flipper and it allows you to actually press the record button and while connect while being connected with your app you can proceed
interact with your app and then after you stop the profiling you will get results and in case of the profile log the results are the types and those charts are called The Flame charts on and on these flame charts you are able to notice um how you structure of the component looks like and also each block is represented with some specific numbers so you can see how much time does it take for your component to render itself and also how much time it took to render itself and all of its children so it might be quite overwhelming at the beginning but when you get used to it and learn how to get this flame chart it's an extreme power very powerful child so I encourage you to learn how to read them and those charts are available not all not only in the react Dev tools but we can see this chart also in Native on the native side when profiling the the native app and also it is available for the web environment so they are the day I I would say pretty common when it comes to comparing and reading the uh structure on what's Happening under the hood of your app yeah and I think the this is the go to tool for react and react native developers like the profiler from react tools from react Dev tools and um the things that you mentioned previously I think profiling profiler somehow Builds on top of them to allow you to see your whole application in working and not only specific components uh uh render time but like you said render time for for me and for my children so I can easily spot the bottlenecks which components are too heavy or which should be memorized and stuff like that and also another point that I want to raise is that the Prof the profiler for from react Dev tools are actually a common language for react
and react native developers and if you know the tool you can get a screenshot and you are you can actually help someone debug their app profile their app just by looking at their profiler output you don't have to have access to their application you can help them just with this which the tools that JB mentioned previously that don't really give you I would say and some other tools that we may talk about from native site might be too difficult for someone from like a junior developer to gather so yeah I think that the react native profile sorry the profiler from from devtools is real uh sweet spot for profiling you you should start definitely there yeah yeah I would say that it is that that's why I call it a real profiler because this is the the first tool that actually might be called profile on on that list and definitely you don't necessarily need to do a screenshot you can actually export your data and check the data so you can upload data to your Dev tools and actually have this nice interaction that is implemented in in that [Music] um uh all devtools if you are using the the dev tools so you can track it one by one a click here and and actually yeah spot spot the bottlenecks okay uh what is next on your list to mention in react native tools after the uh profiler from devtools the tool that is also by default included in the Philippa is a harmless profiler it has a quite similar look related to the reactive tools I'm saying just about the profile part and you are able to grab the measurements in the same way like for from duke act dev2's profile but it allows you to show some more data related to the JS bytecode so for example you can get the name of the function or part of
the logic that actually causing the issue so it I would say it's much more detailed and it is a second class citizen I would say after the the profile when operating and then profiling your app it works also nice when you come from the Native world and you already did some filing in your native world but you would like to check because you already conclude that the issue that you spot from native part uh it's on the JS side so that's why you would like to use the high mass profiler to actually spot in which place exactly you know JS part the performance issue is located but we will probably go to that native section later as well yeah just to mention uh JB we are talking about some list of tools so I would like uh to ask our producers Basia to please include that list in our show notes uh so everyone can listen to this and like really go through the list and uh look at the tools and look how can you use them because uh it's it sounds scary when JV is talking about this and it's not it's not it's not that easy but it's also not that hard you should you should get familiar with with those tools definitely yeah definitely and sorry I want to say that this Hermes profile I cover a little bit on the iOS profiling in the performance guide and I will I show you there everything that Chevy is telling you that you can spot like the the name of the function that is causing issues and everything so I want to mention that oh yeah awesome like definitely download the guide and read the guide first obviously yeah yeah so so we actually touched the The Flipper and the extension of reactive tools and highness profiler but the flipper has a strong community so this is not the only profiler that you can get to have flipper so
the next one is a react native performance monitor it's from bam so it's a company that is also very focused on work related to app performance and they delivered outstanding tools out there so this profiling allows you to hmm recalled an action in the same way like you will be recording action for the profile like mentioned previously but in this time you will have a nice interactive chart of how you FPS on JS and UI site behaves doing the action that you actually profile and in the end you will have a final score with the average of FPS doing that action that you recorded and it's something similar to the lighthouse available for the web environment so they actually took that idea and transferred it to the react native board and recently they released also a flashlight so it's very similar about the name so it allows you to also record and profile the same metrics that I mentioned but on the production application so you can grab those measurements and then compact the results to see a or compact result of your app over the time directly from the release builds not only by while being connected in development mode so I want to summarize this section about Tooling in react native so you can go low level and use like timestamps you can use react profiler uh or why did you render that are the like low level tools then you can use some tools like profiler from react Dev tools or Hermes profiler flipper uh in flipper you have a few different plugins that that can do the job for you and then flashlight from bomb um what about reassure from callstack what about our performance regression uh Library can you call it a profiler and how does it fit into our uh profiling world
yeah your show is definitely a tool what to mentioned but as you call it it's a it's a tool that prevents some performance aggregation to occur so it is capable uh to do some measurements about the random time and the number of renders of your component however the use case of reassure is to actually set up in in your workflow in the pipeline to monitor a crucial components inside your app and then after each change is pushed to to your main branch you can actually run it on the CI and then if you spot some regression you might decide to for example uh not do a release and fix the performance issue files do not bring any aggregation to your final users yeah actually uh reassure under the hood uses the react profiler right the component it wraps the components into profiler and that's how it knows uh what changed over time yeah okay I think we covered the react native side of things so let's go to the native side and let's talk about what do we measure in Native and how do we measure in Native so sorry how uh we already answered the metrics question so how do we measure what are the tools in let's say Android so in Android we have an Android studio and inside at the Android Studio we have a tab called profile so accessing this tab allows us to press the record button in the same way like we had in in the react native side and then also let's see it with some actions on our device and grab the measurements however those filer tab I'll focus in mainly CPU memory consumption we have a clear information about what's going on on different threads in our app so it is there is much more details Tab and a lot of thing going on there so after this measurements uh yeah it might be overwhelmed at the beginning as well but
we can quickly get information thank you well I will issue all and actually Android records uh system Trace so we can export the file we can check this file we can load it and analyze when we receive this file from our colleagues and yeah this is very active way of profiling your app of course you you also can enable some console logs and check what's going on in your lock cut to for example get information from a holographic and also from the opengl renderer which gives some information about skipped frames or for example the information about some random times on your native views from from Android is the main Tool uh very powerful that you would use very extensively while performing your native Android app and what's small you can actually use a library called macrobench and microbench which allows you to write a test case scenario inside your application and then receive some results and compare them during the development cycle of your app so it's in Native word uh it's the in react native you cannot get the CPU and memory numbers though for those you go into 1084 so in Android you use the profiler tab uh and other things as well I'm not negating that I'm just saying uh CPU and memory are the easiest to visualize and easiest to understand metrics that you have to go to native to get them from yeah and in The Matrix in the flipag that we mentioned actually has a connection to the native side so you you need to pull those information from the United side yeah yeah uh how about iOS what do we do there to to get those numbers yeah uh what I do first is open xcode um when you run your app it it shows you like a summary of how is the memory CPU Network everything going uh
that will help you to have an overview of your app and how it's behaving but if you want to go like deeper or really specific on each point uh you can open instrument that is a tool of box has a many many uh items to use and to start tracking a specific you have activity monitor that help you to actually monitor your CPU memory disk Network and as soon as you play you have to you select the the platform you want to uh to start monitoring your app and you just play it and we'll start and we'll start throwing a lot of data it also has the CPU profiler if you want just to focus on that the time profiler and a bunch more like if you are just if you have native code because you can you are doing like using the bridge and you want to squeeze the performance and you have actually called in Native you can get a lot of information through those tools um that will help you to to keep your app in a good shape yeah okay and um what do you guys think in in terms of native tools which one is better which one do you like more to use is it iOS 1 on Android one yeah personally I I prefer to work with Android one I feel like it has much more functionality and flexibility maybe because that Android from my experience usually had more serious issue with the performance and iOS was most of the time more stable comparing to Android and yeah but I also see that in numbers of instruments in xcode are yeah in Android and Android Studio we have only one profiler tab which is still very powerful but yeah the number of tools that you can use on the xcode site is much more extended I would say yeah I think for uh user developer that just start uh going into instrument could be
overwhelming overwhelming because you start saying like around 10 tools as soon as you open instruments and you don't know what to touch you see activity monitor CPU CPU counters and probably it's too much and you don't know I just want to see some graph and telling me that where the app is I don't know performing bad uh Android is like going straight to that point and you can like scene a nice summary of the of each of the metrics and if you start like clicking it will expand it and you start seeing uh more data you can pause it and just grab one frame and start looking what is going on there so uh I think it's a little I like a little bit more um on that on that sense if you want to just start getting into this of the old profiling there is a new skill that you need to learn yeah yes like clicking around the system in reacting in Android Studio or in xcode is a skill on its own honestly like for react native developers it might be overwhelming like you said like even wrapping your head around different options and or or finding the lock cut like it takes I like three clicks to get to lock cut in in Android honestly uh and probably even more in in xcode uh yeah I I digress uh let's move on I want to do because comparing those defenses uh there are also as similarities because in the end the CPU memory memory and so on are actually the same so if you get a how to use and how to understand the CPU that and the memory it will be the same no matter which tools you you are using so if you grab the differences between those two platforms then you are fine to go because the conclusion and the way of thinking will be um mostly the same for both of them well and you have to use both of them if you have up on both platforms right so like it's not like we can choose which one to
use it's just that Android is better and we all agree that it is let's move on let's move on to workflow so um after we discussed metrics and we discuss tools I want to understand what is the workflow how you actually go about uh spotting the issues measuring them choosing the right tools to measure them and then uh I guess at the end improving your app yeah I I can jump in a little bit the most basic one I will say is like reading in your Play Store App Store your app is slow yeah the user reviews yeah it's too late I know but at least you you have a something someone is telling you that somewhere in your in your app is like performing back okay because sometimes you developers we are testing and we just test one feature and we yes it's working and we don't uh you see it as uh with the user's eyes so that will be the first one uh well let me stop you here I would hope we have qas who can spot the issues before our users can but what I would agree with is that the users are uh the ones with most devices most categories of devices most time spent in our app so that is definitely the right source to get your information from but I would hope we have some qas in the system before users that can tell us that our app is eating memory or that is slow on some screens or something like that I think that's why you need to collect the performance related data from the production because then you users become your own test text that will check the data with you and based on that data you can actually also make some conclusion and and put more effort to fix this or check the performance issue and this is the place why the profile comes in and uh why we had been talking about those tools yeah so what are the other uh okay one start of the workflow is you
get a bad review or you get a essentially like performance back from your qas what might be the other places that you get the starting point from that you need to profile something yeah in my case I also sometimes use like uh well I use Firebase to start like tracking all the uh user flows through the screens and Firebase lets you create like funnels like the user will navigate from screen B to C and C to D and so on and so on and sometimes you can see that users are dropping on let's say screen B and you can start thinking okay it could be like I don't know ux or could be like an actual performance issue that happens to me a couple of times that you have like a really big form with Pickers models showing some photos images those could be like uh like uh us something that you can get tracking uh the tracking before reaching uh to those Past reviews yeah yeah yeah definitely something that you can plug in and actually record like JB said like actual production data actual production user data uh is really important and yeah that's that's that that's the same thing that you uh were saying in the beginning that one of the metrics is user engagement like if you lose users on some screen something is definitely wrong there either with ux or with performance and we have to like check it out um reviews are those users that I don't know are really angry with Europe and want to say something about it but probably you have done sort of the other reason that they are seen it's a slow and just uninstall it and yeah they just don't care yeah they just okay it's the slowest and install it but someone okay I stopped using it and install and you can't know about it
actually so so the the workflow is very important thing connected with the profiling because the profiling the app is also a part of the whole workflow so if you have your app in the production and you don't collect any performance related data I think you should Implement that one to start collecting them from the production uh another aspect that you can use is actually do something called performance audit and do this doing this performance audit it's not only about reading and reviewing the code base it also about uh do some profiling in The crucial user paths as I do mentioned and based on that profiling uh you can get some information about potential performance issue and in call stack we always tries to implement not only a single action performance boost but we think about the performance at as a whole part combining and including all of these parts so if you have the app you might already know the problem so we can do some extended audit fix all of those issue and then prevent from introducing a new issue by for example implementing reaction or microbench library for Android that I mentioned previously and sometimes when you put a lot of effort to the performance and fix some specific path it's quite easy to lose it over the time so it's extremely important after you invest and put a lot of effort to get to some point and bring your performance to another level is to sustain that level that's it's also a crucial and actually we come here to another part of the workflow which is not only an initial investigation applying a fixes and boost the performance but also a try to do is it as then I've been profiling your app as often as possible to control and monitor the progress to sustain that effect because it's easy to do some sanity
checks in very often way then get into the troubles that edu mentioned about your user complaining about the app working slow and so on so yeah those would be I would say also important part of the workflow which in the end leads to profiling your app utilizing the tools that we already mentioned and if you want to know more how to tackle the performance from the business perspective for example that was an awesome talk from Mike who Jack in this year on last year react native EU conference so please refer to to his talk because he presents one of the pollution potential approach how to deal with the performance not only film development developer perspective but also from the uh business aspect related to to your whole product yeah yeah yeah great talk uh we will again link this in the in the show notes [Music] um thinking about the workflow and profiling is there a proper way of me doing this should I start by using native tools and go up to react native tools or maybe it's the other way around and I should start from a react profiler and go down to Native uh only when when needed what do you think I think there is no cold solution to that and it depends on your use case personally I like to operate with flipper and the dust also I try also to train myself and randomly run the free profiler to check what's going on but having this react native profile included in in flipag when you do some profiling and you've noticed that there is a higher CPU usage you might want to actually jump to the native part and profile your app with the native tools because it might be some some sometimes much easier to spot the issue on the native profile
I think one thing that I got from you here is that you said I like uh you you say flipper right and and I use it so like that's the great answer actually that you should do what you like just just do it just use some tool to profile and like doing the things that you know how to do and are able to do you can actually spot the the the issues you don't have to use something that that is out of your realm for example if you have a tool that you know how to use and you are very proficient in it you should use it yeah and I think what to keep in mind here is to actually use and profile your app as often as possible in the release mode because in development you might get a different result each time you you do the profiling so there are purple settings to to do before you start the measurements and also the flashlight tool allows you to actually install your app on your phone and then interacting with your app while grabbing the measurements so yeah it's the recommended way to actually gravity without to to have as much trust to the outcome from these metrics as possible okay uh edu do you want to add something yeah yes not from Flipper but probably I started using or Android Studio or xcode just to scene the overall and then like go in I don't know up or deeper so it started looking like how is behaving uh the app on each of the metrics and if I start seeing like probably if I don't know if I see some I have uh some suspicions or something is wrong I start digging into or if I someone tell me okay in this screen there is something wrong I start using and seeing how I don't know the memory the network or anything is behaving until I see something because sometimes uh happens to me like you start seeing this uh
slowdown when you are writing something while it's uploading the image and you try then to create a new item so there are a a bunch of situations that must be to happen at certain moment to that performance issues happen so I sometimes I like to start using it while I see the overall when I kind of spot it and then go and start chasing that path yeah that that is also a great answer what I got from your answer is look anywhere and then if you have a suspicion if you have something to investigate you have to jump to other tools and like you have to follow the trail uh so to say but like you can start anywhere but then you you will find it somewhere else uh I love that that's a great answer as well thank you so much uh it exactly fits to the workflow that we mentioned to do something checks and actually see what's going on and if there is something suspicion jump into details and yeah I try to spot and so Israel yeah awesome uh listen guys we are wrapping up the episode so maybe there is like uh something that I have not asked you about yet but you are eager to talk about it so now you have uh some time to like add something to this conversation about profiling in react native in Android in iOS in Native maybe in react itself uh is there anything like that yeah I think if you don't know how to profile your app I would I would recommend you to to do so so please learn how to do this uh there is a lot of materials out there so we encourage you to to check out and from my experience achieving some performance Improvement might be very motivating for your team and allow other members of your team to actually be more focused on the performance so uh yeah I really encourage you to do so so happy filing yeah if you are the first person in your team
to look into profiling tools you should really download The Ultimate Guide to react native optimization that we just released and you can find some information there and I bet if you are the first person in your team to do this you will get Praises from your boss if you fix something in your in your production application and it's easier to use for your users uh you you will be uh you will be praised by your by your teammates yeah great great suggestion JB it might be also a double-edged sword because uh if you do a lot of related 2.
4 months improvements so if you don't protect yourself from having aggregation then you might suffer because you need to do the same thing over and over again so that's why it's so important to have some tools that prevent you from irrigation on performance yeah yeah reassure for example yeah I I wonder that also don't get crazy trying to start probably you read the guy listen this and oh I want to perform start profiling the app and you probably start seeing a bunch of numbers and you don't know if it is okay or not so you probably should start waiting for those symptoms that show abs are mentioning before and use them as a ceiling and try to improve it and get uh when you actually could get better numbers use it as a base and then try to move between those and you have to think like almost every line of code that you write will impact the performance so don't get too crazy if you start seeing like it's growing because you start just with that chat just writing text and then you end up sending images videos and you the performance will be higher from than from the beginning so just you have to uh put it in the right moment as like Chevy said I think at the beginning of the the episode
4 months improvements so if you don't protect yourself from having aggregation then you might suffer because you need to do the same thing over and over again so that's why it's so important to have some tools that prevent you from irrigation on performance yeah yeah reassure for example yeah I I wonder that also don't get crazy trying to start probably you read the guy listen this and oh I want to perform start profiling the app and you probably start seeing a bunch of numbers and you don't know if it is okay or not so you probably should start waiting for those symptoms that show abs are mentioning before and use them as a ceiling and try to improve it and get uh when you actually could get better numbers use it as a base and then try to move between those and you have to think like almost every line of code that you write will impact the performance so don't get too crazy if you start seeing like it's growing because you start just with that chat just writing text and then you end up sending images videos and you the performance will be higher from than from the beginning so just you have to uh put it in the right moment as like Chevy said I think at the beginning of the the episode
think for your use cases Edo I hear what you're saying but I have to disagree with you I have to say be crazy about performance and I'd love to see some crazy freaks performance freaks out there who can take their code base and like really uh make it perform the best it can even by spending weeks and weeks on this so we are on two sides here but I I can hear what you're saying and I agree with some of it but with some of this I don't agree with well at least for the beginning don't when you get into the loop yes go crazy get nuts and start like uh making your app really fast yeah probably before tapping a button already displaying the screen you can yes yeah there are there are methods to do that actually right like there are some some techniques that we can use to actually do some of this okay uh let's wrap it up thank you so much JB thank you so much so Much Ado for joining me on this react native uh Show podcast about profiling in react native and Native uh for those who want to learn how to be freaks about performance and about profiling uh our Ultimate Guide to react native performance is still available to download and actually it gets updated every so often so if you downloaded it two months ago you might consider downloaded it again uh JB and thank you so much for joining me and I hope we will see you in the next episode of the react native Show podcast thank you thank you bye thank you to invite me bye [Music]
Timestamps
Show
Guests
Jakub Binda
Software Engineer
@
Callstack
Eduardo Graciano
Software Engineer
@
Callstack
Jakub is a well-known React Native performance optimization enthusiast. Edu co-authored chapters on profiling in our Ultimate Guide to React Native Optimization. They’re a match made in heaven if you want to record a comprehensive episode on profiling.
Tools, metrics, and workflow
Next, our experts discuss tools and metrics worth tracking, for example, CPU or memory usage. They mention tools you can use to profile Android and iOS.
To end the discussion with an actionable item, in the last part of the episode, they talk extensively about the workflow you can follow. Tune in and enjoy the episode!
Need to boost your app’s performance?
We help React Native teams enhance speed, responsiveness, and efficiency.
Let’s chat
//
Insights
Learn more about
Performance
Here's everything we published recently on this topic.
//
Performance
We can help you move
it forward!
At Callstack, we work with companies big and small, pushing React Native everyday.
React Native Performance Optimization
Improve React Native apps speed and efficiency through targeted performance enhancements.
Monitoring & Observability
Enable production-grade monitoring and observability for React Native apps with real-time insights and alerts.
Release Process Optimization
Ship faster with optimized CI/CD pipelines, automated deployments, and scalable release workflows for React Native apps.
React Compiler Implementation
Use React Compiler to achieve instant performance benefits in your existing applications.
