React-window Alternatives

react-window reviews and mentions

• Introducing Suspense: APIs to simplify data loading and caching, for use with React Suspense.
  6 projects | reddit.com/r/reactjs | 25 Feb 2023

  Oh, right. I totally forgot to mention that– but the idea of "less rendering" in this case seems less like a Suspense concern and more like a windowing concern. I've written a few libraries for that stuff (react-window and react-virtualized) although there are others that may fit your needs better. Their main focus is limiting what you're rendering to more or less only what's on the screen at any given point. Combine that with memoized filtering and I would imagine you're set.

• I've built a self-hosted file storage
  9 projects | reddit.com/r/selfhosted | 9 Nov 2022

  On the UI it is faster because of the great react-window library - it doesn't render the whole files in the folder at once, only the part you actually see on the screen. That makes scrolling through large directory efficient really fast.

• how is infinite scroll done nowadays?
  2 projects | reddit.com/r/reactjs | 24 Aug 2022

  Interesting question, although I don't know the definitive way it is handled nowadays. I think looking into the source code of the popular infinite-scroll packages might help like: react-window: https://github.com/bvaughn/react-window virtual: https://github.com/tanstack/virtual

• 25 React component libraries you just might need for your next project!
  19 projects | dev.to | 31 May 2022

  react-window React components for efficiently rendering large lists and tabular data

• Effectively rendering lists using the `useMemo` hook in React.js
  2 projects | reddit.com/r/reactjs | 5 May 2022

  If you have trouble rendering a huge list of items, what you probably want to do is to only render a subset of it. This can by achieved by doing infinite scroll, or by using heavier stuff like react-virtualized and react-window are great libs to achieve this.

• 7 React optimization techniques you should know
  3 projects | dev.to | 30 Apr 2022

  There are also several libraries that allow us to create virtualized lists but there are 2 that stand out from the rest: react-virtualized and react-window. Both libraries are from Brian Vaughn who is one of the developers of the React team.

