React Hooks

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.