React useEffect Explained Simply

In useEffect, the word “effect” refers to a functional programming term called a “side effect”.

To really understand the concept of a side effect, we must first have a grasp of a pure function.

React components are intended to be pure functions, meaning they receive a input and produce a predictable output of JSX.

function User(props) {
  return <h1>{props.name}</h1>; // John Doe
}

Pure functions have a great benefit of being predictable, reliable, and easy to test.

With side-effects, this is the total and exact opposite of functional programming.

What are side-effects in React?

Side effects are not predictable because they are actions which are performed with outside code. In React, we perform side effects when we need to reach outside our component.

This is why useEffect exists provide a way to handle performing sided effects.

function User({ name }) {
     let value = makeHTTPRequestForName(name);
     return value;
}

Why does React hate side effects? React hates side effects because it renders so fucking much (honestly lol). Think about the nightmare of keep track of HTTP calls for all the renders!

Side effects need to be separated from the rendering process. All side-effects should be performed

How do I use useEffect?

The basic syntax of useEffect is as follows:

import { useEffect } from 'react';

function MyComponent() {
      useEffect(() => {
          makeHTTPRequestForName(name);
      }, []);
}

The correct way to perform the side effect in our User component is as follows:

1. We import useEffect from ‘react’
2. Call useEffect about returned JSX
3. We pass it two arguments: a function and an array.

What is the array at end of useEffect?

Even as an experienced developer, useEffect is very strange and foreign looking.

By far the strangest part of useEffect is the array at the end called the “dependencies array”. This array should include all of the values that our side effect relies upon.

useEffect(() => {
       // Code here will run after EVERY render. This is usually an anti pattern.
});

Everytime your component renders, React will update the screen and then run the code inside useEffect. In other words, useEffect “delays” a piece from running until that render is reflected on the screen.

Why useEffect Can Be Unnecessary

Although useEffect is a great tool, it must be used sparingly.

1. You don’t need useEffect to transform data for rendering.

Rendering code lives in the top level of your component. This is where you take props and state, transform them, and return JSX. Rendering code must be functionally pure.

2. You don’t need useEffect for events.

Sending a message in a chat is an event because it is directly caused by the user clicking a specific button. However, sending a network request is an effect because it happens no matter which interaction caused the component to appear. Effects run after the end of a commit because this is the best time.