Learn how to use the Effect Hook to run some JavaScript code after each render of a function component. This effect code could fetch data, manage timers, or even read and make changes to the DOM.


The Effect Hook

When building software, we often start with default behaviors and then modify them to improve performance. 

We've learned that the default behavior of the Effect Hook is to call the effect function after every single render. 

Next, we learned that we can pass an empty array as the second argument for `useEffect()` if we only want our effect to be called after the component's first render. 

In this exercise, we'll learn to use the dependency array to further configure exactly when we want our effect to be called!
 
When our effect is responsible for fetching data from a server, we pay extra close attention to when our effect is called. Unnecessary round trips back and forth between our React components and the server can be costly in terms of:
* Processing
* Performance
* Data usage for mobile users
* API service fees
 
When the data that our components need to render doesn't change, we can pass an empty dependency array so that the data is fetched after the first render. When the response is received from the server, we can use a state setter from the State Hook to store the data from the server's response in our local component state for future renders. Using the State Hook and the Effect Hook together in this way is a powerful pattern that saves our components from unnecessarily fetching new data after every render!

An empty dependency array signals to the Effect Hook that our effect never needs to be re-run, that it doesn't depend on anything. Specifying zero dependencies means that the result of running that effect won't change and calling our effect once is enough. 

A dependency array that is not empty signals to the Effect Hook that it can skip calling our effect after re-renders unless the value of one of the variables in our dependency array has changed. If the value of a dependency has changed, then the Effect Hook will call our effect again!

Here's a nice example from the [official React docs](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects):

```js
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if the value stored by count changes
```

Fetch Data

In this lesson, we learned how to write effects that manage timers, manipulate the DOM, and fetch data from a server. With the Effect Hook, we can perform these types of actions in function components with ease!
 
Let's review the main concepts from this lesson:
* We can import the `useEffect()` function from the `'react'` library and call it in our function components.
 * _Effect_ refers to a function that we pass as the first argument of the `useEffect()` function. By default, the Effect Hook calls this effect after each render.
 * The _cleanup function_ is optionally returned by the effect. If the effect does anything that needs to be cleaned up to prevent memory leaks, then the effect returns a cleanup function, then the Effect Hook will call this cleanup function before calling the effect again as well as when the component is being unmounted.
 * The _dependency array_ is the optional second argument that the `useEffect()` function can be called with in order to prevent repeatedly calling the effect when this is not needed. This array should consist of all variables that the effect depends on. 

The Effect Hook is all about scheduling when our effect's code gets executed. We can use the dependency array to configure when our effect is called in the following ways:

| <u>Dependency Array</u> | <u>Effect called after first render & ...</u> |
| --- | --- | 
| undefined | every re-render |
| Empty array | no re-renders |
| Non-empty array | when any value in the dependency array changes |

Hooks gives us the flexibility to organize our code in different ways, grouping related data as well as separating concerns to keep code simple, error-free, reusable, and testable!

Review

The `useEffect()` function calls its first argument (the effect) after each time a component renders. We've learned how to return a cleanup function so that we don't create performance issues and other bugs, but sometimes we want to skip calling our effect on re-renders altogether. 
 
It is common, when defining function components, to run an effect only when the component mounts (renders the first time), but not when the component re-renders. The Effect Hook makes this very easy for us to do! If we want to only call our effect after the first render, we pass an empty array to `useEffect()` as the second argument. This second argument is called the **dependency array**. 
 
The dependency array is used to tell the `useEffect()` method when to call our effect and when to skip it. Our effect is always called after the first render but only called again if something in our dependency array has changed values between renders.
 
We will continue to learn more about this second argument over the next few exercises, but for now, we'll focus on using an empty dependency array to call an effect when a component first mounts, and if a cleanup function is returned by our effect, calling that when the component unmounts.
 
```js
useEffect(() => {
  alert("component rendered for the first time");
  return () => {
    alert("component is being removed from the DOM");
  };
}, []); 
```
 
Without passing an empty array as the second argument to the `useEffect()` above, those alerts would be displayed before and after every render of our component, which is clearly not when those messages are meant to be displayed. Simply passing `[]` to the `useEffect()` function is enough to configure when the effect and cleanup functions are called!

Control When Effects Are Called

When multiple values are closely related and change at the same time, it can make sense to group these values in a collection like an object or array. Packaging data together can also add complexity to the code responsible for managing that data. Therefore, it is a good idea to separate concerns by managing different data with different Hooks. 

Compare the complexity here, where data is bundled up into a single object:

```js
// Handle both position and menuItems with one useEffect hook.
const [data, setData] = useState({ position: { x: 0, y: 0 } });
useEffect(() => {
  get('/menu').then((response) => {
    setData((prev) => ({ ...prev, menuItems: response.data }));
  });
  const handleMove = (event) =>
    setData((prev) => ({
      ...prev,
      position: { x: event.clientX, y: event.clientY }
    }));
  window.addEventListener('mousemove', handleMove);
  return () => window.removeEventListener('mousemove', handleMove);
}, []);
```
 
To the simplicity here, where we have separated concerns:

