Improving performance in React native with object

Hi there!

Usually when we're working with data in React Native we work with arrays, that are easier to use in flatlists. Modifying any data in an array is a computational complex operation, especially as the dataset grows, for instance, if we have an array of strings and we want to find one string that match, we would have to loop thought the array to find and remove it, so the larger the array, larger the time spent in this operation.

To fix the issue above, it's possible to use objects with unique identifiers, that would be easier and faster to manipulate the dataset.

So, who we can do it?

First of all, let's take a look at the following example:

const App = () => {
  const [data] = useState([
    {
      name: 'Joao',
      job: 'Developer',
    },
    {
      name: 'Maria',
      job: 'CEO',
    },
  ]);

  const _renderItem = ({item}) => {
    return (
      <View style={styles.view}>
        <Text style={[styles.text, styles.titleText]}>{item?.name}</Text>
        <Text style={styles.text}>{item?.job}</Text>
      </View>
    );
  };

  const _keyExtractor = item => {
    return item.name;
  };

  return (
    <SafeAreaView>
      <FlatList
        renderItem={_renderItem}
        data={data}
        keyExtractor={_keyExtractor}
      />
    </SafeAreaView>
  );
};

It will render the following screen:

To convert it to use an object, we would have to change the data initialization and how the flatlist would use this data.

Starting with the initialization, we could use an unique identifier, in this case we will use the pattern user-x, where x is an integer, resulting in this new format:

{
    'user-1': {
      name: 'Joao',
      job: 'Developer',
    },
    'user-2': {
      name: 'Maria',
      job: 'CEO',
    },
  }

Then, we should change the props for the flatlist, since we have an object and the data props expects an array we could use the Object.entries to have an array, for example if we had an object like this:

const data = {'user-1': {'name': 'Maria'}};

Object.entries would return to us:

[
 ['user-1', {'name': 'Maria'}]
]

That result shows that we will also have to change the render item function, since the item received from the flatlist is now an array:

const _renderItem = ({item}) => {
    const [_, itemData] = item;

    return (
      <View style={styles.view}>
        <Text style={[styles.text, styles.titleText]}>{itemData?.name}</Text>
        <Text style={styles.text}>{itemData?.job}</Text>
      </View>
    );
  };

The complete code:

const App = () => {
  const [data] = useState({
    'user-1': {
      name: 'Joao',
      job: 'Developer',
    },
    'user-2': {
      name: 'Maria',
      job: 'CEO',
    },
  });

  const _renderItem = ({item}) => {
    const [_, itemData] = item;

    return (
      <View style={styles.view}>
        <Text style={[styles.text, styles.titleText]}>{itemData?.name}</Text>
        <Text style={styles.text}>{itemData?.job}</Text>
      </View>
    );
  };

  const _keyExtractor = item => {
    const [key] = item;

    return key;
  };

  return (
    <SafeAreaView>
      <FlatList
        renderItem={_renderItem}
        data={Object.entries(data)}
        keyExtractor={_keyExtractor}
      />
    </SafeAreaView>
  );
};

Benefits of using the object

As mentioned above, using an object would be better for performance, especially when modifying the data. For example, if this list had options to remove an item or add a new one, it would be faster to remove the data from the object considering that we already have identified it.