[SOLVED] How to reset the state in react when component is rendered or shown?

How to reset the state in react when component is rendered or shown?

I am trying to do the pagination part in my app, however the data is correct, but the only issue is when I try to call or show a component i.e Trending.jsx on click of a button(Most Popular) and ( type of toggle button), at first it gets the correct page number, but when I hide that Trending.jsx component the page numbers remains the same, on my default page/component which is Movie.jsx

However, I want to reset page number if the component is not shown and start from 1 when a user clicks to see Trending.jsx and viceVersa

Please see the link to code sand box for the code I tried. https://codesandbox.io/s/moviehunt-demo-forked-rhom0?file=/src/components/Movies/Movies.jsx

Full live app: https://rhom0.csb.app/movies

Thanks for the help.

Solution

As far as I understood, the problem is that when toggling back & forth between Movies & Trending, the Page Number is not getting reset to 1.

So, I created a useEffect with dependency on the state: showTrending in which I'm just updating the page number back to 1.

useEffect(() => {
    setPage(1);
}, [showTrending, setPage]);

Also in order to update the Page Number in Pagination, I passed the page as prop to PageNav so it gets updated automatically. I hope this is the solution you are looking for.

Code Sandbox: https://codesandbox.io/s/moviehunt-pagination-solution-hsc0f/?file=/src/components/Movies/Movies.jsx:2304-2305

Live: https://hsc0f.csb.app/movies

Also, I recommend adding some styling to the Most Popular Button so it's clear when it's Toggled On & Off.