React Hooks

5.0
14 Reviews
  • Updated 59 days ago

This course is guaranteed to be up to date.

The marketing pitch for Hooks is that they allow you to add state and other React features to function components. In reality, they're much more than that. In this course you'll start by learning the mental model behind Hooks. Once you've got that you'll learn each Hook individually followed by a practical, real-world problem set to work through. To finish it off, because we all can't start with brand new apps, you'll learn to take an existing React app and refactor it to use Hooks.

Pre-Requisites

Professional experience with React or our 'React' course.
Sign Up

What you'll learn

  • Why React Hooks?

    React was the most popular and most loved front-end framework when Hooks were released. Despite this, the React team still saw it necessary to spend valuable resources building Hooks. By looking at React from a historical context, you'll learn why and for what benefits Hooks were released.

  • Thinking in Hooks

    Hooks come with a different mental model than class based components. It's not enough to just memorize the various Hook APIs, you need to learn to think in Hooks.

  • useState

    The useState Hook allows you to add state to function components. You'll learn its API as well as how to use it in a variety of scenarios you'd see building a real-world application.

  • Closures

    Closures? Isn't that a JavaScript thing? It sure is and Hooks rely heavily on them. You'll learn all about JavaScript's execution context and when closures are created which will make learning Hooks much easier.

  • useEffect

    The useEffect Hooks lets you add side effects to your function components. You'll learn not only what a 'side effect' is but also a variety of (sometimes tricky) real-world use cases for handling them.

  • Rules of Hooks

    Hooks come with some rules you need to follow. You'll learn these rules as well as some best practices when building them.

  • Custom Hooks

    Historically, in order to share non-visual logic, you had to rely on confusing patterns like Higher-order components or Render-props. You'll learn how you can accomplish the same thing (but much easier) by building your own custom Hooks.

  • useReducer

    Reduce is a functional programming pattern that takes a collection as input and returns a single value as output. You'll learn how you can use this pattern for creating better, more predictable UIs using the useReducer Hook.

  • useRef

    Sometimes you need a value that will persist across renders but won't trigger a re-render. You'll learn how to create that using the useState Hook then you'll learn a less hacky way with the useRef Hook.

  • useContext

    Context lets you pass data to any part of your component tree without passing it down through individual components. You'll learn about the useContext Hook which is a more composable way to grab values off of context.

  • React.memo

    React.memo is a Higher-order component that lets you skip re-rendering a component if its props haven't changed. You'll learn when (and when NOT) to use it.

  • useCallback

    useCallback gives you referential equality between renders for functions. What does that mean? You'll find out.

  • useMemo

    useMemo gives you referential equality between renders for values. What does that mean? You'll find out.

  • Refactor existing React apps

    Sadly, most of us aren't starting with a brand new React codebase. You'll learn how to take an existing React app built before Hooks and refactor it to use Hooks.

Who is this course for?

  • Developers who have professional experience with React.
  • Developers who have taken our "React" course.
  • Developers who want a linear, hands on approach to learning React Hooks.
Sign Up

Course Outline

  • Course Overview

    Introduction, Philosophy, and Tips
    Projects (What you'll build)
  • But why?

    Why React Hooks?
    (Quiz) Why Hooks?
  • Managing State with Hooks

    The useState Hook
    (Quiz) useState
    (Practice) Theme
    (Solution) Theme
    (Practice) Todos
    (Solution) Todos
    (Practice) Show/Hide
    (Solution) Show/Hide
  • Adding Side Effects

    (Bonus) Execution Context, Scopes, and Closures.
    (Quiz) Execution Context, Scopes, and Closures
    The useEffect Hook
    (Quiz) useEffect
    (Practice) Character Limit
    (Solution) Character Limit
    (Practice) Wait Delay
    (Solution) Wait Delay
    (Practice) API Requests
    (Solution) API Requests
  • Custom Hooks

    Rules of Hooks
    (Quiz) Rules of Hooks
    (Bonus) Higher-order Components
    (Bonus) Render Props
    Creating Custom Hooks
    (Quiz) Custom Hooks
    (Practice) useWait
    (Solution) useWait
    (Practice) useWindowDimensions
    (Solution) useWindowDimensions
    (Practice) useFetch
    (Solution) useFetch
  • Managing (Complex) State

    The useReducer Hook
    (Quiz) useReducer
    (Practice) Refactor useFetch
    (Solution) Refactor useFetch
  • New Render, Same Value

    The useRef Hook
    (Quiz) useRef
    (Practice) Complex Form
    (Solution) Complex Form
    (Practice) Click Game
    (Solution) Click Game
  • Bypassing Props

    Guide to React Context
    (Quiz) React Context
    (Practice) LocaleContext
    (Solution) LocaleContext
  • Performance

    React.memo, useCallback, and useMemo
    (Quiz) Performance
  • Project

    Introduction
    index.js
    Battle.js
    Card and Nav
    useHover.js
    Loading.js
    Popular.js
    Results.js
  • Next Steps

    Next Steps
    Curriculum
Sign Up