Learn React Hooks

4.9
75 reviews

last updated 20 months ago

Start learning React Hooks
react

This course is up to date, guaranteed

  • react
  • react
  • react

The Numbers

  • 14 Topics
  • 230 Minutes of Video
  • 23,585 Words of Text
  • 10 Quizzes
  • 13 Exercises
  • 2 Projects

The Outline

  • Course Overview

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

    We'll start the course off with some housekeeping items. You'll learn about the best strategy for getting the most out of the course as well as the projects you'll be building.

  • 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

    In this section you'll learn how to add side effects to React function components using React's useEffect Hook. Along the way, you'll learn some common useEffect pitfalls to be aware of.

  • New Render, Same Value

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

    In this section you'll learn about the useRef Hook which allows you to persist a value across renders without triggering a re-render.

  • Project

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

    In this section you'll apply everything you've learned throughout the course by refactoring an existing app which uses React class components to use React Hooks.

  • But why?

    • Why React Hooks?
    • (Quiz) Why Hooks?

    When React Hooks were released, React was the most popular and most loved front-end framework in the JavaScript ecosystem. In this section, you'll learn why, despite existing praise, the React team dedicated so many resources to creating and releasing Hooks. Along the way, you'll also get a soft introduction to the main aspects of the Hooks API.

  • 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

    In this section you'll learn why and how to create custom React Hooks. You'll also learn why custom Hooks can replace other patterns such as Higher-order components and Render Props.

  • Bypassing Props

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

    In this section you'll learn how to pass data deep into your component tree by utilizing the useContext Hook.

  • Next Steps

    • Next Steps
    • Curriculum

    Although you've gone through the course, you're not quite done yet. In this section you'll learn about the curriculum project you'll build in order to cement what you've learned throughout the course.

  • Managing State with Hooks

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

    In this section you'll learn how to use React's useState Hook to add and manage state in a function component.

  • Managing (Complex) State

    • The useReducer Hook
    • (Quiz) useReducer
    • (Practice) Refactor useFetch
    • (Solution) Refactor useFetch

    Sometimes you need to manage a complex piece of state. In this section you'll learn about the useReducer Hook, how to use it, and when to use it instead of useState.

  • Performance

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

    Although not always necessary, sometimes your app needs a performance boost. In this section you'll learn about three features of React to do that, React.memo, useCallback, and useMemo.

  • The Love

    This is the part where we're supposed to tell you how great the course is. Even better if we get other "famous" developers to give their "reviews". Instead, we'll let those who have actually taken the course do that.

    4.9

    75 Reviews

    95%
    5%
    0%
    0%
    0%
    • Avatar for João Carvalho
      João Carvalho
      15 days ago

      Good course, although I struggled a lot with the practice exercises. Just ended up skipping most.

    • MA
      Muhsen Al-Bashaireh
      15 days ago

      One of the best hands-on React Hooks courses! Thank God that Tyler Mcginnis exists in the React world 🙏

    • LC
      Luke Chen Shui
      16 days ago

      This was a really informative and practical course

    • Avatar for rupal
      rupal
      19 days ago

      best course for react hooks

    • Avatar for Aamir Saleem
      Aamir Saleem
      2 months ago

      Now I can confidently say that I understand how hooks work. Thanks to you. Keep up the good work <3

    • Avatar for Serghei Topal
      Serghei Topal
      2 months ago

      One of the best courses on React Hooks, IMO. It covers all you need to know AND is very easy to follow.

    • C
      Cameron
      2 months ago

      A great course for anyone with existing experience with REACT, and still quite good even for newcomers. Improving upon earlier courses such as Modern Javascript and the base REACT course on dev.ui, this course did a great job of incorporating even more learning-by-doing to solidify the concepts in the student's understanding. Tyler does a great job of explaining concepts in a logical manner, ordering lessons to build upon earlier lessons, and keeping the student engaged.

    • Avatar for Sergey Lukin
      Sergey Lukin
      4 months ago

      Great walkthrough on react hooks, especially the part where React.memo / useCallback / useMemo are covered - non trivial subject explained in pure English!

    • RL
      Ryan Lin
      6 months ago

      Perfect course

    • A
      Andrii
      7 months ago

      Amazing course, that gives your deeper understanding of api you use every day. If you want to be best at React, you're in the right place

    Join Us

    Join thousands of ambitious developers who use our courses and events catalog to scale their JavaScript careers.

    Full access to

    Resources

    • Event Catalog

    Courses

    • TypeScript
    • reactReact
    • reactReact Hooks
    • React with TypeScript
    • reduxRedux
    • react-routerReact Router
    • javascriptAdvanced JavaScript
    • javascriptModern JavaScript
    Yearly Subscription
    $350
    (or pay monthly for $40)
    Join ui.dev