CODEWITHSUNDEEP
node.jsreactjs
Ursus
Ursus

Reputation: 30056

Render a large amount of complex HTML

I have a react component where I have to render something like 600 children components (and the number will increase slowly). Each of these inner component are pretty big and complex (they have even a svg in it). Also, I have to be able to filter them. I used keys everywhere to be sure not to waste re-render but it's anyway very heavy. I'm wondering which would be the most performant way to do this. I can't paginate unfortunately. Any help would be appreciated.

Upvotes: 1

Views: 233

Answers (1)

Lyubomir
Lyubomir

Reputation: 20037

That's too much for JavaScript / React to handle on the client at once, your best bets are - server render and split work.

  1. Server side render first N
  2. Lazy load the rest 600 - N and render incrementally
  3. Implement shouldComponentUpdate
  4. Use keys (as you've done)

You can also use Fixed Data Table if it fits your concept.

Upvotes: 1

Related Questions