React pattern for very fast data fetching and rendering?

This page summarizes the projects mentioned and recommended in the original post on reddit.com/r/reactjs

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarQube - Static code analysis for 29 languages.
  • talent.io - Download talent.io’s Tech Salary Report
  • uPlot

    📈 A small, fast chart for time series, lines, areas, ohlc & bars

    I contribute to a dashboard tool for a robotics competition. The data is sent from robot to a react client via web socket. So protocol is already in place. Data transfer isn't a problem since it's via local network. Works great. Since it's a dashboard, there are just a number of components/widgets with isolated states that subscribe to the data. The way this is structured isn't great but I didn't write the original implementation. So we can just assume and treat the component in isolation with a subscription to the necessary socket data. Important thing to note that the socket data is passed down through props and redux. I know. Not ideal. I didn't make it. So there isn't a direct subscription from the socket to the component. I will probably rewrite this in the future but its quite a lot of work and the rest of the product works great. So as of now, new data is received via prop changes. I'm just trying to graph the data at the moment. Graphing already exists actually. There is a rudimentary canvas graph which essentially just draws and rerenders on props changes (the props changing on new data in the subscription). The prop changes aren't throttled or anything. The performance is fine it's a very simple canvas graph. However, I would like to replace it with uPlot (https://github.com/leeoniya/uPlot) to enable some cool features. uPlot doesn't have any react integration or anything. Just your standard HTML + JS canvas graph. I want to throttle rendering to the graph but I'm not entirely sure how that pattern works with react. Initial thought was to queue data in a ref and flush to useState. Data would be sent to the graph via useEffect changes. I know this is premature optimization. I plan to start with the basics and iterate. I was just asking ahead of time really. It was an interesting thing to think about. I'm not super experienced with React so not enough into the weeds where I can come up with something that appropriately decouples state and UI. Even though UI should be a function of state.

  • zustand

    🐻 Bear necessities for state management in React

    i would suggest you use zustand. you can try it out live and see the difference it makes: https://github.com/pmndrs/zustand#transient-updates-for-often-occuring-state-changes

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts