1 00:00:01,260 --> 00:00:04,590 ‫Let's wrap up the performance optimization part 2 00:00:04,590 --> 00:00:09,183 ‫of this section with a quick list of dos and don'ts. 3 00:00:10,560 --> 00:00:13,050 ‫So the main message of this video 4 00:00:13,050 --> 00:00:16,980 ‫is that you should not optimize prematurely. 5 00:00:16,980 --> 00:00:19,560 ‫And what do I mean by that? 6 00:00:19,560 --> 00:00:22,890 ‫Well, basically, don't optimize anything 7 00:00:22,890 --> 00:00:25,590 ‫if there is nothing to optimize. 8 00:00:25,590 --> 00:00:28,890 ‫So, if your app is performing just fine 9 00:00:28,890 --> 00:00:32,602 ‫then don't just wrap all your components into a memo 10 00:00:32,602 --> 00:00:35,310 ‫or all your values and callbacks 11 00:00:35,310 --> 00:00:38,520 ‫into useMemo and useCallback. 12 00:00:38,520 --> 00:00:41,910 ‫Also, there is no need to optimize context 13 00:00:41,910 --> 00:00:46,650 ‫if it's not slow and if it doesn't have many consumers. 14 00:00:46,650 --> 00:00:48,870 ‫So doing all these things 15 00:00:48,870 --> 00:00:51,690 ‫can actually do more harm than good 16 00:00:51,690 --> 00:00:53,880 ‫because memoization itself 17 00:00:53,880 --> 00:00:57,240 ‫can have a slight hit on performance. 18 00:00:57,240 --> 00:01:01,230 ‫And so, if you have a thousand useless useMemos 19 00:01:01,230 --> 00:01:03,930 ‫it can actually all add up 20 00:01:03,930 --> 00:01:08,670 ‫and then even worsen the performance of your application. 21 00:01:08,670 --> 00:01:10,530 ‫And that's not to mention 22 00:01:10,530 --> 00:01:15,300 ‫that your code is gonna become unreadable and super messy 23 00:01:15,300 --> 00:01:20,300 ‫if you wrap everything into a useCallback or a useMemo. 24 00:01:20,520 --> 00:01:23,010 ‫So please don't do that. 25 00:01:23,010 --> 00:01:25,350 ‫Instead, what you should do 26 00:01:25,350 --> 00:01:28,440 ‫is to find actual performance bottlenecks 27 00:01:28,440 --> 00:01:30,420 ‫using the profiler tool 28 00:01:30,420 --> 00:01:32,760 ‫that we learned about in the section. 29 00:01:32,760 --> 00:01:36,570 ‫Or even better, identify problems visually. 30 00:01:36,570 --> 00:01:41,220 ‫For example, when you see a laggy and sluggish UI, 31 00:01:41,220 --> 00:01:43,560 ‫because then you can focus 32 00:01:43,560 --> 00:01:47,490 ‫on those real performance issues and fix them. 33 00:01:47,490 --> 00:01:51,120 ‫For example, by memoizing expensive re-renders 34 00:01:51,120 --> 00:01:53,910 ‫or expensive calculations. 35 00:01:53,910 --> 00:01:56,910 ‫Now when it comes to the context API 36 00:01:56,910 --> 00:02:00,090 ‫it only makes sense to optimize re-renders 37 00:02:00,090 --> 00:02:03,930 ‫if a certain context has lots of consumers 38 00:02:03,930 --> 00:02:07,140 ‫and if the state updates all the time 39 00:02:07,140 --> 00:02:09,990 ‫causing a significant issue. 40 00:02:09,990 --> 00:02:14,495 ‫So in that case, you can try to memoize the context value, 41 00:02:14,495 --> 00:02:18,960 ‫memoize all the direct child components of the provider, 42 00:02:18,960 --> 00:02:21,930 ‫or set up two separate contexts. 43 00:02:21,930 --> 00:02:24,570 ‫So one for the actual state value 44 00:02:24,570 --> 00:02:27,900 ‫and one for updating the state. 45 00:02:27,900 --> 00:02:30,600 ‫Finally, it's also super important 46 00:02:30,600 --> 00:02:34,620 ‫to always implement code splitting and lazy loading 47 00:02:34,620 --> 00:02:38,313 ‫for all the routes in your single page applications. 48 00:02:39,330 --> 00:02:42,480 ‫Alright, and with that, you're well on your way 49 00:02:42,480 --> 00:02:46,650 ‫to mastering performance optimization in React. 50 00:02:46,650 --> 00:02:49,590 ‫It can be a pretty confusing subject 51 00:02:49,590 --> 00:02:52,110 ‫but also a very important one. 52 00:02:52,110 --> 00:02:55,743 ‫And so, it's great to see that you're still here with me.