• Add live captions to a video call app with daily-js
  3 projects | dev.to | 25 Apr 2022

  Without this styling for the and its container, Daily Prebuilt defaults to taking up only a small amount of space on the page. You can change the styling however you like and Daily Prebuilt will fit within those constraints.

  Note: We are using wrap() to add Daily Prebuilt to an existing , but you could also use the createFrame method to make a new , style that frame, and add it to the page.

  

  Transcription component

  Now that we have Daily Prebuilt loaded on the page, let’s start implementing transcription by adding a component to store our buttons and transcript.

  From our [room].tsx, we reference the Transcription component and pass some managed state to the component:

  • callFrame: passes the Daily call frame object, which allows the component to start and stop transcription
  • newMsg: sends each new transcripted message to the component for showing the text in the transcript window
  • owner: this boolean tells the component whether the current user is or isn’t a room owner
  • isTranscribing: this boolean tells the component that Daily is or isn’t currently transcribing.

   <Transcription
     callFrame={callFrame}
     newMsg={newMsg}
     owner={isOwner}
     isTranscribing={isTranscribing}
   />
  

  Enter fullscreen mode Exit fullscreen mode

  In our Transcription component (defined in components/Transcription.tsx), we have a button that toggles the option to start or stop transcription based on whether transcription is currently active according to Daily (we’ll come back to that in a second):
  

  <button
   disabled={!owner}
   onClick={() => {
     isTranscribing ? stopTranscription() : startTranscription();
   }}
  >
   {isTranscribing ? "Stop transcribing" : "Start transcribing"}
  </button>
  

  Enter fullscreen mode Exit fullscreen mode

  If the meeting participant is not an owner, this button will be disabled along with a message explaining that only meeting room owners can start transcription.

  This button utilizes these two simple functions:
  

   async function startTranscription() {
     callFrame?.startTranscription();
   }
  
   async function stopTranscription() {
     callFrame?.stopTranscription();
   }
  

  Enter fullscreen mode Exit fullscreen mode

  How do these functions know if transcription is happening or not? For that, we jump back to [room].tsx. Earlier in the post, we looked at the basic structure of the startCall function. In our demo, this function also has a few lines dedicated to Daily event listeners. We are listening to a few Daily-emitted events that help us shape the video call experience. Two of these events are transcription-started and transcription-stopped events.

  When those events are emitted, we know to update the React state to set isTranscribing to its correct boolean value.
  

     newCallFrame.on("transcription-started", () => {
       setIsTranscribing(true);
     });
  
     newCallFrame.on("transcription-stopped", () => {
       setIsTranscribing(false);
     });
  

  Enter fullscreen mode Exit fullscreen mode

  Note: You can also use our new Daily React Hooks library to more quickly connect your React-based app with Daily’s JavaScript API!

  Adding transcription

  Now that we are able to start and stop transcription, we need to add the transcripts to the page. Our transcripts come in from Daily via an ”app-message” event. For that, we need another event listener within our startCall function. This checks whether each ”app-message” came from the ID of “transcription” and whether it is a full sentence (that’s what data.is_final is doing below). When we have a message, we save the message as an object with the author’s username, the text transcription, and a timestamp.
  

     newCallFrame.on(
       "app-message",
       (msg: DailyEventObjectAppMessage | undefined) => {
         const data = msg?.data;
         if (msg?.fromId === "transcription" && data?.is_final) {
           const local = newCallFrame.participants().local;
           const name: string =
             local.session_id === data.session_id
               ? local.user_name
               : newCallFrame.participants()[data.session_id].user_name;
           const text: string = data.text;
           const timestamp: string = data.timestamp;
  
           if (name.length && text.length && timestamp.length) {
             setNewMsg({ name, text, timestamp });
           }
         }
       }
     );
  

  Enter fullscreen mode Exit fullscreen mode

  We need some React state to hold messages, so we set up a const where we instantiate this state as an empty array to hold incoming message objects.
  

  const [messages, setMessage] = useState<Array<transcriptMsg>>([]);
  

  Enter fullscreen mode Exit fullscreen mode

  This is essentially all that needs to be done to get transcription on the page. You can loop through this array of messages and add them to the screen, or you can add each new message to the screen as it arrives. However, there’s one extra step worth taking to optimize your app for all of these messages, and we’ll see how that works in the next section.

  Note: Transcript messages are ephemeral. They are only available for the message the user has received while they are in the room. If you refresh your page, you’ll lose the transcripts. Similarly, new users will only see a transcript for conversations that have taken place since they’ve joined and not a history.

  

  Optimize your window

  Seeing transcripts appear on the screen is super fun, but it can quickly slow down browser windows with the addition of so many DOM elements getting added to the screen. Below, we’ll cover not just how we add transcript messages to our page, but also how to do it in a way that is efficient and not overwhelming to anyone’s browser.

  To help with this, we need to add two dependencies to our app: react-window and react-virtualized-auto-sizer. These libraries help us by loading only the most recent messages. Instead of loading the entire array of message objects as HTML, the DOM only loads the small part of the data set visible in the window. This virtualization technique prevents poor performance caused by an overloaded browser tab holding too much data in memory. Users can still scroll up and see previous messages which are loaded as needed when requested.

  We have established consts for the transcript list and rows that instantiate as empty objects.
  

   const listRef = useRef<any>({});
   const rowRef = useRef<any>({});
  

  Enter fullscreen mode Exit fullscreen mode

  We add new messages received from the parent [room] page to an array. We also have a small function that keeps the array of messages moving to the bottom (most recent) element every time a message is received.
  

   useEffect(() => {
     setMessage((messages: Array<transcriptMsg>) => {
       return [...messages, newMsg];
     });
   }, [newMsg]);
  
   useEffect(() => {
     if (messages && messages.length > 0) {
       return () => {
         scrollToBottom();
       };
     }
   }, [messages]);
  

  Enter fullscreen mode Exit fullscreen mode

  For each row, we call a formatting function. It structures the transcript in the style of “Message Author: Message Text” on the left and Timestamp trimmed to a local time only on the right (styled with CSS, the handy-dandy float:right).
  

   function Row({ index, style }: rowProps) {
     const rowRef = useRef<any>({});
  
     useEffect(() => {
       if (rowRef.current) {
         setRowHeight(index, rowRef.current.clientHeight);
       }
     }, [rowRef]);
  
     return (
       <div style={style}>
         {messages[index].name && (
           <div ref={rowRef}>
             {messages[index].name}: {messages[index].text}
             <span className={styles.timestamp}>
               {new Date(messages[index].timestamp).toLocaleTimeString()}
             </span>
           </div>
         )}
       </div>
     );
   }
  

  Enter fullscreen mode Exit fullscreen mode

  Our rendered transcript block then looks like this, with each loaded row wrapped in the react-window List and react-virtualized-auto-sizer AutoSizer elements.
  

  <AutoSizer>
   {({ height, width }) => (
     <List
       height={height}
       width={width}
       itemCount={messages.length}
       itemSize={getRowHeight}
       ref={listRef}
     >
       {Row}
     </List>
   )}
  </AutoSizer>
  

  Enter fullscreen mode Exit fullscreen mode

  Download

  The transcripts collected in this app are not available after the call concludes, so downloading them is helpful if you want to use them later.

  To do that, we need to prepare a chat file with all of the text, not just the text currently virtualized on the screen.

  We have already seen that we are using React state to collect and set messages. For preparing a plain text file with the transcript inside, we will add a transcriptFile state that instantiates as an empty string.
  

  const [transcriptFile, setTranscriptFile] = useState<string>("");
  

  Enter fullscreen mode Exit fullscreen mode

  Next, let’s set up a useEffect to style the transcript in a way that works best for reviewing later. Unlike the live transcript where we have the timestamp on the right and set to local time only, this includes the full timestamp and date for every message.
  

   /*
     Allow user to download most recent full transcript text
   */
  
   useEffect(() => {
     setTranscriptFile(
       window.URL.createObjectURL(
         new Blob(
           messages.map((msg) =>
             msg.name
               ? `${msg.timestamp} ${msg.name}: ${msg.text}\n`
               : `Transcript\n`
           ),
           { type: "octet/stream" }
         )
       )
     );
   }, [messages]);
  

  Enter fullscreen mode Exit fullscreen mode

  This link will get the most recent full transcript and by default save it as a file called transcript.txt, although this can be changed later by the user.
  

  <a href={transcriptFile} download="transcript.txt">
    Download Transcript
  </a>
  

  Enter fullscreen mode Exit fullscreen mode

  Conclusion

  And there you have it! Using Daily Prebuilt and our new Transcription API with Deepgram, it’s not too much work to add a live transcript to your meetings. From what we’ve shown in this demo, you can easily add different styles (including to the Daily Prebuilt window itself by customizing with your own color themes)

  We would love to see what you’ve built using Daily. Reach out to us anytime at [email protected]!

• Techniques to optimize React render performance: part 2
  4 projects | dev.to | 11 Mar 2022

  You can leverage libraries like react-virtualized or react-window to handle this for you.

• Optimizing Lists in React - Solving Performance Problems and Anti-patterns
  3 projects | dev.to | 16 Feb 2022

  We are going to cover virtualization in a future article. In the meanwhile, you can read more about virtualized lists in React, with libraries like react-window, and in React Native, with the built-in FlatList component.

• [Showoff Saturday] I spent the last two weekends building a Table View for Trello
  2 projects | reddit.com/r/webdev | 5 Feb 2022

  react-window - to virtualize the table rows on boards with a lot of cards

• A note from our sponsor - InfluxDB
  www.influxdata.com | 24 Mar 2023

  Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression. Learn more →