javascript - Best way to handle react data coming from backend

Question

I have a web application with the following flow:

You are in Investments screen, when rendering it makes an API request to some server and then the response comes as an array of investment objects. Then those objects are displayed as a List in the screen. The user is able to clic on one item of the list to get redirected to the Investment Details screen. The investment details screen has two components who need the information of the current investment to display some charts.

The redirect is handled by react-router using the ID of the investment as a URL parameter.

I was wondering which way could be the best to using the information of the current investment.

I mean. I can redirect the user from Investments to Investment Details and then use the URL param to make a request to the API to get the information related to that investment and then pass it down to the child components, or pass directly the information of the investment selected by the user from Investment to Investment Details as props and the same from Investment Details to its child components.

Am I getting into prop drilling? Is another call to the API unnecessary in this case?

Thanks in advance.

question from:https://stackoverflow.com/questions/65942050/best-way-to-handle-react-data-coming-from-backend

Answer 1

You got to use both the approaches together for different reasons:

1. Passing the data already available to next pages. This can be done using state management library most popular one being Redux. This saves you from making another xhr request unnecessarily. Also the data is readily available to your user and the chances of user sticking to your product is much higher when there is no delay is transitioning between screens.

2. Now assuming you are on the Investment detail page; the data we stored in redux on page 1 will be available as long as user stays in the same app and does not refreshes the page as doing so will reset the store to the initial state. You could persist it in local storage but that's your call based on how sensitive the data is and how big is it. If you decide not to store the data, then you could fetch the data for only that particular investment based on the ID available in URL.