Sound Effects and useEffect

useEffect sometimes can seem like it lives in the metaverse, but I assure you it is much simpler than an Exmachina AI. Let’s break it down to its components first, shall we?

First, we have the call useEffect this is just like anything else; we are telling the program that anything that follows will run according to the arguments. Arguments will be the following components.

These arguments are not the ones you get into when choosing what to eat for dinner. The useEffect comes with two arguments the first will be what code will be executed, and the second is when that code should re-render. Let’s look at an example, shall we?

Above, we have the call following that there is the first argument, and the last argument is telling the program every time the value in allPokemon changes, fire off the useEffect. What if we only want the code to render upon the first render? Well, that’s a simple solution. An empty array will do the trick.

The setup is identical; instead of passing a dependency, it passes an empty array. This is just known that it will run on the mount. Why do we use an array, you ask, scratching your head? This is if you want to pass multiple dependencies.

Now the useEffect will fire if allPokemon or newPokemon values change or are manipulated. The last thing I will leave you with is a common gotcha. Your terminal and server are going wild! Is your data getting logged and fetched at the speed of light over and over again?

The useEffect is missing its dependency, so it is firing upon every re-render, which is no good! Never overwork your computer cause it’s just trying to please. Now render to your heart’s desire.