Optimizing Lists in React - Solving Performance Problems and Anti-patterns

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern API for authentication & user identity.
  • LearnThisRepo.com - Learn 300+ open source libraries for free using AI.
  • nanoid

    A tiny (124 bytes), secure, URL-friendly, unique string ID generator for JavaScript

    Therefore, you should specify a key prop with something that uniquely identifies the item being rendered. If the data you’re receiving is coming from a backend, you might be able to use the database’s unique id as key. Otherwise, you could generate a client-side random id with nanoid when creating the items.

  • react-window

    React components for efficiently rendering large lists and tabular data

    We are going to cover virtualization in a future article. In the meanwhile, you can read more about virtualized lists in React, with libraries like react-window, and in React Native, with the built-in FlatList component.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • redux

    Predictable state container for JavaScript apps

    Every time the isEnabled value changes, your toggleItem identity will change as well. In these scenarios, you should either merge both sub-states into the same useState call, or even better, convert it to a useReducer one. Given that useReducer's dispatch function has a stable identity, you can scale this approach to complex states. Moreover, the same applies to Redux's dispatch function, so you can move the item toggle logic at the Redux level and convert our toggleItem function to something as:

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts