after returning Parent route Trigger useEffect

Question

In my current React app, i have a route like

<Route path="products" element={<Products />}>
     <Route path=":productId" element={<Product />} />
</Route>

in the Products component, I have an useEffect where I fetch all products. In the product component, I have another useEffect where I fetch a single product. Users can edit that product. in this component, a back button navigates the user to the "/products" route. But this time useEffectwas not triggered in the Products component so updated information on the Product component is not reflected here.

Does this answer your question? [Intercept/handle browser's back button in React-router?](https://stackoverflow.com/questions/39342195/intercept-handle-browsers-back-button-in-react-router) — Giorgi Moniava, Aug 30 '22 at 11:34

score 0 · Answer 1 · answered Aug 30 '22 at 11:32

The useEffect inside Prodcuts will not be triggered because it is unaware of the change in the products.

You are fetching twice and each fetch is independent of the other as far as React is concerned. One solution is to store the results of the first fetch in state and then modify it in Product which will trigger useEffect.

after returning Parent route Trigger useEffect

1 Answers1