Best way to update React DOM - javascript

I'm new to react and I want to build a Spotify clone which lets me control my playback. Therefore I'm fetching the API every second to get the current data.
So far everything works just fine but I'm asking myself what would be the best way to display the current data in the browser.
Right now I'm using a useState for the current data which rerenders my code including the DOM and displays the data every time I set the useState. As this happens every second I have my concern if this is performant.
Are there any best practices or concepts I can use? I was thinking about setting the current data via innerHTML as with that I could avoid rerendering my component every second.
Thanks for every answer!

Related

How can i show a loader (Reactjs), while the slice in my store (Redux) is empty?

So, to put you in context. In my project, I retrieve data from multiple API.The problem is that data take time to fully load. I did use setTimeout to solve the problem, But it's not the best solution.

React app - render a feed in the background

I was looking to build a feed into a react app that as you were scrolling through it it will constantly fetch more data to display to you (it basically has no end). I was looking for a way to avoid re-rendering the whole feed every time new data was fetched to be displayed to the user since it will start to get slow to re-render the whole component after a while.
I know I can do it with server-side rendering or through ReactDom.createPortal to render the element outside the react tree. The first option is out since that would be the only thing I would need a backend for and is not worth it.
The second option looks like the way to go but I am not sure if I can still access the state object and other react features from within the component rendered outside the react tree (I don't know if I would really need them or not but having them can't be bad)
Outside those two options, is there any other that I am not aware of?

All application data in single redux store

I'm new to redux.
I have an app with five pages and every page have some tables.
should I save all pages data in store even those pages not rendered currently?
If answer is yes, what happen when I have large data in total?(5000 records)
If answer is no, help me to understand it and how manage deferent page States.
There is no clear cut way to this problem as is with most programming conundrum.
storing all the state information in redux is alright and manageable especially if you don't really have a lot of states or moving parts in the store. but in larger applications, you don't really want to update the redux store every time someone clicks an input field, especially if that is a trivial state it is updating(like states of a text field like focused, pristine and dirty). getting a good ratio of stuff in the redux store and the local state store can get tricky at first but you'll get the hang of it with more experience, though a general rule of thumb is
does this state affect another component?
If you answered yes, then you might want to move that to redux. otherwise leaving it in the local state store is fine. As for your concern with dealing with large data, take note that you should not load ALL the data on page load. load only the things you need(better if you can preload these) and fetch additional data as needed.
i.e. if you have an index page that should display the top 10 most popular tv shows this season. instead of seeding your index page with all the shows in your database, just load the 10 most popular tv shows. then proceed to fetch data you need as you navigate around the app

Redux time travel debugging with current time dependency

In my application I have a selector that checks if the data it's fetching is stale. If it isn't stale, the selector returns the data; else it doesn't. It checks the staleness by comparing the current time (via new Date()) with the time that the data was loaded.
When trying to scrub back in forth in actions in the Redux dev tools, however, since the time is not part of the Redux store, the selector will call the data stale even if at the time of the action it wasn't.
So the core problem seems to be that Redux is no longer acting as a single source of truth—the clock time is now an external dependency. The goal, then, would be for the clock time when the selector is accessed to be a part of the Redux state, to properly allow for time travel debugging.
But what is the most elegant way to have an access of the Redux store dispatch a state transition? One way is to manually add an updateTime() dispatch every time you access the selector, but that requires remembering every time the selector is invoked to make that call, which I find to be less than ideal.
Another floated option was to keep track of the current time upon every state transition, but that doesn't help since it doesn't actually trigger an update upon time of access, but only upon the time that the state itself changed.
How do other people deal with this problem? I'm failing to find a nice solution around this. Thanks!

Preventing UI flicker when loading async data in React.js

I have some data in IndexedDB, which can only be accessed asynchronously. I want to build a React.js UI using that data. The general idea is that I'll have multiple React components that load data from IndexedDB and display some UI based on that data, and the user will be able to switch between which component is currently displayed.
My concern is that I don't know how to elegantly accomplish this without some superfluous UI flickering. I can do my asynchronous data loading in componentDidMount and put the data in this.state, but then render will be called before it's finished, forcing me to either display nothing or display some placeholder data for a tiny fraction of a second while the data from IndexedDB is retrieved.
I'd rather have it not render until after my data from IndexedDB is loaded. I know it won't take long to load, and I'd rather the previous component continue to display while the new data loads, so there is just one flicker (old -> new) rather than two (old -> blank/placeholder -> new). This is more like how a normal web page works. When you click a link from one website to another, your browser doesn't instantly show a blank/placeholder screen while it waits for the server from the linked website to respond.
I'm thinking I could do my data loading outside of the React component before calling React.render and then passing it in via this.props. But that seems messy, because nesting components would become tricky and some of my components will be updating over time and pulling new data from IndexedDB, through the exact same code that initializes them. So it seems like an ideal use case for storing data in this.state because then I could update it within the component itself when I get a signal that new data is available. Initialization and updating would be as easy as calling a this.loadData() function that sets some values in this.state... but then I have the aforementioned extra flicker.
Does anyone have any better ideas? What's the canonical solution to this problem? Is it really to just have millisecond blank/placeholder flickers all over the place?
From the comments it sounds like the behavior you have in the previous implementation (waiting to navigate until you have fetched the necessary data) is the desired goal. If that's the case, the best way to do this without having the flickering would be to use some external object to manage the state and pass the data as props when it has been fetched.
React Router has a pretty good solution where it has the willTransitionTo hook to fetch data for a given component before navigating. This has the added benefit of allowing you to easily catch errors if something goes wrong.
Updated with new link:
https://github.com/reactjs/react-router

Categories