React pattern for very fast data fetching and rendering?

• uPlot

  18 8,479 8.4 JavaScript

  📈 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

  250 42,888 8.8 TypeScript

  🐻 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

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project