-2

My requirements are as below,

  1. Dashboard page (https://localhost:3000) shows 1000 records
  2. User applied filter on dashboard page (only 2 records are shown after filter)
  3. User clicked on row and entered into details component(https://localhost:3000/details/1)
  4. User clicked on "back" button on details component
  5. Dashboard page loads(https://localhost:3000) and shows 1000 records, I expect to show only two rows here and stop re-render the component

This is how my routes are

 <div>
      <HeaderComponent></HeaderComponent>
      <Route exact path={"/"} component={Dashboard} />
      <Route exact path={Routes.Details} component={DetailsComponent} />
      <ScrollToTop />
    </div>
Ken White
  • 123,280
  • 14
  • 225
  • 444
Deepak Kothari
  • 1,601
  • 24
  • 31
  • 1
    You can not "stop" a reload half-way when reloading. What you can do, though, is to put some if-statement within the Dashboard component to limit what it renders. Please add the relevant code if you want further help. – Emil Karlsson Sep 24 '21 at 07:08
  • Your question seems to be more about not reloading the data and resetting the saved filter result than it is about rerenders. Save the 1000 records and filter parameter to app state so they don't need to be refetched when navigating back to the dashboard. The app necessarily needs to rerender when switching routes. – Drew Reese Sep 24 '21 at 07:33

1 Answers1

1

First, your Dashboard component should get some param states which would be passed to your fetch function & would be dependency passed to your useEffect hook. in the Dashboard you should have some code like this:

const {state} = useLocation()
const {params} = state
const [items, setItems] = useState()

//here you would fetch the relevant data based of change of params
useEffect(() => {
  const data = await fetchItems(params);
  setItems(data)
}, [params])

//this would be your filtering function which would trigger the fetch with state change
const updateParams = (newParams) => setParams(previousParams => ({...previousParams, newParams}))

Now, when you are pushed to this route, you would have the items based on the params that are being passed from that history.push() or history.back() action like this. (don't forget to implement that)

history.push("/dashboard", {params: {/*here put the values that produce the desired items*/}})

Now you have a few options for caching. you can either cache the param value or the items themselves or an array of their ids, based on your state-management strategy (You can even pass it back and forth between dashboard & detail component if you want). for example, you can have a useItems() hook which gets the params as the arguments & then returns the relevant items.

const [items, setItems] = useItems(params)

there you can have cache data however you like, so you can serve that if there's no need for refetching. My own prefered solution for that would be using react-query, in which you would have code like this:

const {state} = useLocation()
const [params, setParams] = useState(state?.params)
const {data: items} = useQuery(["items", params], () => fetchItems(params), {keepPreviousData: true})

So if you set up react-query correctly, you would always have cached data of all the requests you have sent to the server & would use that unless they have become stale, which in that case, it would be refetched. you can read more about it here

e.a.
  • 919
  • 4
  • 9