```js
// Handle menuItems with one useEffect hook.
const [menuItems, setMenuItems] = useState(null);
useEffect(() => {
  get('/menu').then((response) => setMenuItems(response.data));
}, []);

// Handle position with a separate useEffect hook.
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
  const handleMove = (event) =>
    setPosition({ x: event.clientX, y: event.clientY });
  window.addEventListener('mousemove', handleMove);
  return () => window.removeEventListener('mousemove', handleMove);
}, []);
```
 
It is not always obvious whether to bundle data together or separate it, but with practice, we get better at organizing our code so that it is easier to understand, add to, reuse, and test!

Separate Hooks for Separate Effects

Before Hooks, function components were only used to accept data in the form of props and return some JSX to be rendered. However, as we learned in the last lesson, the State Hook allows us to manage dynamic data, in the form of component state, within our function components. 

In this lesson, we'll use the **Effect Hook** to run some JavaScript code after each render to: 
* fetch data from a back-end service.
* subscribe to a stream of data.
* manage timers and intervals.
* read from and make changes to the DOM.

Components will re-render multiple times throughout their lifetime. These key moments present the perfect opportunity to execute these "side effects".

There are three key moments when the Effect Hook can be utilized:
1. When the component is first added, or _mounted_, to the DOM and renders.
2. When the state or props change, causing the component to re-render.
3. When the component is removed, or _unmounted_, from the DOM.

Later on in this lesson, we'll learn how to further fine-tune exactly when the Effect Hook executes.

Why Use useEffect?

There are two main rules to keep in mind when using Hooks:
1. Only call Hooks at the top level.
2. Only call Hooks from React functions.
 
As we have been practicing with the State Hook and the Effect Hook, we've been following these rules with ease, but it is helpful to keep these two rules in mind as you take your new understanding of Hooks out into the wild and begin using [more Hooks](https://react.dev/reference/react) in your React applications.
 
When React builds the Virtual DOM, the library calls the functions that define our components over and over again as the user interacts with the user interface. React keeps track of the data and functions that we are managing with Hooks based on their order in the function component's definition. For this reason, we always call our Hooks at the top level; we never call hooks inside of loops, conditions, or nested functions. 
 
Instead of confusing React with code like this:
```js
if (userName !== '') {
  useEffect(() => {
    localStorage.setItem('savedUserName', userName);
  });
}
```

We can accomplish the same goal while consistently calling our Hook every time:

```js
useEffect(() => {
  if (userName !== '') {
    localStorage.setItem('savedUserName', userName);
  }
});
```
 
Secondly, Hooks can only be used in React Functions. We've been working with `useState()` and `useEffect()` in _function_ components, and this is the most common use. The only other place where Hooks can be used is within custom hooks. [Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks#custom-hooks-sharing-logic-between-components) are incredibly useful for organizing and reusing stateful logic between function components.

Rules of Hooks

The Effect Hook tells our component to do something every time it's rendered (or re-rendered). Combined with states, we can use the Effect Hook to create interesting dynamic changes in our web pages!  

Suppose we want to allow a user to change the title of the web page tab every time they type. We can implement this with the Effect Hook (`useEffect()`) like so:  

```js
import React, { useState, useEffect } from 'react';
 
function PageTitle() {
  const [name, setName] = useState('');
 
  useEffect(() => {
    document.title = `Hi, ${name}`;
  });
 
  return (
    <div>
      <p>Use the input field below to rename this page!</p>
      <input onChange={({target}) => setName(target.value)} value={name} type='text' />
    </div>
  );
}
```
 
Let's take a look at the above example in more detail. First, we import the Effect Hook from the `'react'` library: 

```js
import { useEffect } from 'react';
```
 
The `useEffect()` function has no return value as the Effect Hook is used to call another function. We pass the callback function, or _effect_, to run after a component renders as the argument of the `useEffect()` function. In our example, the following effect runs after each time the `PageTitle` component renders:

```js
() => { document.title = `Hi, ${name}`;}
```
 
Here, we assign `Hi, ${name}` as the value of [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title).

The `onChange` event listener triggers the `PageTitle` component to be re-rendered every time the user types in the input. Consequently, this triggers `useEffect()` and changes the document's title. 
 
Notice how we use the current state inside of our effect. Even though our effect is called after the component renders, we still have access to the variables in the scope of our function component! When React renders our component, it will update the DOM as usual, and then run our effect after the DOM has been updated. This happens for every render, including the first and last one.

Function Component Effects

Some effects require **cleanup**. For example, we might want to add event listeners to some element in the DOM, beyond the JSX in our component. When we add event listeners to the DOM, it is important to remove those event listeners when we are done with them to avoid memory leaks! 
 
Let's consider the following effect: 
 
```js 
useEffect(()=>{
  document.addEventListener('keydown', handleKeyPress);
  // Specify how to clean up after the effect:
  return () => {
    document.removeEventListener('keydown', handleKeyPress);
  };
})
```
 
If our effect didn't return a _cleanup function_, a new event listener would be added to the DOM's `document` object every time that our component re-renders. Not only would this cause bugs, but it could cause our application performance to diminish and maybe even crash!
 
Because effects run after every render and not just once, React calls our cleanup function before each re-render and before unmounting to clean up each effect call.
 
If our effect returns a function, then the `useEffect()` Hook always treats that as the cleanup function. React will call this cleanup function before the component re-renders or unmounts. Since this cleanup function is optional, it is our responsibility to return a cleanup function from our effect when our effect code could create memory leaks. 