I have this code that makes my app hang and Expo using 300% CPU. It looks like an infinite loop but it does not crash and I can't figure out why it's an infinite loop or why its not crashing.
I scraped out the useless parts:
ContainerComponent.js
const [cardsReady, setCardsReady] = useState(0)
const cardLoaded = () => {
setCardsReady(cardsReady + 1)
}
return keys.map((component) => {
<Card key={'some key}
articles={'somearticle'} color={'#eeeeee'}
onLoaded={cardLoaded}
category={'some category}
/>
})
Card.js
useEffect(() => {
onLoaded()
})
onLoaded
updates the state in the parent component which will rerender the parent which will rerenderCard
, this will cause a render loop since there is no dependency on theuseEffect
hook; it will call its callback every render. Sounds like it should load only once, use an empty dependency ([]
) array to run the effect only once when the component mounts.