React , Next js , state keeps it's default value after rerender - reactjs

Question

I have a filters states which are responsable for showing and hiding the specified filter. When i choose a value from the filter the page has to fetch data from api , populate the component with new data (component rerenders) , and the menu stay visible and the filter expanded. This code worked before migrating to next js , now when i rerender the component the state takes it's default value of (false) and the filter in not expanded. Here is some code
This is the main component. What im interestet in is FiltersMenu component.
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router';
import FiltersMenu from '../../../../../components/Filters/FiltersMenu';
export async function getServerSideProps(context) {
const productsType = context.params.products;
const res = await fetch(some api)
const data = await res.json();
return {
props: {
products:data.data,
price:{
minPrice:data.minPrice,
maxPrice:data.maxPrice
},
avaibleSizes:data.avaibleSizes
},
}
}
export default Products
function Products(props) {
const [isLoaded,setIsLoaded] = useState(false);
const [showFilters,setShowFilters] = useState(false);//show filters menu or not
const [products,setProducts] = useState();//data of the products fetcher from backend
const [filterValues,setFilterValues]=useState({price:0,color:[],size:[]});//values to send to the server to filter
const toogleShowFilters = (bool) =>{
setShowFilters(bool);
}
const handleSetFilterValues = (e) =>{
//changes values of filterValues
//and after that set isLoaded to false
}
const filterProducts = () =>{
fetch(some api)
.then(res=>res.json())
.then(data=>{
setProducts(data);
setIsLoaded(true);
})
}
useEffect(()=>{
filterProducts();
},[filterValues])
useEffect(()=>{
setProducts(props.products);
setIsLoaded(true);
},[])
if(isLoaded === false) return <p>Loading</p>
return (
<div>
<div className='products-heading'>
<FiltersMenu
showFilters={showFilters}
toogleShowFilters={toogleShowFilters}
price={props.price}
avaibleSizes={props.avaibleSizes}
filterValues={filterValues}
handleSetFilterValues={handleSetFilterValues}
/>
</div>
</div>
)
}
Here is how Filters menu component looks
import React,{useState , useRef, useEffect} from 'react'
import PriceFilter from './PriceFilter';
function FiltersMenu(props) {
const [showPriceFilter,setShowPriceFilter] = useState(false);
const filtersMenu = useRef();
const showFiltersMenu = () =>{
filtersMenu.current.className="filters animate__animated animate__slideInUp";
props.toogleShowFilters(true);
console.log(props.showFilters + " t ");
}
const hideFiltersMenu = () =>{
filtersMenu.current.className="filters animate__animated animate__slideOutDown";
setTimeout(()=>{filtersMenu.current.className='hidden'},1000);
props.toogleShowFilters(false);
console.log(props.showFilters + " t ");
}
useEffect(()=>{
if(props.showFilters===false){
hideFiltersMenu();
}
},[])
return (
<div>
<div onClick = {showFiltersMenu} className='filters-button'>
<img src='/images/filter.png'/>
Filters
</div>
{
<div ref={filtersMenu} className="filters">
<div className='heading'>
<h2>Filters</h2>
<img onClick = {hideFiltersMenu} src='/images/close.png' className='close-icon'/>
</div>
<div
onClick={()=>{setShowPriceFilter((prev)=>!prev)}}
className={"holder" +" " + (showPriceFilter===true && "highlight")}>
<div>Price</div>
<i className="fa-solid fa-caret-down"></i>
</div>
{
showPriceFilter && <PriceFilter price={props.price}
filterValues={props.filterValues}
handleSetFilterValues={props.handleSetFilterValues}
/>
}
</div>
}
</div>
)
}
export default FiltersMenu;
And PriceFilter component
import React, { useState } from 'react'
function PriceFilter(props) {
const [currcentPrice,setCurrentPrice] = useState(props.price.maxPrice);
const handleChange = (e) =>{
props.handleSetFilterValues(e);
}
const andjustPrice = (e) =>{
setCurrentPrice(e.target.value);
}
return (
<div className='price-filter animate__animated animate__flipInX'>
<p className='current-price'>{currcentPrice}$</p>
<div className='slider-holder'>
<p>{props.price.minPrice}</p>
<input onChange={andjustPrice} onMouseUp={handleChange} value={currcentPrice}
type="range" min={props.price.minPrice} max={props.price.maxPrice + 1} name='price' />
<p>{props.price.maxPrice + 1}</p>
</div>
</div>
)
}
export default PriceFilter
Every time i change the price the All components rerender , the main components keeps it's state values , but FiltersMenu takes the default values.

Answer 1

Found a solution , the problem is in
if(isLoaded === false) return <p>Loading</p>
When filterValues are changed isLoaded is set to false therefor the FiltersMenu component doesen't render , after that when isLoaded is true again , FiltersMenu is rendered again and thats the reason the state in FiltersMenu has default values , to fix it simply isLoaded can be used in return as that
return (
{
isLoaded === true && <MyComponent />
}
)