Member-only story
Be lazy is no shame. An Efficient Image Loading with React Hooks
“The harder I work, the luckier I get.”– Samuel Goldwyn
Arr, not again! Do your beautiful 🚀 React page is allowing to watch on itself while it still being in the resources loading phase, doesn’t it? Well, pal, you came to the right place then!
Especially in the case of the images. Some blocks can shift one single if they don’t have strict dimensions. Much worse, by showing the image in chopped portions you can literally kill all the customer satisfaction from expected to see.
Hopefully, there is an easy way how to handle such abnormal user interaction. Let’s move on!
This is the main repository where you can find all the code described in this article:
Great, now we’re ready to discuss handling images’ lazy loading based on React Hooks approach. Learn to appear enjoyable preloaders while the target image is being prepared on the screen. Especially if your website consists of a lot of images or has some heavy ones to render.
