React Hooks

5
60 reviews

last updated 6 months ago

react

This course is up to date, guaranteed

So you want to learn React Hooks?

Here are some common approaches

Random Blogs

It's not that blog posts are bad, it's that finding and piecing together unrelated yet up to date posts that form a linear, cohesive path to learning complex technical topics is hard.

Conferences

Things conferences are great for - networking, travelling on your company's dime, free swag, finding other companies to join. Things conferences are not great for - learning in depth technical topics that you will remember and put into practice literally 3 days later when you’re back at the office, quality wifi.

Youtube Videos

It's happened to all of us, one moment you're using Youtube to learn about React's useEffect Hook and the next you're watching a "KIDS REACT TO PAYPHONES" video. Finding a high-quality, up-to-date YouTube video that effectively answers all of your questions on a JavaScript topic might actually be more difficult than finding a needle in a haystack. With so many videos and zero quality control, it’s easy to get sucked down the YouTube rabbit hole for hours without getting much learning out of it.

All-In-One Subscriptions

These are the larger companies that offer courses on seemingly every technology under the sun. We won’t name them, but chances are your company has a business subscription to at least one of them and chances are that you don’t use it much. Their courses are made by a wide assortment of third-party contractors and optimized for production quality, not educational value.

Live Workshops

You know what they say, the best learning happens sitting in a classroom for 8 hours at a time listening to dry lectures and working through practice problems that only serve to make you feel comfortable so you’ll feel like you learned something. Oh wait, no. No one says that.

The better approach?

All our courses follow the same proven structure, optimized for knowledge, not the illusion of learning.

Effort

We're obsessed with making the most effective developer education content on the planet. On average, it takes us around 1,900 hours to create a new course. While others prioritize quantity, we optimize for quality.

Non-Contextual Practice

Similar to the non-contextual analysis, context is everything. The first time you're hands-on with a new topic, any extra contextual information you have to process only serves as a distraction. This is why we first have you work through small, focused practice problems before you ever see the new topic in the context of a larger project.

Non-Contextual Analysis

The first time you're introduced to a topic, any extra contextual information you have to process only serves as a distraction. Although it takes more time, our non-contextual analysis comes in two forms, video and text. This way, no matter how you prefer to learn, there's an option for you.

Contextual Practice

You've probably experienced it before, you feel like you're learning so much going through a tutorial only to hit a wall once it's time to actually apply that knowledge outside of the context of the tutorial. All the non-contextual practice in the world is useless if you're not then able to take that knoweldge and apply it towards a (contextual) production level codebase.

Quiz

Nothing fancy here. After learning about the topic you'll receive a quiz to make sure you have a solid conceptual understanding before moving on to the hands-on practice.

The result?

React Hooks Mastery

The ability to take what you learn and apply it towards a production codebase

  • react
  • react
  • react

