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.
75 Reviews
- João Carvalho★★★★★15 days ago
Good course, although I struggled a lot with the practice exercises. Just ended up skipping most.
- MAMuhsen Al-Bashaireh★★★★★15 days ago
One of the best hands-on React Hooks courses! Thank God that Tyler Mcginnis exists in the React world 🙏
- LCLuke Chen Shui★★★★★16 days ago
This was a really informative and practical course
- 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
- 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.
- CCameron★★★★★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.
- 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!
- RLRyan Lin★★★★★6 months ago
Perfect course
- AAndrii★★★★★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
- React
- React Hooks
- React with TypeScript
- Redux
- React Router
- Advanced JavaScript
- Modern JavaScript