useId

[00:00] So here we've got our field and it's being used down here to make some of these inputs a lot easier But we're not associating the label with the input and we can't just say here's my id field And say id or html4 Id and then Id is id

[00:22] Like that doesn't work because I click on this and what it is focusing that what's going on here. This is the worst I don't like this. Yeah, you don't want to have ids that don't uh, That aren't unique. That's not a good thing. In fact, we are even getting a warning about that. So We're going to use use id from react

[00:40] And now those are going to be unique for each one. We're not getting warnings and it's looking awesome You can take a look at the id that's generated. It's kind of a interesting looking id and interestingly on this you actually can control the Ids that are generated just a bit with the id

[01:01] Our identifier prefix so we could yeah sure tilt root our entire application is about the tilt But see now you get this tilt root r zero And so you can if you had like multiple react apps on the same page that does happen Sometimes it's a wild west out there there, but uh, but yeah, you could have them be separate from each other

[01:21] You would want to make sure if you're server rendering that you have this identifier prefix be the same On both sides of where you're generating the html and then re-rendering on the client But yeah, that is something that you can do not something. I typically find myself needing to do but a good thing to understand um, nonetheless, so there you go, we have

[01:42] Properly associated things and encapsulated the id inside of this field So you don't have to worry about it. Don't have to worry about coming up with a name for stuff Another thing that you might consider is moving this over to this side So that if somebody provides their own id we overwrite it because we're establishing it here even better though would be to

[02:05] Pluck off the id off of those input props and then we can reassign the id to be the id that's given or use id This would work and it works fine Eslint and typescript but eslint is complaining that use id is used conditionally And that is true and it could cause problems for us

[02:27] And so what we're going to do instead is we'll have a generated Id that is use id and then we'll have our id assigned to Itself or it will fall back to the generated id. So that way we're not calling use id conditionally. It's always called um, but

[02:43] We can fall back to the generated id if the id doesn't um already exist. Uh, so with that then Uh, we still have these generating but we could uh, take a look at this one come down here And we could specify our own id right here. We could say id equals max

[03:03] Save that and boom now we get our id is max. So You have some options uh with this But that yeah, that's pretty much it the use id hook you call use id you can set the identifier prefix if you want to Um, I actually this pattern is fairly common in uh, the stuff that I do

[03:22] I typically allow people to provide their own id if they want to If they don't then I will generate one for them. Uh, and it's all kind of encapsulated in this field component. So There you go. That is unique ids in react apps

[00:00] All right, so Kelly, the coworker, was refactoring things and decided she didn't want to have to worry about IDs for everything. So we've got now a really cool component that can handle all of our fields and everything in here. But there's no IDs associating the labels to the inputs. And so if you click on these labels,

[00:18] with the exception of this one, because it's special. But if you click on these labels, they're not focusing on the input like they should. And so we know that they're not associating the label with that input. If we inspect this input, take a look at the accessibility tab here, you'll see that there's no label for this particular input.

[00:37] That's not good for accessibility. It's not good for user experience at all. So your job is to associate those properly, but to do so using use ID. So have a good time.

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

useId

Transcript