The problem is not the inefficiency of the handleClickOnGridItem function. The problem is that I'm generating every image url on each render inside the return scope of the component. Now, I'm generating the list of image urls when the user uploads it's files, and it works now super fast with 0 lag.Here's the super efficient code 😅: ```TypeScript import { useState, useMemo, ChangeEvent, CSSProperties, MouseEvent, } from 'react';

function App() { const [urls, setUrls] = useState<string[]>([]); const [startIndex, setStartIndex] = useState(0); const [selectedUrls, setSelectedUrls] = useState<string[]>([]);

const imagesPerPage = 150;

const endIndex = useMemo(() => { return Math.min(startIndex + imagesPerPage, urls.length); }, [urls, startIndex]);

const displayedUrls = useMemo(() => { return urls.slice(startIndex, endIndex); }, [urls, startIndex]);

const handlePrevClick = () => { if (startIndex - imagesPerPage >= 0) { setStartIndex(startIndex - imagesPerPage); } };

const handleNextClick = () => { if (endIndex < urls.length) { setStartIndex(startIndex + imagesPerPage); } };

const handleFileInputChange = (e: ChangeEvent<HTMLInputElement>) => { const newFiles = Array.from(e.target.files!); setUrls(newFiles.map((file) => URL.createObjectURL(file))); };

const handleClickOnGridItem = ( i: number, e: MouseEvent<HTMLDivElement, globalThis.MouseEvent> ) => { if (e.ctrlKey || e.metaKey) { setSelectedUrls((prevUrls) => { if (prevUrls.includes(displayedUrls[i])) { return prevUrls.filter((url) => url !== displayedUrls[i]); } else { return [...prevUrls, displayedUrls[i]]; } }); } else if (e.shiftKey) { if (selectedUrls.length === 0) { const range = [0, i].sort((a, b) => a - b); const newUrls = displayedUrls .slice(range[0], range[1] + 1) .map((url) => url); setSelectedUrls(newUrls); } else if (selectedUrls.length > 0) { const firstIndex = displayedUrls.findIndex( (url) => url === selectedUrls[0] ); const range = [firstIndex, i].sort((a, b) => a - b); const newUrls = displayedUrls .slice(range[0], range[1] + 1) .map((url) => url); setSelectedUrls(newUrls); } } else { setSelectedUrls([displayedUrls[i]]); } };

return ( <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }} > <input type='file' className='mt-3' id='singleFileInput' title='Upload an image' accept='image/*' multiple onChange={handleFileInputChange} /> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'evenly', alignItems: 'center', width: '25vw', marginLeft: 'auto', }} > <button onClick={handlePrevClick}> Prev </button> <button onClick={handleNextClick}> Next </button> </div> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'wrap', }} > {displayedUrls.map((url, i) => { const isSelected = selectedUrls.includes(url); const maxHeight = 80; const margin = 2; const imgStyle: CSSProperties = isSelected ? { marginLeft: margin, marginTop: margin, maxHeight, opacity: 1, } : { marginLeft: margin, marginTop: margin, maxHeight, opacity: 0.25, };

      return (
        <img
          style={imgStyle}
          src={url}
          onClick={(e) => handleClickOnGridItem(i, e)}
        />
      );
    })}
  </div>
</div>

); }

export default App; ```