I might start a little series of exploring common bugs in react.
Last one spoke about trying to array.map on an empty array
Key takeaways I hope you get from this:
- Use separate API keys for dev & prod
- The all too common infinite loop bug
What happened?
I occasionally trigger an infinite rerender, especially when integrating a new library.
Now, here’s where it gets interesting somewhere in goosebumps:
- I have a component that does a network request to the spotify api
- I was trying to implement virtualized lists for a page that renders hundreds of these components
- I messed something up while implementing the virtualized list , and a ton of components tried to render, meaning hundreds/thousands of network calls
- Of course, the spotify API immediately put me in the naughty corner and rate limited me.
- This highlighted the importance of keeping separate API keys for your dev, and prod environment.
useEffectFootgun
useEffect gets a lot of flak these days, but I still find it useful for quickly validating ideas & debugging. It’s an easy way to tap into the render lifecycle of a component, & sometimes I want to check something silly like
What is the value of this variable when the component first mounts on the screen??
In this case, a console.log with an empty dependency array quickly answers this for me
useEffect(() => {
console.log(some_value)
}, [])
but I still occasionally botch it and trigger that infinite loop. Some may say, skill issueđź’€