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

[00:00] So the first thing we're going to do is delete useState and now we're going to get some TypeScript errors and all that stuff because we need to have a useState. So let's make a function useState. That's going to take our initial state and what we're going to do is make this a generic function. And so this is going

[00:16] to be our state type and that initial state is going to be our state type. And then we are going to have our state which we'll just set to the initial state and our setState will be simply a function. Yeah, we'll actually deal with this later. So our coding assistant is being a little too helpful

[00:35] right now. We'll get to that in the next step. Then we'll return the state and set state. And what's interesting is that this is returning an array of either state or a function that returns void. We actually don't want it to do that. We

[00:52] want it to return exactly an array where the first item is one thing and the second item is another. So we'll say asConst and that way the count is always going to be the number and setCount is always going to be void. If we don't do that then it says hey count could be a number or the function that

[01:09] returns void and setCount can be one of those two things as well. So we're going to add asConst there. Now we're getting a TypeScript error here but I don't need to worry about that right now. If I refresh the page every time I'm going to get that zero, if I click on it nothing happens because we're literally just

[01:25] calling this function that doesn't do anything. So that's for a future step. But at this point now we have a useState function that has a similar API to the built-in useState function. It accepts our initial state. It derives that

[01:40] state type from whatever is passed in. And so this state is going to be a number. That's what we end up returning because we pass that number to start out. And so the types are all nice and we initialize our state correctly to be whatever the initial state value is that is passed in. So there's the start to our

[01:58] useState hook.

Render an Initial State

[00:00] So our example is a simple counter and every time you click on it, it's incrementing But right now it's using the use state from react and we need to remove that and start implementing our own We're going to do this in a step-by-step manner

[00:13] And so this first step your only desire is to make it so that when you refresh the page it starts at zero Clicking on it should not work yet That is for a future step to resolve So your objective in this step of the exercise series is to make it so that it renders a zero

[00:33] When calling use state, but it's not going to be calling the built-in use state. Okay, let's get started

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 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. 

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

Render an Initial State

Transcript