CODEWITHSUNDEEP
javascriptreactjsreact-hooks
ben ftima wajdi
ben ftima wajdi

Reputation: 103

React js rendering a large list of nested elements

I have a very large list of 'nested' data and I had to use 4 maps to extract all data and display it

the problem is when I click to redirect to this page it stuck for like half a second or sometimes more before even rendering the page

is there any solution on how to place a loader until this map finish extracting data something like :

return ( 

      {  'map is still in progress'? <LoaderComponent/> : <ShowResult/>}
)

I tried something like the previous code and it shows the loader but it didn't even start to map

Upvotes: 1

Views: 1312

Answers (2)

Rogelio
Rogelio

Reputation: 1094

For large/expensive lists the best practice would be to use the hook useMemo

you can read more about it https://reactjs.org/docs/hooks-reference.html#usememo

implemented as

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

the second argument being an array of dependencies, e.g. page number, keyPress values, etc.

but in your case you could just use

const memoizedValue = useMemo(() => _hugeArray, []);

and then map the memoizedValue in your template

{memoizedValue.map(el, i)=> <div key={i}>{el}</div>}

Note that any function passed to useMemo runs during rendering. Restrict side effects to your useEffect hook

Upvotes: 1

Abir Taheer
Abir Taheer

Reputation: 2783

There's not much you can really do. In a scenario where you need to render a large list of items I'd recommend you check out react window. It was written by a developer who contributed to React and it helps when rendering large lists by only rendering the items that are in the viewport.

I would add a quick implementation to my answer but I don't know what the components of your app look like.

Upvotes: 0

Related Questions