Refs

[00:00] Well, because this is not a Vanilla Tilt workshop, we're giving you a lot of stuff. So this is coming from MartyTheMoneyBag, giving you all this information. We are not going to be just importing the type, we actually need the value, so I'll fix that. So we're getting Vanilla Tilt, we're making an HTML Vanilla Tilt element,

[00:18] which extends the regular HTML div element, because the element ref, the DOM ref that we're creating is going to have this property on it so that we can use it for cleanup. So then we have our Vanilla Tilt options, and with all of that set up, now we can grab the

[00:35] DOM node for this div and turn it into a Vanilla Tilt element. So we're going to say ref equals this Tilt node, and it is an HTML Vanilla Tilt element, or it could be null. In certain versions of React, in the current version of React, they will call your function with null when the component's being unmounted.

[00:57] That is not going to be the case in future versions of React, and we don't need to worry about it here because we have the cleanup function. But this is something that we need to handle as far as our types are concerned, and making sure that this is backward compatible with old versions of React. And so we're going to add if not Tilt node, then return.

[01:16] If there is a Tilt node, though, then we can use Vanilla Tilt to initialize on this Tilt node with these Vanilla Tilt options. And then finally, we need to handle cleanup. So if I save this right now, and then I get my cool Vanilla Tilt interaction going on,

[01:32] because now we've got our Tilt node initialized and everything, I can still increment this. But if I toggle visibility, then those event listeners that Vanilla Tilt created are still going to be around. We're going to have a memory leak, and if you want to,

[01:47] feel free to pull up your memory dev tools and all that stuff, and you can observe that yourself. But I don't want to deal with that, so we're going to return a cleanup function that calls Vanilla Tilt destroy on that Tilt node. So this is why we have our own instance here,

[02:05] or our own interface, so that we can interact with Vanilla Tilt just like this. So if we save that now, we will correctly be cleaning up. We can add some console logs if we want to. So console.log Tilt node, and in our cleanup,

[02:22] let's just add a console.log cleanup up right there. And save that, pull up our dev tools. We've got our Tilt node right there. Looks awesome. And then toggle visibility, cleanup, and then there we go. And every time we click this, every time we render,

[02:42] we're going to be reinitializing Vanilla Tilt. So we return the cleanup, Vanilla Tilt gets destroyed, and then we reinitialize it again, which is something we're going to be looking at later on in the exercises. But there you go. That is using refs. Here, let's get rid of some of these

[02:59] logs. We pass a ref prop to the div that we're interested in. We get a reference to that DOM node. In our case, we want a special type of element. But typically, you do HTML DOM element

[03:13] or a div element, or in fact, the type should be inferred for us automatically anyway. So if we don't specify anything, it's going to be an HTML development or null. Of course, if we change this to a span, then that is going to now be an HTML span element. So that's kind of cool. Thank you,

[03:29] TypeScript. But in any case, or in our case, we want to have a specific type of element. So we're going to type that specially. We're going to handle the null case for backward compatibility reasons. And then we'll initialize our Tilt node. So this is where we're making a mess of the DOM

[03:46] after React is done doing its thing. And this is where we clean up our mess that we made between renders and when this thing gets removed, which we can do right here. Boom. Toggle visibility, clean up. Ta-da. So, awesome work.

[00:00] All right, so we want to make this a really cool Vanilla Tilt implementation right here. We have this toggle visibility so that you can check your cleanup, and then this is also interactive. So you click on this, it's a counter. How cool is that? We're going to be using Vanilla

[00:17] Tilt for this. You can take a look at the documentation if you like, but this is not a Vanilla Tilt workshop, so we're going to have a lot of the code for you already, and your job is just the ref portion of this. When you're all done, it should look something like this, and you should

[00:32] be able to increment this, and it'll look amazing. So give this a whirl, have a good time with refs!

In this workshop, we'll learn how to use hooks to manage state, synchronize side-effects, generate unique ids, and more. 

**You'll get a solid understanding of the basic hooks and how to use them.**

We'll be covering these hooks: 

- useState
- useEffect
- useRef
- and useId

At the end of the workshop you'll put everything you learned together and build a Tic Tac Toe game with game history saved in local storage!

## Managing UI State

React's App Lifecycle: Initial Render → Create the DOM → User Interacts → State Changes → Re-render → Update the DOM → Repeat.

Here, you'll be learning how to use the `useState` hook and about the cycle of user interaction, state changes, and re-rendering. The core of how React works!

## Side-Effects

In this section, you'll learn about the `useEffect` hook.

`useState` is for component state, and `useEffect` is for managing side-effects (things that happen outside our react components).

Things outside our react components include:

- Browser APIs like local storage, geolocation, media devices, etc.
- Integrations with third-party libraries like D3, Chart.js, etc.


## Lifting State

A common question from React beginners is how to share state between two sibling components. 

The answer is to "lift the state!" 

But, sometimes you'll find yourself in the opposite situation, where you have state that's lifted too high and doesn't need to be shared. So, in this section, you'll also be learning how to "colocate state."

## DOM Side-Effects

Sometimes, you need to update the DOM directly, like if you're needing a library that interacts with the DOM or ar dealing with focus management. 

To do this you'll learn about how to use both the `ref` callback and the `useRef` hook. 

## Unique IDs

Form input elements need to have globally unique `id` attributes. But, you're also building reusable components in React. 

How do you make sure that you're getting unique IDs?

In this section, you'll solve this problem with the `useId` hook.

## Tic Tac Toe

Here's where it all comes together!

You'll practice all the skills you learned over the course of this workshop by building a Tic Tac Toe game with game history that gets perserved in local storage. 

It's tougher than the other exercises. But, after you get through it, you'll have really solidified everything you learned.

Learn React hooks to add interactivity to your apps and build dynamic websites. You'll learn the core React hooks including useState, useEffect, and useRef.

React Hooks

React Hooks

Transcript

Refs

Transcript