react useEffect async triggering eachother problem how solve you guys?-CodePudding

useEffect(()=>{
 // console.log(`Ahanda items`,items)
 setItems(JSON.parse(localStorage.getItem(`baskets`)) )
},[])


useEffect(()=>{ 
    localStorage.setItem(`baskets`,`${JSON.stringify(items)}`)
},[items])

Hello i have classic async problem have. problem is there is basket for eccommerce shopping site basket simple one i want to when site is refreshing if localstorage inside have any list of product item pull and setItem but the problem is the other items Useeffect works to. So if i add timeout and do like that :

useEffect(()=>{
 // console.log(`Ahanda items`,items)
 setItems(JSON.parse(localStorage.getItem(`baskets`)) )
},[])

useEffect(()=>{ 
  setTimeout(() => {
    localStorage.setItem(`baskets`,`${JSON.stringify(items)}`)
  }, 200);
},[items])

but the problem is not solved because some times i can be use api's

here is other explanation

by the way, This custom hook was created by Kent creator of Remix , you can check it here : https://github.com/kentcdodds/react-hooks