How optimize little code React "RandomImage" from array with onclick - reactjs

Question

I make a little code for take array images and show one and change it with click, but I think that code can be more optimized, especialy the second useState but I dont know how.
import React, { useEffect, useState } from 'react';
const apiURL = 'https://picsum.photos/v2/list?page=2&limit=100';
export default function Image() {
function random(mn, mx) {
return Math.random() * (mx - mn) + mn;
}
const [gifs, setgifs] = useState([]);
useEffect(function () {
console.log('test');
fetch(apiURL)
.then((res) => res.json())
.then((response) => {
const gifs = response.map((image) => image.download_url);
setgifs(gifs);
});
}, []);
let imagenaleatoria = gifs[Math.floor(random(1, gifs.length))];
const [imagenactual, nuevaimagen] = useState();
return (
<div className='App'>
<section className='App-header'>
<div className='caja'>
<img
onClick={() => {
nuevaimagen(gifs[Math.floor(random(1, gifs.length))]);
}}
src={imagenaleatoria}
></img>
</div>
</section>
</div>
);
}
Thanks so much.

Answer 1

I thought I just rewrite your code snippet and add comments so you understand what and why
import { useState, useEffect } from "react";
const apiURL = "https://picsum.photos/v2/list?page=2&limit=100";
// has no acces to state so there is no need to create this funtion isde the RandomImage component
export const getRandomIndex = (min, max) => {
return Math.floor(Math.random() * (max - min) + min);
};
export const RandomImage = () => {
const [gifs, setGifs] = useState([]);
const [randomIndex, setRandomIndex] = useState(null);
// runs only after the first render
useEffect(function () {
console.log("test");
fetch(apiURL)
.then((res) => res.json())
.then((response) => {
const gifs = response.map((image) => image.download_url);
setGifs(gifs);
setRandomIndex(getRandomIndex(0, gifs.length));
});
}, []);
// just sets an random index
const handleClick = (event) => {
setRandomIndex(getRandomIndex(0, gifs.length));
};
return (
<div className="App">
<section className="App-header">
<div className="caja">
{!gifs.length ? (
'Loading...'
) : (
<img onClick={handleClick} src={gifs[randomIndex]} />
)}
</div>
</section>
</div>
);
};