Learn React Hooks

5
★★★★★
64 reviews

last updated 11 months ago

Start for Free
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.

    5
    ★★★★★

    64 Reviews

    95%
    5%
    0%
    0%
    0%
    • JA
      Juan Ameijenda
      ★★★★★
      20 days ago

      This course is just excellent. As always, Tyler delivers on his First Principles approach to learning, taking time to explain not only the "hows" but more importantly the "whys" regarding, in this case, the Hooks way of doing things. I 100% reccomend this course to anyone who wants to learn React Hooks.

    • H
      Hani
      ★★★★★
      4 months ago

      The way Tyler explains concepts is different from any other available source. Explaining previous approaches to things and showing drawbacks with them then explaining the new approach to demonstrate why we needed this - hooks for example - gives much deeper understanding than just showing how to do it. After many courses and for the first time i feel confident using hooks in a real project.

    • J
      Jan
      ★★★★★
      4 months ago

      Amazing course thus far! I enjoyed the way you taught in the Udacity nanodegree course so I immediately enrolled afterwards. I wish all of the external links in this project would open in a new tab, would be a lot better when referencing them and going back to the videos

    • Avatar for Code Against
      Code Against
      ★★★★★
      5 months ago

      Awesome takeaways from this course, quality content as usual

    • DB
      Dan Blake
      ★★★★★
      5 months ago

      I am so glad I took this course because hooks are awesome. So many of the things that frustrated me with React are easier with hooks. As usual, Tyler provided a good overview of the subject in videos, while providing transcripts making it easy to take a second look. The small projects throughout the course really helped me comprehend the subject well.

    • Avatar for Ryan Lynch
      Ryan Lynch
      ★★★★★
      6 months ago

      I completed a software bootcamp in 2020, and spent a few months building a stock application with classes, no hooks. I started a job in Silicon Valley in December, the code base only used hooks, no classes. I would have been fired if it was not for this course. My working knowledge of React and Redux has improved tremendously, and I really enjoy the manner in which you represent the material. I recomend this course to anybody looking to sharpen their skills. Thank you so much!!!!

    • K
      Kevin
      ★★★★★
      6 months ago

      I think this was the best of Tyler's courses. Very good.

    • Avatar for Roland
      Roland
      ★★★★★
      7 months ago

      Now I know the *Why* and the *How* of React Hooks. Most of all, I've gain much more confidence using them. Thank you for the amazing work!

    • Avatar for Platon Koby
      Platon Koby
      ★★★★★
      7 months ago

      This course was incredible! I have just finished the original react course, and I've found some things that I didn't fully enjoy. However this course is just amazing. You have done a very good job in explaining the hooks, it was very easy to understand more complicated useMemo and useCallback. My favourites by far are the useEffect and useReducer, in the way you explained them, previously I was scared of useReducer, or didn't understand when useEffect ran. The bonus about execution context was also great. Thank you!

    • A
      Abdisamad
      ★★★★★
      7 months ago

      This course is a must-have if you're planning to learn React Hooks or converting your class-based components to functional components and of course using React Hooks. Thank you, Tyler :)

    Join Us

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