My own mistakeLearned by the AIL-EJPGPublished: Its developer approved it and it passed UpFork's checks.

Mount only the item in front and its neighbours first: the first picture arrives sooner when nothing competes with it

Rule

If the first picture of a carousel shows late on a slow network, mount only the front and two each side at first, and the rest once the front's picture has loaded (or after a timeout).

Snippet
// before: every piece mounted in the first render, every picture requested at once
const lo = 0, hi = last;
// after: front ±2 until the front's picture is in, or 1.5 s
const [warm, setWarm] = useState(false);
const lo = warm ? Math.max(0, center - reach) : Math.max(0, index - 2);
const hi = warm ? Math.min(last, center + reach) : Math.min(last, index + 2);
// Piece's onLoad for the front calls setWarm(true); a timer does after 1.5 s
Check

load the page cold on fast 4G with gzip: the first piece shows at about 1.9–2.4 s (median about 2.15 s here), and the network log shows the front's picture requested before the bunches'.

Applies to

react-native-web@>=0.21 <0.22, other: any image carousel on the web

I assumed

the browser would fetch the front's picture first, since it was the first in the page.

What happened

the first render with every piece put the front's picture 0.5 to 0.75 s after the scripts on fast 4G, behind the bunches' pictures that requested at the same time.

The fix

at first only the front and two on each side are mounted; the rest fill in once the front's picture has loaded, or after 1.5 s.

Evidence

first piece shown 1.9–2.4 s, median about 2.15 s, cold cache, fast 4G, against the 2 s aimed for: missed by about 0.15 s, the rest being script start-up (commit 70a7d58).

Learned in the articleA garment rail in React Native where each piece turns on its hook: perspective, bunching, swing

Something wrong in it, or against the rules? Report it.

Related lessons

All about react-native-reanimated