How to Handle Data Lists in React Like a Pro — FlatList React

Photo by Denise Jans on Unsplash

Often enough, you get to deal with some set of data that you must list to the user. This can be in a dropdown, table, or standard list(stack) format. The tricky things you run into allowing the user to do various common actions to this list like sorting, grouping, searching, etc. Well, if what you use is React, you will love this tool…

Take into consideration this array of people…

[
  {firstName: 'Elson', lastName: 'Correia', info: {age: 24}},
  {firstName: 'John', lastName: 'Doe', info: {age: 18}},
  {firstName: 'Jane', lastName: 'Doe', info: {age: 34}},
  {firstName: 'Maria', lastName: 'Carvalho', info: {age: 22}},
  {firstName: 'Kelly', lastName: 'Correia', info:{age: 23}},
  {firstName: 'Don', lastName: 'Quichote', info: {age: 39}},
  {firstName: 'Marcus', lastName: 'Correia', info: {age: 0}},
  {firstName: 'Bruno', lastName: 'Gonzales', info: {age: 25}},
  {firstName: 'Alonzo', lastName: 'Correia', info: {age: 44}}
]

🚫 No more mapping data in the template

In React what developers normally do is map the data directly in the template which means that on every render the template will go over list without mentioning that it can get very ugly the more logic you add.

{people.map((person, idx) => (
  <li key={idx}>
    <b>{person.firstName} {person.lastName}</b> (<span>{person.info.age}</span>)
  </li>
))}

A better solution would be to memo the data to avoid needless computations and handle the list outside the template but you would still need to map the data. However, the problems with dealing with a data list are does not stop here.

There are a lot of common list operations that you will need help with…searching, filtering, pagination, infinite scrolling, etc.

Fortunately, there is a popular package that handles all that and more…

✅ FlatList React

If you have ever tried the FlatList component in React Native this will feel very familiar. The FlatList React component was inspired by its React Native cousin but they are not the same. They both handle lists but dont share most of the API.