What is the simplest way to achieve lazy loading of images in React?

This used to be a thing that you actually had to write code for but the situation is a bit different now.

Simply add the attribute loading="lazy" to your <img /> tag. It's been supported for quite a while and has pretty good coverage, except for Internet Explorer which never supported it.

More information as well as a polyfill can be found here: web.dev/browser-level-image-lazy-l...

Here's a note about browser support: developer.mozilla.org/en-US/docs/W...