how can I do without reloading page load all data in react js?
I am creating treeview and in this node selected node value display in right-side view but refreshing page after showing the results.
For this i would be the best practice to user Redux in combination with SocketIO.
For a good example read this: Using socket.io in React-Redux app to handle real-time data.
Related
I made a comment application using react
I have three input types (text, link, image) I want them still present the data even after refreshing (reload) the page
You can use localStorage for this. Have a look at localStorage
So I want to load a page that is content driven from CMS (I cannot use WebView)
Page rendering is taking time so want to only render visible things on screen first (even if we get all the data from CMS).
And then render the remainder of the page in the background once the visible content is rendered.
I cannot use React Suspense because React native with Hermes engine doesn't support.
Came across this old post - Is there some finished rendering event in react native? where there was no solution to detect rendered event on components.
Cannot use FlatList because each section in the page content is different.
Cannot use state updation as a sign that the component has rendered because the component is heavy and takes time to render after state updation.
I have created react application using redux that is working fine. But now I want to implement SSR. Although I have implemented SSR and that is working but on page load, I want to render that with data but its rendered without data.
How can I render my page with initial data in SSR?
I'm using redux to load data from the backend in a react application. I'm loading a bunch of data with axios and then I can select one item and see the specific information in a different view. I'm rendering a "Loading" view every time I do a search in the backend. The problem is: this search is fine whenever I load the view refreshing the browser. But when I'm navigating in the own app, I use react-router-dom and I don't need to show the loading screen because it is already in the redux store.
Is there a way to tell redux or react to not make the async call if I already have the data?
Is redux-persist a solution for this? Should I do it manually with a condition in react?
I make the call in the componentDidMount method
You should pass the data from redux store down to your component as a property and you should make a check in componentDidMount or before that if data is empty or null or whatever and make a decision if you should load it after that. You don't need any 3rd party lib for data persistence (like redux-persist) since you actually have it in your redux store already persisted.
I need help with figuring out how not to make my react.js component rerender same images from Instagram and add them to the exisitng in the view.
I have a react-instafeed container in my react.js component, which is fetching 20 latest images from my Instagram account and renders them in a neat grid. The react-instafeed element is a wrapper around the popular instafeed.js framework and makes the same methods and configurations available in react.js environment.
On initial load it fetches the images and renders them. However, if the current route is refreshed (by pressing the button in the header navigation, for example), it fetches all 20 images once again and adds them in the view, and so on.
I tried dealing with it by setting something like 'loaded' in the state in the 'success, or 'after' methods of the instafeed, but that's clearly not working and is anti-pattern.
I tried doing it with componentDidMount, with the result of a doubled http call on initial rendering and 20x2 images at once.
Apparently, setting state is not the right strategy in this case. How could I either prevent the element from making a n-th call to Instagram, or maybe destroying the element on componentWillUpdate()?