What's really great is inconvenient is that half the room already knows hooks and use this react so I don't have to introduce it very much.

My name is Shawn.

I go buy sweets on Twitter.

Um, I work at nullifies the developer experience engineer.

I moonlight as a moderator on the reacts Subreddit.

There's 100 20,000 of us talking about react and getting jobs and getting started in react.

If you wantto join and hire people, uh, please join us.

And my other big thing is that I learned in public so anything that I learned, I tried to do talks and block posts and share stuff, and this is one of those.

So I'm gonna start.

Just talk about talking about red name or greet.

He's one of these painters.

You might recognize the painting in the background.

That's one of his more famous ones.

That's the man in a bowler hat, and he does several variations of this.

This one's probably you've seen this a swell and they're all surrealist like they look.

They look really good year skills, but he just paint something that's not exactly riel and it's meant to make you a slightly disturbed, slightly like out of out of kilter.

Um, this one's also I really like this because it's like, just like a floating rock.

That's probably the inspiration for Pandora.

And, ah, this one I also like.

It's just kind of like there's, like, human intimacy, but they're not really seeing each other.

You can't see them.

Um, he has a thing against painting faces this one's about, I think, in the impermanence of life like things remain and the man just goes away.

Anyway, the most famous one eyes Probably this one.

Um, I'm not good at French, so but it just says This is not a pipe.

It's a picture of a pipe is not a pipe.

It's an interesting, useful model for people to discuss.

It's meant to make you slightly off kilter, but well, I think I think it's actually useful, right?

Like you can complain to this and everyone knows what you're talking about.

It's a pipe, Um, and this is the frame that I wantto set this talk with.

Like, this is not a pipe, but it is a useful discussion off a pipe.

Um, how does that have to do?

And I'm updated it for the millennials s O.

This is a little bit more updated in terms of I mean that mean was like, Ah, 100 years old.

This is a bit more reason.

And this is the more recent one.

Is this the place?

I always I'm very good with me.

And, um so So how does one have to do it reactivates?

I'm gonna assume that I've ever seen the talks and see the sea, the video and see the docks.

Obviously, go check it out if you have it.

And mainly hooks were immense.

Have replaced on the problems with classes, in particular by Link that this That's not the only issue.

And that's not the primary issue.

But that is one of the issues.

But but way happen never has changed the problem with that, with closures that there you sort of run into stale closures all the time and having toe refresh your memory on what closures are.

So I was I was running to that as well as always adopting hooks.

Um and so I looked for a start.

Loafer definitions.

Obviously you turned the m d.

n a closure is a combination of a function in Mexico.

Environment with the function was declared very clear.

Right on blah, blah, blah.

Like I look at all these, uh, comments.

And honestly, the most clear one was actually w three schools.

It's that closure makes it possible for function toe have private variables.

That's the only time I've ever found w three schools useful.

Um, but thank you anyway.

So So then I had this exercise of, like, why not?

Right?

Hooks and scratch and practice closures as well?

Because if you can have private variables, I kind of state full functions.

So this is the part where we start life coating and we have time.

Okay.

So, um, what I mean by state full functions, Let's just have a variable in the global scope.

I hope this is big enough for everyone very born in global scope.

And I'm gonna come.

I only have a function called ad.

Um, if I can spell under intense scrutiny and pleasure and pressure um, food plus one, it's gonna return fu.

And now every time I call it, it's gonna increment by one.

Right?

It's a state full function in the sense that as every time I call it, there's some internal state going on that's, Ah, that's that's being mutated and you can see the result of that.

The problem with this is is that the full variable is on the global scope.

So any intermediate script can just mess of it all right.

Like I could just say like, full 99.

And that screws up my my expectations of what's supposed to happen If I make it, I'm writing a library.

That's not a good um, that's not very secure.

So I need to contain on each of protectors variable somehow and move it off the global scope.

And how do I do that?

I move that inside the scope of the of the function right?

And so now jobless have just refuses to run.

It just doesn't let you modify food.

That's great, but I give up the state for ms I gave.

I just call it every single time, and it just has the same has the same value.

So how do we How do we fix this?

I can't exactly fix this with his FBI, but I can do is returning function inside of the function.

Um, and duty.

Exactly.

The thing inside there.

I'm just switch this to get ad, uh, function.

Higher order function, I guess, um, and I'm gonna call, get added there.

And now it's still works again.

I have a state.

I have my state full function back, and I cannot touch food inside internally.

Right?

So those are the requirements that we want.

We want state for functions, and we want them to be protected.

We want that state to be protected the last week.

JavaScript refresher.

So this is a closer right?

I ad the ad function.

Is this anonymous mentioned in here?

And it closes over this fool variable that's inside out to get at a function.

No one else can access it, but and I can access that every time is executed.

That's closure.

So the last thing I'm going to remind you and then we'll actually start to clone react is that if I don't want this ugly get ad thing, it's kind of ugly.

I can just delete this replace, get ad with a parenthesis, and I'll just paste it in there, and it does exactly the same thing.

So this is the module pattern is also called the fee The immediately invoking function expression a lot of your scene if you look at bundler output.

All right, school react.

So first thing, when a clone is the U.

S state variable you state hook, it takes an initial value, and, uh, in its vow, I'm gonna call it.

