Hello internet folks! I’m pretty new to writing and sharing stuff on the internet, but I believe that by sharing our knowledge, we can build new cybernetic pyramids full of computational power! 🧑🏾💻🧑🏾💻🧑🏾💻
A few days ago, I was loading some data for my current clients at “CDP” where I was trying to show 1000+ data. Everything was going well until we received a requirement to scrape and find 75000+ entries and display them using React-Select, which was previously handling the 1000+ data.
Given my experience in this field, as soon as I heard the news, I knew that React wouldn’t be ideal for creating 75000+ list components to select from, especially when each of them might have their own CSS and listeners.
So what can we do? In the React-select Advance section, you might find a solution where you listen to keystrokes or the end of scrolling to bring in new data. However, I was thinking of pulling all the data back into my client and then processing it virtually using some other technique.
I came across some ideas on Stack Overflow that might help you. In another post, I may explain it in more detail, but for now, you can have a look at this code. It will help you with your problem.
Happy coding, and see you in the next post! 🕸🕸🕸
`import React, { useState, useCallback, useEffect, useRef } from "react"; import { FixedSizeList as List } from "react-window"; import InfiniteLoader from "react-window-infinite-loader"; const LOADING = 1; const LOADED = 2; const CustomMenuList = ({ children, initialOffset }) => { const itemHeight = 50; const [itemStatusMap, setItemStatusMap] = useState({}); const itemStatusMapRef = useRef(itemStatusMap); useEffect(() => { itemStatusMapRef.current = itemStatusMap; }, [itemStatusMap]); const isItemLoaded = useCallback((index) => !!itemStatusMapRef.current[index], []); const loadMoreItems = useCallback((startIndex, stopIndex) => { setItemStatusMap((prevStatusMap) => { const newStatusMap = { ...prevStatusMap }; for (let index = startIndex; index <= stopIndex; index++) { newStatusMap[index] = LOADING; } return newStatusMap; }); return new Promise((resolve) => { setTimeout(() => { setItemStatusMap((prevStatusMap) => { const newStatusMap = { ...prevStatusMap }; for (let index = startIndex; index <= stopIndex; index++) { newStatusMap[index] = LOADED; } return newStatusMap; }); resolve(); }, 2500); }); }, []); const Row = React.memo(({ index, style }) => { let label; if (itemStatusMap[index] === LOADED) { label = children[index]; } return ( <div style={{ ...style }}> {label || "Loading..."} </div> ); }); return ( <InfiniteLoader isItemLoaded={isItemLoaded} itemCount={children.length} loadMoreItems={loadMoreItems} threshold={5} > {({ onItemsRendered, ref }) => ( <List height={500} itemCount={children.length} itemSize={itemHeight} initialScrollOffset={initialOffset} onItemsRendered={onItemsRendered} ref={ref} width="100%" > {Row} </List> )} </InfiniteLoader> ); }; export default CustomMenuList;` 
Top comments (0)