No Comments Yet
Be the first to share your thoughts and start the conversation.
Optimization
Loading...
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, the instructor shares a crucial optimization tip regarding the use of ScrollView and FlatList in React Native applications. The discussion highlights best practices when dealing with large lists and how to effectively utilize these components without compromising performance.
scrollEnabled was set to false, limiting its potential benefits.00:00:02 And to finish this course off, I want to show you one little gotcha that I found.
00:00:07 It's those little things that you don't find in the documentation very easily, but rather it's a best practice that you have to dig through GitHub discussions
00:00:15 to figure it out fully.
00:00:16 I zoomed out this code so you get a better understanding of the entire homepage that we have right now.
00:00:21 Notice a couple of things.
00:00:23 We have a single scroll view right here.
00:00:26 where we said show vertical scroll indicator is set to false.
00:00:31 But it doesn't matter that we're hiding the indicator.
00:00:34 This scroll view is a vertical view.
00:00:38 And within that vertical view, we also have another flat list, this one right here, which renders all the movie cards.
00:00:46 Those movies are also in a vertical view.
00:00:50 And it is not generally recommended to have two virtualized lists or scroll views or flat lists in the same orientation.
00:00:59 See, this flat list is not a problem.
00:01:01 This one is horizontal.
00:01:03 And that's okay when it comes to the performance.
00:01:05 But having two huge flat lists that are of the same orientation is generally not considered a good practice.
00:01:13 We're using a scroll view to render most of the movies.
00:01:17 And if you go to the docs, It's going to say scroll view versus flat list.
00:01:22 Which one should you use?
00:01:24 Well, scroll view renders all its children components at once, but this has a performance downside.
00:01:32 Imagine you have a very long list of items you want to display, maybe several screens worth of content.
00:01:38 Creating JS components and native views for everything all at once, much of which may not be even shown, will contribute to slow rendering and increased
00:01:47 memory usage.
00:01:48 And this is where the FlatList comes into play.
00:01:51 Because FlatList is smart.
00:01:54 It renders items lazily just before they're about to appear, and it removes the items that scroll way off the screen to save memory and processing time.
00:02:04 So in other words, when you have large lists of vertical elements, you want to use a flat list and not a scroll view.
00:02:11 And in our case, if you look at the flat list, we technically didn't allow it to reach its full potential because we have set scroll enabled to false.
00:02:21 which technically means that we let the scroll view do its job.
00:02:25 Even though it is totally fine, perfectly fine for our use case as we don't have many elements and we wouldn't even been able to harness the power of the
00:02:34 flat list, for bigger applications, it makes a big difference.
00:02:39 And that's exactly why I wanted to leave this for the end of this video.
00:02:43 While it is totally fine for smaller apps, for larger apps, you just gotta be smarter and utilize everything that the software allows you to do.
00:02:53 In this case, React Native's built-in components, like the Flatlist, are super powerful, but you gotta know how to use them.
00:03:01 Below this lesson, I'll leave the improved code base for how the homepage should have looked like if it had hundreds or thousands of elements.
00:03:11 So if you want to check it out, you can go ahead and do that.
00:03:13 But this is just one little optimization out of hundreds or thousands that we go over on JS Mastery Pro.
00:03:21 So check it out, cancel at any time, or get a refund if you don't like it.
00:03:26 But given how many resources we have in our knowledge base and within our paths, it's hard not to find something that you can learn from and that'll help
00:03:35 you advance your career.
00:03:36 With that in mind, great job on coming to the end of this phenomenal project.
00:03:41 allowing users to find their favorite movies, search for them, and then the algorithm that actually checks which movies have been searched most often,
00:03:51 and therefore they get displayed right here on the homepage.
00:03:55 Looking good, feeling good, it is responsive, and it is the best of mobile development that React Native offers.
00:04:03 So thank you so much for watching, and I'll see you on jsmastery.pro.
00:04:09 Have a great day.