And what is their return that returns a state?

And it said state, I want to refer a lot by the way, to the docks.

Like if people are new people, New tow hooks.

Definitely Check out the docks first before watching this talk.

Um, So how do you How do you define state and set state?

How do you implement that?

We're just gonna have some internal variable that's just called the internal value.

And we're just going to initialize it to win.

It fell.

Um, we're gonna have state, and it's just a sign it to Val.

For now.

This is wrong, but just get something showing on the screen and they will modify from there.

SETC takes a new value on DDE.

Uh, it sets that new value to the internal, Val.

Okay, good.

So now we have hooks in node Let's use it.

Count.

Set counts.

Ah, so this is de structuring a raid e structuring in on all that.

So again, these are all standard JavaScript patterns that, uh, pretty handy when doing this.

And then now we're gonna consulate out log count.

We're gonna set counts to two, and then we're gonna consulate count again.

So what I expect is to log out one and two.

Unfortunately, I log about one and one over here, and that means that I'm not really It's not really working.

Unfortunately, it actually is.

That second is working.

It's modifying internal value.

But the problem is, when I d structure this counts is assigned the value of one, and it is one here, and it is one here.

That's why we're logging out one.

So we need some place to just re pull the internal state again.

Um, one easy.

It's very cheap.

Way to do it is to turn this state into a getter function.

And now I can just call, get I just called the function and now in my state, full function back again.

So one into and, um, this is kind of hooks and note if you need hooks.

And no, that's that's all the implementation.

It's eight lines.

Um, but we want to do more than that.

The in reacts, you don't call it, get her function.

You just used the variable.

And it's live every time.

And it's just fresh.

And it's the correct value.

You don't You don't call it a weird get her function.

So we want a model that but involves a pretty large reef actor.

I'm gonna walk you through it.

You already know everything they need to know.

So I'm gonna zoom in a little bit.

All right?

So the first thing we want to do is put our hook inside of a reactor module, undercut this.

I'm gonna introduce a reactive audio.

It's gonna be a function that I immediately invoke, right?

I'm gonna pace my hook in there, and I'm gonna return the object.

Um, that has a use state property.

So now the only thing I've changed is in my usage.

I can call, react out you state, and it does exactly the same thing.

Everyone with me.

Right.

Okay, so So I've done.

I put a creative reactor module.

I have sort of wrapped up my functionality I can do that to my hookahs.

Well, what wraps around the hook?

A component, Right, So I can declare a component.

Um, and and that's is just a regular function And put the hook in there.

Um, normally have your rendering to the dom, but in this case, I don't have a dime.

I just have the console.

So I'm just gonna return an object and simulate that we'll get to the other stuff in a second.

So render, um, I'm gonna have consul dot log counts and then click.

This is just for stimulating.

I don't have a button.

So we're just gonna roll with this is the best you got.

Um, uh, and I'm just gonna put in a new object.

Forget the object.

Okay, So?

So the last thing that we need to do is we need to teach.

We have react, and we have the component we need.

We need We need to teach, react how to render the component.

So that's right.

The render function.

It takes a component.

Um, and a component is just a function.

Right.

So let's just call it, um and then the When you call it, you get an object that has a render in a click, right?

So this is called the Render right.

It's actually just put long something on the screen, and then we'll just return it so that we can do other stuff with the component on gonna expose that inside of my reactor module over here.

So we're at 16 lines, not too bad.

And now I can replace all this logging stuff and do something like react that render components.

We should see something show up on the screen up.

That's not exactly what I want, but whatever, um, and I can because there's a there's a return value over here.

I can take this and I can start accessing stuff on the object, right?

Like like the click function that wrote.

So I can just say Click on and I can re render it again.

Um, react.

A clique is not a function.

It zapped.

Okay, it's a little bit like t d d get instant feedback in this rebel thing.

It's really nice.

Um, okay, So the only thing that's wrong with this now is I'm logging the state, get her right.

That's the That's the thing that we did just now.

It was like a hacky thing.

Let's just get rid of that.

Let's lift the value up to the internal value up to the scope of react.

Um, and we're going to get rid of the getter function.

We don't need it anymore.

And we're just gonna let that get her function in clothes over the internal value that the you state cook close over the internal value.

So now it just returns every single time.

Um, it it renders.

So So this is the, um Okay, So this is, uh, love a new value value.

Okay, um, I'm running into something that I didn't expect over here, So I'm gonna try toe debunk a little bit, I think.

Um, okay.

Sitcom.

Yeah, I think I think I said count.

Oh, uh, yeah, I need a plus one.

Of course, if I'm sending comes to the original accounts, it's not gonna increments, so Yeah.

Okay.

Um, so I practiced this a lot.

So it's very unusual for me, this girl like that so you can see we have our staple functions back.

Right?

But we've gone through a whole bunch of ceremony, but now we have a reactor module we have a component, right?

It kind of looks like a component.

Andi, we can We can do things to the component and updates and state.

So that's really good.

Until you try to have multiple states, multiple hooks.

So let's just have a textbook.

It's gonna look slightly different so that you can differentiate between the number and the text.

I'm gonna call it Apple.

Just because that's the first thing I think about, um I'm gonna log it out as well.