Now it's time to tackle the dependency array. When an array is provided, the callback should only be called when the values change.

In this solution, you'll learn why you need to track and compare in order to implement the dependency array.

Implementing the Dependency Array

[00:00] let's start out by updating our types so we're going to add a depths which is optional and it can be an array of anything and our previous steps also optional can be an array of anything and then we're going to take optional depths

[00:16] as an argument an array of anything and we're going to add our depths now the previous steps is going to be a little bit tricky though I think even our copilot our AI assistant is going to just say oh the previous steps is just the depths but that's not at all correct the previous steps needs to be

[00:34] the previous effect depths so before we assign the effects at ID to this new object we need to access the dependencies from that previous version of that effects storage there so we get that previous steps and we stick that in

[00:53] there we can also do it this way because of the way JavaScript works and I'm going to just do that okay so with that now we have access to that we now support this API so we can get rid of that and now we just need to make sure we only call the callback if it has no dependencies or the dependencies changed

[01:10] so let's do that our has depth's changed is effect depth's so if if there are dependencies then we're going to perform this calculation otherwise we'll just say that the dependencies changed so here's the calculation this works out

[01:27] nicely I think in my solution we do every every one of them must be equal so we'll do that so let's read it if there are dependencies then go through every one of them take that dependency and its index and we'll compare that dependency

[01:43] against the previous dependencies with at that index if any of those things are not equal then we'll say that the dependencies have changed now interestingly object is is what's used inside of the react implementation it

[02:01] does behave basically the same as a triple equal with a couple slight differences that you can feel free to look up later so if we say if has depth's changed then we'll call the callback and now when I am clicking this it is

[02:17] absolutely calling every time so we have some sort of problem here that we'll have to debug let's see the depth is every one of those oh right we need to negate that there we go so we want to say every one of them has to be the same

[02:37] and if that's not the case then the depth's changed there we go all right boom now we're not logging every time but as I didn't enable and disable then we log because that dependency is changing so that's exactly what we were

[02:49] looking for awesome work so just to wrap this up the only difference was updating our types so that we have dependencies and previous dependencies then we updated our implementation to access the dependencies and also the previous

[03:08] dependencies and then inside of our implementation here we just determined did those dependencies change and if they did then we will call the callback and if we want to double check we can also get rid of the dependencies here to make sure we didn't break the previous behavior and we did not so we're in a

[03:24] good spot good job

Requirements for the Dependency Array

[00:00] Kelly the co-worker updated our use effect because now we only want the logs to happen when enabled changes and so we added this dependency array. The difference here is without the dependency array it'll happen every single time with the dependency array it should only get called when enabled

[00:16] changes and right now that's not happening because we're using our own version of use effects and so every single time we render at all even if we're not changing enabled it is doing the console log we don't want to have that problem and so your job is to add support for the dependencies this is

[00:35] going to be a little bit trickier than you might think because you have to not only store the dependencies along with the callback but also the previous dependencies so that you can compare the previous with the next ones and if there's no dependency array then you just need to make sure you call the effect callback if there is a dependency array then you need to compare it with

[00:54] the previous one and each individual item in that array needs to be the same and if they are different then only then do you call it so I think you should be able to manage this one let's get into it

With a poor understanding of hooks, you get this lingering feeling that you're missing out on some potential. 

If you could just deepen your understanding of your tools, you'd gain another level of productivity. 

You could be using a variety of hooks and have the `eslint-plugin-react-hooks` plugin installed that keeps you on track. 

But, there's something missing. How is this all working?

`useState` and `useEffect` are your *most* fundamental tools in the hooks tool-belt. 

And like with all hooks, they follow these two rules:

1. Only Call Hooks at the Top Level
2. Only Call Hooks from React Functions

Why do these rules exist?

Learning the answer to this question is how you'll deepen your understanding. 

And the best way to do that is to jump in and build your own hooks!

In this tutorial, you'll be recreating `useState` and `useEffect` from scratch. 

And by the end, your brain will be its own `eslint-plugin-react-hooks`. Because you'll know exactly why the rules can't be violated. 

## What to expect:

**Recreate useState:** You'll be recreating your own version of useState. In the process you'll learn about how hooks preserve state, and manage component renders. 

**Support multiple hooks:** Learn exactly why hooks *must* be in a deterministic order and how multiple hooks are managed and persisted.

**Recreate useEffect:** Finally you'll apply what you learned to useEffect and learn how React stores the callbacks and diffs the dependency array. 

In this tutorial, you'll recreate useState and useEffect from scratch, learn essential rules, and understand how hooks manage state and renders.

Build React Hooks

In this workshop you'll be building your own versions of React Hooks without using any existing hooks!

Build React Hooks Introduction

Introduction

Introduction to useState

The goal of this challenge is to replace the useState the comes from React with your own. Then, just render the initial state.

In this solution, you'll learn how to setup a useState generic function and some of the type nuances that need to be considered. 

Create Your Own useState Generic Function

Render an Initial State

The goal in this problem is to make the setState function from your custom useState hook work. 

In this solution you'll work towards making your own version of the useState hook's setState function.

Reassign state to a New Value

Make the setState Function Work

In this problem, your task is to figure out how to manually re-render a component whenever state is updated.

Learn how to create your own render function that you can trigger whenever you need.

Manually Trigger Re-Renders

Component Doesn't Re-Render when State Updates

In this problem, you will need to to figure out how to preserve state between renders.

Learn the steps you need to take to ensure that your state doesn't get overwritten by the initial state on each render.

Prevent State From Being Reset Each Render

State Is Reset to initialState on Each Render

Time to take a break before moving on to the next section!

Dad Joke and Break

useState

In this section you'll be breaking renders down into phases and supporting multiple hooks at once.

Introduction to Multiple Hooks

Explicitly define render phases so that it's clear what phase you are in on each render. 

In this solution, we go over the steps we need to take to allow multiple useState hooks to initialize their own state.

Explicitly Defined Phases

Multiple Calls to useState Breaks initialState

The initial state is working, but state is still being shared across useState functions.

We can use an index that is incremented on each call to useState to keep track of each instance's location in a states array. 

Track useState Hooks with a Hooks Index

All useState Hooks Are Overwriting the Same State

Refresh yourself and get ready for the next section!

Multiple Hooks

In this section, you'll be creating your own useEffect hooks!

Introduction to useEffect

We have a useEffect in place that we are importing from react. But, we want to get rid of that and create our own!

Time to lay down your first iteration of useEffect without the dependency array. 

Build React Hooks

Build React Hooks

Transcript

Requirements for the Dependency Array

Transcript