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

[00:00] So we need to preserve this state so that it can actually increment. We're going to make it work finally. So let's add a let for state, state, and set state. We'll set their types to any. Because this isn't a TypeScript workshop and making this really nice and type safe would be a little bit of a challenge.

[00:18] I don't want to distract ourselves with that. So we're going to do that. And then we're going to remove the declaration for both of these so that they're referencing the state variables that were declared above. And with that they're just being assignments. Now the trick is though that we can't just have that

[00:37] assignment every time because every time you state is called we're going to reassign state to the initial state and set state. So we only want this assignment to happen when we are initially calling you state. So we can say if the state is undefined, so it hasn't been set yet, then we can set it.

[00:55] Okay, and then finally to make things a little bit nicer as far as the types are concerned that we can stick this right here so that we're not returning any from you state and our count can still be a number. So that's not all that hard. So we're going to do that. Okay, great. And now we are incrementing every time. So it is actually working.

[01:15] We have implemented our own you state and the way that we do that and ensure that the state remains in force is we declare that state outside of the module or the function itself. So that variable can be mutated over time and referenced again. So

[01:35] when you state is called initially we get that initial state. We assign the state to that initial state because it's undefined and then we say set state equals this function that will reassign it to the new state that it's given and call render to trigger a re-render. And so whenever the button is clicked we call that set state function which will assign the state re-render.

[01:57] That will call our app root dot render the counter. React will call this again and say okay here's you state. We go through you state and now it has been defined and so we just return whatever the current value is which will be the latest state. So there you go.

[02:12] You have a functioning you state for a single component. There's more to do yet, but it is working. Good job.

State Is Reset to initialState on Each Render

[00:00] So now, we're finally going to make this work. So what we need to do, or what the problem is, is that even though we are triggering a re-render of the counter every time, each time it's calling useState with this initial value, and so that initial state gets passed in here,

[00:17] and we're resetting this state to that initial state. It's actually not entirely accurate to say that we're resetting this because we're actually just creating a new state variable. The first time we run it, we get our state variable, we get our setState variable, we pass those back to our counter, and then it re-renders,

[00:37] we're calling useState again, and now we're actually creating a new state variable and setState variable. So we're not actually preserving that state between renders, we're creating brand new instances of this. So we need to have just one instance for this component and reference that every time. So we don't want to reset to

[00:56] the initial state every single time it's called, we just want to initialize it. So once it's been initialized, then we should be able to reference the previously initialized value. So that's what we're doing in this step, and this should make things actually work. Get to 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

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. 

Implementing Your Own useEffect

Replace React's useEffect With Your Own

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

State Is Reset to initialState on Each Render

Transcript