In this article I will not tell you that you need to use as little content as possible to display or cache images. No! We will only talk about real list optimization and it doesn’t matter what we need to display, because if the client says I want – you can’t argue with him.

Let’s start with the simplest example. Let’s say we have an array.

What is the easiest way to render a small list? It is correct to use the .map method which returns a new array and we can display the entire list. Well, let’s look at one example:

Correct? No! Never do that!

  • First, you always need to specify key for each item. And please do not use for this index element in the array. Below I will tell you why.
  • Secondly, the code looks messy
  • Third, do not use anonymous functions

Why not to do it like this:

or like that:

Is it much better now? Not really.

It remains to make the final touch. Namely, do not use an anonymous function for rendering inside .map. After all, when we call the render method, each time we create a new function for rendering each item and it does not matter whether the component is updated or not. Never. I repeat, never do that. I often stumble upon code written in this format or when an experienced developer takes on a project and it already says so. And you know what? They don’t correct things, they themselves continue to write with words.

For what to try if before it was also not so good.
And immediately the question “What? How? Why? Don’t you want to make a project that you are working on better? ” All we need is to slightly change the rendering.
Namely:

And the last step we can do it by use the so-called PureComponent to render each item.

That was all we needed!

What if I have a large and complicated list?

I think we figured out the simplest rendering of the list. Next, let’s see what to do with dozens of elements for rendering in it. And do we need it to display quickly and smoothly? The answer is FlatList. Flatlist and all? Of course not. Let’s figure out what we can do with it and what optimization methods to use.
Basic example:

Now we can not specify a key in each element, but specify the keyExtractor parameter, this should be a function that returns a unique identifier for each element in the array.
The renderItem will no longer pass the element itself, but an object containing three parameters:

  • item – the element of the array itself
  • index – the index of the element in the array
  • separator – what we don’t need yet

Is that all optimization?
Let’s move on

If we want to tell our list that we need to redraw the elements but do not want to change the original data array, then there is a separate extraData parameter for this. When you change it, the list will be updated.

If we know the exact height of each layout, we can use getItemLayout. If you know in advance the height of your element, you can specify it and then you can skip the measurement of dynamic content

From the official ReactNative website:

But what if I do not know the height of the element but it never changes? Then you can use the getLayout method and find out this.

The array is too large and the whole list is being rendered soooooo long, that causes the braking? InitialNumToRender and maxToRenderPerBatch will save you. With them we can download content in parts.

  • initialNumToRender indicates how many elements should be rendered at first boot. Always specify the amount to fill the visible part of the screen from bottom to top and even with a margin
  • maxToRenderPerBatch indicates how many items will be loaded in the following batches

If you use lazyLoad through onEndReached and onEndReachedThreshold, then specify the amount that comes in api from one request, otherwise you will encounter problems with duplicating of items in the list.

Now let’s move on to the rather dubious optimization methods

I want to warn that these methods can cause malfunctions and that you use them at your own risk.

But what if you remove elements that are not in the visible area of ​​the screen?
removeClippedSubviews – if this parameter is set to true then elements that are out of visibility will be hidden.

Be very careful as such a case is possible that with fast scrolling you will come across an empty space into which content will be loaded later.

I recommend using it with getItemLayout.
I also want to say that you can configure how many out of range elements will be hidden.

That’s probably all. There are several more methods that are used to optimize lists in ReactNative, but I consider them rather doubtful and I will not talk about them in this article not to confuse you.