How to stop reload the entire component , after history.push

Question

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>

Answer 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