To Infinity and JSON!

5 min readMay 27, 2022

The year is 3022.

Humanity is on the brink of extinction. The few who remain fight for survival on a barren outpost deep inside Jupiter’s moon Io.

Computers have been banned, due to a thousand-year war waged against an unstoppable artificial intelligence program.

Back on Earth, at the heart of the A.I. city lives the source of this evil force. Known only as {useEffect9000…}.

What began as a coding project to FETCH a request from the “Info About Humans API” has turned a simple React side effect into an infinite loop, creating mankind’s greatest threat!

If only there were some way to prevent this tragedy…

The sad truth is there was.

Had the person responsible for this mishap known about a certain programming tool all of this could have been avoided.

That tool is called — an “empty dependencies array.”

React Hooks

Empty dependency arrays are part of the React useEffect function syntax. Hooks were added in React 16.8.0. They are backward-compatible allowing them to be used with previously released versions.

The most commonly used Hooks are useState and useEffect. According to W3Schools.com “The useEffect Hook allows you to perform side effects in your components.” useState manages data changes within components. Components that hold state, and their children, re-render whenever their state changes.

There are many more Hooks provided by React.

Some of the most popular ones are:

useRef: Creates a mutable object called “current” that persists values between renders.

useContext: Allows the sharing of data within component trees without the need to pass props.

useCallback: Returns a memoized callback function improving performance by reducing the number of repetitive calculations.

Hooks provide functionality without the need to create class components. (You can learn more about classes by reading my last blog.)

Hooks can be used for:

fetching data
updating the DOM
timers & clocks
subscribing to services
and much more!

Using Hooks

You need to import Hooks at the top of your component before using them:

useState and useEffect are not mutually-exclusive. They often work in unison to create powerful functionality within your program. “Setting state” must be initialized like this:

useEffect “side-effects” can be utilized with this function syntax:

Adding logic inside of the useEffect callback function allows you to create events that happen whenever the component renders:

The useEffect Hook can accept two arguments (the second one is optional.) Without these arguments a simple fetch request will fire endlessly.

This may not be an issue for mundane tasks; however, accidentally feeding your A.I. algorithm an infinite loop of “destroyAllHumans(true)” never ends well.

Photo by Possessed Photography on Unsplash

The way to avoid this mistake is by using an empty dependencies array as an argument while making a useEffect Hook fetch request.

A useEffect with an empty dependencies array looks like this:

Adding an empty array to the end of this fetch will only allow it to happen during the initial rendering of your React component.

Adding variables inside of the array will cause the side effect to happen whenever the variable's state changes.

useEffect Syntax

Without a dependencies array, the side effect happens whenever the component renders:

useEffect(() => {})

With an empty dependencies array, the side effect will only happen during the initial component render:

useEffect(() => {}, [])

With additional variables added to the array, the side effect will happen whenever the variables change:

useEffect(() => {}, [var1, var2])

Putting it all together looks like this:

As you can see, the developer of “useEffect9000" made a mistake with their ternary expression. Adding an empty dependencies array to this request would have limited the incorrect state assignment to a single occurrence.

Using the correct useEffect syntax will not only ensure the safety of your code but possibly the future of our society! With the rapid advancements in technology, it’s only a matter of time until artificial intelligence rules our world. That may sound hyperbolic, however, films like “The Terminator”, “2001 A Space Odyssey”, and “The Matrix” provide cautionary tales about dystopian futures that could easily become reality.