This course is up to date, guaranteed
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.
71 Reviews
- 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
- 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.
- CCameron★★★★★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.
- 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!
- RLRyan Lin★★★★★5 months ago
Perfect course
- AAndrii★★★★★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
- 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.
- JAJuan 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.
- HHani★★★★★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.
- JJan★★★★★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
- React
- React Hooks
- React with TypeScript
- Redux
- React Router
- Advanced JavaScript
- Modern JavaScript