The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
🚀 Rendering 100k+ items in React? Here’s what actually works.
Large lists can easily kill performance if handled the wrong way. This is how I approach it in real projects:
• Virtualization
Render only what’s visible using libraries like react-window. Massive win.
• Memoization
React.memo, useMemo, and useCallback help avoid unnecessary re-renders.
• Pagination / Infinite Scroll
If users can’t see it yet, don’t render it yet.
• Lightweight DOM
Shallow, simple components render and update much faster.
Rule of thumb:
If you’re rendering 100k items at once, the issue is usually architectural, not React itself.
Always curious how others tackle large-scale UI performance.
#React #Frontend #Performance #WebDevelopment #JavaScript #TypeScript
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Designing system feedback, especially loading states, used to exhaust me. Searching for inspiration, then animating from scratch… too much work.
So I said: no more. I built something to make it easier.
Meet Dotload, a mini animation tool for creating simple to complex dot grid loaders for your projects.
You can customise colour, size, gap, speed, glow, shape, pattern, and grid in real time.
Compose multiple loaders on an infinite canvas and experiment freely.
Export as React components, PNG, SVG, GIF, Lottie, JSON, or video and ready for production
Dotload makes designing and shipping beautiful loading animations fast, fun, and effortless.
Play with it here and let me know what you think
https://dotload.figma.site/
CanvasGhost — The "OS Hijack" Landing Page
Standard SaaS landing pages are broken. They rely on passive scrolling and boring feature lists. We aimed to change this by transforming the hero section into a dynamic product simulation.
For this Makeathon, we built an "OS Hijack" experience. Users land on a chaotic, disorganised desktop. With a single click, the UI takes over. Using React state and Framer Motion physics, the page physically organises the digital mess into a perfect grid, revealing the actual website and CTA only after the AI proves its value.
Key interactions:
• Gamified "Chaotic Desktop" hero section
• Single-click file sorting simulation
• Staggered Framer Motion spring physics
• Dynamic UI reveal post-interaction
• "Show, don't tell" conversion mechanic
Live prototype: https://speak-barge-94748623.figma.site/
I made "Visualizer2600" 🎵 I miss fun music visualizers, so I designed one that has a Spotify integration and works when authorized to:
- Detect music is playing on your Spotify account and display data such as artist, song, and lyrics in a colorful, animated player
- Change player aesthetic on every song change, unless you update color and shape preferences!
- Move based on "Danceability" metrics Spotify provides
- Update text colors based on accessibility standards
View my Demo or try it out here:
https://ash-whirl-66923100.figma.site/
Trending
maxearnings
The next frontier of payments is live on Contra. How are you maximizing revenue?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
aidesignflow
AI tools are redefining how designer work. What does your workflow look like?
micrographics
Micrographics started as utility - barcodes, packaging, instruction labels. How would you use them?
aivideo
AI video tools are moving at warp speed. What tools are you using?