Learn React Hooks

5
71 reviews

last updated 18 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

    71 Reviews

    96%
    4%
    0%
    0%
    0%
    • Avatar for Aamir Saleem
      Aamir Saleem
      15 days 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
      22 days 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
      39 days 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
      3 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
      5 months ago

      Perfect course

    • A
      Andrii
      5 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

    • Avatar for Brandon
      Brandon
      5 months ago

      This was a great course. Top, bottom, left, right, this course covered everything you need to know. The popular repos app helped me to land my first React job this week.

    • JA
      Juan Ameijenda
      8 months 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
      11 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
      12 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

    Join Us

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

    Full access to

    Resources

    • Personalized Onboarding
    • Private Community
    • Weekly Events

    Courses

    • TypeScript
    • reactReact
    • reactReact Hooks
    • React with TypeScript
    • reduxRedux
    • react-routerReact Router
    • javascriptAdvanced JavaScript
    • javascriptModern JavaScript
    Yearly Subscription
    $350
    (or pay monthly for $40)
    Start your free trial