CODEWITHSUNDEEP
javascriptreactjs
user12549070
user12549070

Reputation:

React efficiently update (render) new data

I have a component that fetches some data like this

const data = fetch(API)
setState([...state, data])

I append new data to the state in a list form. This is how I render my data,

return (state.map(d => <Component data={d}/>))

This is getting really slow when I append more and more data. Is there a way that instead of re-render the existing components, you just append a new component with new data to the existing list of components?

Upvotes: 1

Views: 189

Answers (2)

Travnikov.dev
Travnikov.dev

Reputation: 464

Answer really depends on size of dataset:

  • If less than 10000 probably React.memo + react-fast-compare done well for you
import React from 'react';
import isEqual from 'react-fast-compare';
const YourComponent = props => {...}
export default React.memo(YourComponent, isEqual);
  • If more than 10000 you should look into specialized libraries such as react-window

Upvotes: 1

Nico
Nico

Reputation: 86

I guess your applications is getting slow, because your component re-renders even if the data stays the same. You could use useMemo/React.memo in your <Component /> to avoid this.

Also you should use a unique key in your state.map, which is also important to avoid unnecessary re-renders.

Upvotes: 0

Related Questions