I have one Api for Tab with two screen .The problem is i need in both use this data but:
1) When you open screen with tab,one is loaded but second does not load(i make fetch in both screen in componentDidMount )
2)it is bad to everytime fetch data,Please help me
In order to do avoid unecesssary api calls you can either use a library like redux, the react context api, or a higher order component and then pass the data as props to each component. I think we would need to see more details as to why it’s working in one screen and not another.
Related
i want to send an ID that i get from a database to another screen and i've seen how to do it on google but people only use hook components and i'm new to react native so i don't really understand how to do it.
You can send data from one screen to another using navigation params. Here is example: https://reactnavigation.org/docs/params/.
So I am working on my first React Native project and I am curious as to what the proper way to handle user data is. I have 3 different pages that are: HomePage, ProfilePage, ChatPage. When a user logs in it navigates them to the HomePage.
As of now, I have it to where when the HomePage loads it makes a backend call that retrieves all of the user data and sets it to some states.
Now when the user navigates to a new page like the ProfilePage none of the data is there anymore of course so do I have to make another backend call? So one backend call for each page? Im sure there has to be some way to only make the backend call once. Could I possibly set a global state of some sort? Should I save all the user data to AsyncStorage?
My current File structure is as follows:
App.js -> Contains my React Navigation stack
HomePage.js
ProfilePage.js
ChatPage.js
Thanks for the help!
You can use Redux plus React-Redux.
To say in short redux is a state management library for react. The states will be global to your app accessible across various components inside app. also there will be reactivity.
For more info visit this link
https://react-redux.js.org/
You should use React-Redux and manage your states globally.
I am using useInfiniteQuery with FlatList in React Native. In one of item in the list there is toggle functionality. I have successfully used useMutation and it works great.
When user scrolls and reach to end I fetch another page. Let's say I have loaded 5 pages i.e. 5 requests on the server. Now I go to the top on the first page and toggle first record using mutation. I used
onSettled: () => queryClient.invalidateQueries(key)
I observed that this causes all pages fetch in background i.e. again 5 requests on the server to fetch all pages which are already there and only for just one record.
so my question is that is it possible to avoid all page request and refetch only the page which was changed. I tried to look in documentation but couldn't find anything helpful on this.
I have a use case where I am using stack navigator. I have a homepage where I have some aggregated data and a list which are retrieved from an API.
On clicking on a list item I move to a screen which has more details of that item. There I can add entries for that item. When entries are added using a form, both the homepage as well as the item specific screen need to be updated, which means I need to call the API's again to fetch data. In case no transactions are added I was to avoid this.
What should be the best practice here? should I pass a state variable from homepage and whenever it is updated refresh the screens?
Currently, I am using a willFocus listener, and it makes an API call each time I am on one of these screens. I believe that there can be a better approach than this.
I am creating an application to order food online and I want to perform a functionality where the user does not have to scroll or do any action to see reflected on the screen of their device that their order has changed status.
Example: The user enters to see the status of their order and being there on that screen that the user can see how the status of the order is updated without having to scroll.
I don't know if I should use listeners or some way with async and wait
I am using react native with hooks, react navigation 5, axios for API call
Do you know how I could do this? how can I find more information on this.
I appreciate any help you can give me.
There are two ways you can solve this.
Polling - you can create some interval, say 1 second, for axios to refetch the data you need. Wrapping your axios call with setInterval() https://www.w3schools.com/jsref/met_win_setinterval.asp, is one form of this.
Web Sockets - you can create a web socket that maintains a constant connection to your app and server, so when updates happen it is automatically reflected in the UI. You can check out WebSocket support in React Native here: https://reactnative.dev/docs/network.html#websocket-support