This Course

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

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.

  • Hype

    ZG
    Zach Gottlieb

    There's no shortage of resources for learning React and Javascript, but this is hands down the best of the various courses / workshops I've done. As an experienced Angular developer looking to pick up React, I found this massively useful and the right level of detail. I especially liked the complementary articles and explanations of the Javascript principles that underlie the different features in React. Great stuff all around, thank you very much Tyler!

    Once again, Tyler McGinnis knocked it out of the park with this React Hooks series. Not only are the lessons concrete and hands-on, they also help you reason about how to build apps of your own. If you take his advice that passive learning is lame, I guarantee you will learn a lot from this course!

    Tyler gives you a chance to learn things from the ground up and the challenges he creates are really clever and just the right difficulty. He never leaves you hanging either, the material is solid. Somethings I like about Tyler is his willingness to be repetitive, how he always explains why he's doing something and what the other options are. You deff feel he worked smart and hard at creating this course and it shows in what you learn in the end. This course is remarkable.

    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!

    Just brilliant. These courses made it easy to understand the concepts he was teaching. He is really good at the materials he's using. On top of that, he's an amazing educator. Very enthusiastic, straight to the point and also has a sense of humor. It's a big plus from me.

    I took the React Hooks course. It was awesome. Tyler offers an all-in-one experience you'll hardly find elsewhere. He goes beyond typical courses and does not only explain the what and how, but also the why and best practices. Absolutely worth it.

    I loved it. Especially after doing the original React Course, this was a great segway into react hooks. It felt more like I was the one personally making changes to everything and learning more on my own. 10/10 would do it again.

    Awesome content over Hooks. Forget those Medium posts and other content, grab a subscription in Tyler's website and learn Hooks and other interesting parts of React

    I work with Vue day in and day out, and as such I haven't had much time to dig in to the React side of things. It took roughly three weeks of working through these courses in my free-time but now I feel completely confident in being able to jump into a React codebase and be productive. The videos are well thought out and the examples routinely were just what I needed for the concepts to click. Honestly, some of the best teaching I've ever seen.

    Super clear and to the point. Really enjoyed this course, and am super excited about React Hooks now. Great job Tyler and team!

    I already knew React hooks, but this course really consolidated my understanding of them. I teach React training workshops myself, and after taking this course, my confidence in talking about hooks is much stronger. I love the cadence of the course, alternating theory and practical exercises. Tyler, you are a great teacher, and it's obvious you have spent a lot of time thinking about how people learn, and "how to teach". 🎉

    Master React Hooks today

    FAQ

    What makes these courses different from other online courses?

    Our courses are designed to teach you everything you need to know to confidently write production-ready code. The tradeoff is it will require more work and focus than a course that features a few bite-sized screencasts. Real learning takes time, but you can feel confident that once you've finished a course, you’ll have mastered everything you need to know with minimal knowledge gaps.

    In which order should I take the courses?

    If you're comfortable with JavaScript (including ES6) and want to jump straight to React, go with "React", "React Hooks", then any other course that looks interesting. If you're not comfortable with JavaScript, start with "Modern JavaScript", then "Advanced JavaScript", then any other course you'd like.

    I need an official invoice with certain fields like VAT. Can I get one?

    Once you sign up, as part of the welcome email, you'll be given a link to fill out where you can input all your company's info.

    Do the courses have captions?

    Yes.

    What level of experience is required for getting the most out of these courses?

    A fundamental understanding of JavaScript or familiarity with another programming language. For example, you should be comfortable with functions, arguments, loops, control flow, etc. If you want to jump straight in to the React courses, we recommend having a stronger knowledge of JavaScript, which you can get from our JavaScript courses if you’re unsure.

    What projects will I build throughout the courses

    You can find every project on the /projects page.

    How long should I expect each course to take?

    Naturally, it depends. Considering all our courses are comprised of video, text, quizzes, practice problems, and curriculum - 15-30 hours per course is a safe assumption.

    How does the subscription work?

    Like Netflix. You pay $40 per month or $350 per year for access to all our courses, premium newsletters, and events. Your subscription will be active until you cancel, which you can do at any time in your dashboard.

    5

    60 Reviews

    95%
    5%
    0%
    0%
    0%
    • Ryan Lynch
      53 days 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
      2 months ago

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

    • Roland
      2 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!

    • Platon Koby
      3 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
      3 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 :)

    • H
      Hans
      3 months ago

      - Instructor talks too fast. It needs to slow down a bit and explain the concept in layman's terms. - The practice section is nice. Hope you can build more practice section, before moving to a new concept. - Hope you can see that not everyone's learning journey is the same. It would be better to teach us from the very basic of a particular concept without assuming that we are kinda experts.

    • Jesus Urias
      4 months ago

      I loved it. Especially after doing the original React Course, this was a great segway into react hooks. It felt more like I was the one personally making changes to everything and learning more on my own. 10/10 would do it again.

    • LG
      Leo Gonzalez
      4 months ago

      I took Tyler's redux course a few years ago. This time I came back to retake the course (and brush up a bit on my skills).

    • Luis
      5 months ago

      Ended up taking the Hooks course as well, and boy am I glad I did. Completely solved Hooks for me.

    • MM
      Mayilavan Manickam
      6 months ago

      I loved it and you have nailed the topics.