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. 

Implementing Your Own useEffect

[00:00] Let's start out by deleting the built-in useEffect. Let's also bring in flushSync, which we'll need here in a bit. Let's make our bucket of effects. So effects is an array of objects that have a callback property. And with that now, we can store those.

[00:16] So every time useEffect is called, we're going to store this callback in that bucket of effects. So let's make our useEffect. This will take a callback, which is an effect callback. And then we get our ID from the hook index. And no, we're not going to push it on the effects array.

[00:33] Instead, we want to put it into effects at that ID, so that we always make sure we're keeping those effects up to date, so as the callback changes or whatever. Okay, great. So then the last thing we're going to need to do is come down here to our render.

[00:51] Whoops, we don't need to make a function. We're going to wrap it in a flushSync function. And what this will do is it will say, hey, React, I know that you like to do your batching, and you like to make things as optimal as possible, whatever. I need you to just run this synchronously. This is as good as we can do not being React.

[01:10] And so we're going to say, React, run everything synchronously. And that way, our effect callbacks get added to the effects. And actually, I'll just demonstrate really quick what happens if we don't do that. So if I console.log the effects at this point, after the flushSync,

[01:26] then you'll notice we have our effect at index 2. And so that is awesome. But without the flushSync, then we have an empty array in this case. And that's because React is doing things as optimally as possible to not block the main thread of the browser.

[01:44] So we are kind of de-opting out of that a little bit for our purposes so that we can iterate over these effects and call them all and all that stuff. So we'll do a forof loop to get an effect of the effects. If there is no effect, then we'll simply continue.

[02:03] That way we don't, you'll notice we do have some empty items and stuff like that. We can have some problems. So we're just going to only call the effect callback if that effect exists. And now consider yourself effective. We are totally doing that. Awesome. Let's get rid of that log there as well.

[02:21] And boom, every time we get a render, we're going to get that called. So there you go. We have effects done by creating this bucket of effects. We have our useEffect right here where we get the ID from the hook index. And we set that ID in the effects to be this object with the callback.

[02:40] And then we flush the render so that it happens synchronously and iterate over the effects to call them if they exist. There you go.

Replace React's useEffect With Your Own

[00:00] Kelly, the co-worker, has done us a nice thing and added a use effect in our code base. Right now, it's using the built-in React hook, and so it is working, working just as you would expect. Consider yourself effective. But we want to delete that and implement it from scratch ourselves. You're going to need to have a hook ID

[00:19] to store these different effects, and then you're going to need to flush the rendering synchronously using the flush sync API. Then just iterate over all the use effects with the callback. So again, we're going to have another bucket that stores all of our effect callbacks. So, I think you can do this. 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

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.

Build React Hooks

Build React Hooks

Transcript

Replace React's useEffect With Your Own

Transcript