If you never develop a convincing answer for both of those questions, you won’t have a solid enough foundation to build upon when you dive into the specifics. These questions are specifically interesting in regards to React Hooks. React was the most popular and most loved front-end framework in the JavaScript ecosystem when Hooks were released.
React Hooks
3h 47m 48s
English
Paid
Despite the existing praise, the React team still saw it necessary to build and release Hooks. Lost in the various Medium posts and blog think pieces on Hooks are the reasons (1) why and for what (2) benefit, despite high praise and popularity, the React team decided to spend valuable resources building and releasing Hooks. To better understand the answers to both of these questions, we first need to take a deeper look into how we’ve historically written React apps.
The first thing you should do whenever you’re about to learn something new is ask yourself two questions -
- Why does this thing exist?
- What problems does this thing solve?
Additional
About the Author: UI.dev (Tyler McGinnis)
UI.dev (formerly tylermcginnis.com) is the online course platform of Tyler McGinnis, a US developer who has been publishing React and JavaScript educational material continuously since 2014. The platform was one of the earliest dedicated React-tutorial sources and remains widely cited for the depth of its long-form courses on JavaScript fundamentals and the React ecosystem.
Course material covers React (including modern hooks-based patterns and Next.js), modern JavaScript (the canonical Modern JavaScript course), Firebase, GraphQL, Redux, TypeScript with React, and the algorithm / data-structure interview prep track. The teaching style is unusually rigorous about the language fundamentals underneath the framework material — Tyler's Modern JavaScript course in particular is a classic of the genre.
The CourseFlix listing under this source carries over 15 UI.dev / Tyler McGinnis courses spanning that range. Material is paid; UI.dev runs on per-course or membership pricing on the original platform.
Watch Online 30 lessons
0:00
/ #1: Why React Hooks?
All Course Lessons (30)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Why React Hooks? Demo | 13:41 | |
| 2 | The useState Hook | 10:13 | |
| 3 | (Solution) Theme | 01:46 | |
| 4 | (Solution) Todos | 06:18 | |
| 5 | (Solution) Show/Hide | 04:49 | |
| 6 | (Bonus) Execution Context, Scopes, and Closures | 25:30 | |
| 7 | The useEffect Hook | 14:53 | |
| 8 | (Solution) Character Limit | 03:08 | |
| 9 | (Solution) Wait Delay | 01:53 | |
| 10 | (Solution) API Requests | 05:26 | |
| 11 | Creating Custom Hooks | 06:48 | |
| 12 | (Solution) useWait | 01:56 | |
| 13 | (Solution) useWindowDimensions | 02:52 | |
| 14 | (Solution) useFetch | 02:37 | |
| 15 | The useReducer Hook | 24:22 | |
| 16 | (Solution) Refactor useFetch | 03:31 | |
| 17 | The useRef Hook | 09:38 | |
| 18 | (Solution) Complex Form | 03:25 | |
| 19 | (Solution) Click Game | 05:32 | |
| 20 | Guide to React Context | 10:09 | |
| 21 | (Solution) LocaleContext | 02:53 | |
| 22 | React.memo, useCallback, and useMemo | 25:15 | |
| 23 | (Project) Introduction | 02:00 | |
| 24 | (Project) index.js | 03:45 | |
| 25 | (Project) Battle.js | 08:25 | |
| 26 | (Project) Card and Nav | 01:35 | |
| 27 | (Project) useHover | 03:38 | |
| 28 | (Project) Loading.js | 04:06 | |
| 29 | (Project) Popular.js | 12:17 | |
| 30 | (Project) Results.js | 05:27 |
Unlock unlimited learning
Get instant access to all 29 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 2y agoReact Js A-Z With Laravel - For Beginner to Advanced Level
By: UdemyThis React Js A-Z With Laravel Course will help you to become a Full Stack Web Developer. React has rapidly become one of the most powerful tools for building W68h 1m -
Updated 1y agoUnderstanding React | Don’t Imitate Understand
By: Anthony AliceaEven if you've been using React for years, your mental model is likely inaccurate. That's because the best mental model is understanding how something really wo17h 3m5/5 -
FreeUpdated 2y agoNext.js - The Full Course
By: FireshipNext.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil1h 14m5/5
Frequently asked questions
What prerequisites are needed before taking this course?
Before taking this course on React Hooks, students should have a solid understanding of JavaScript and familiarity with React, as the course builds on these concepts. Knowledge of fundamental React components and lifecycle methods will be beneficial since Hooks are designed to replace some of these older patterns. The course assumes you are comfortable with JavaScript ES6 features and have experience with functional programming concepts.
What projects or exercises will I complete during the course?
The course includes several practical exercises and projects to reinforce learning. These include solutions such as Theme, Todos, Show/Hide, and more complex tasks like API Requests and Character Limit. Additionally, there are projects like Battle.js, Card and Nav, and useHover that allow students to apply the Hooks knowledge in more realistic scenarios. These exercises are designed to provide hands-on experience with applying Hooks in various situations.
Who is the target audience for this course?
This course is targeted at front-end developers who are familiar with React and looking to enhance their skills by learning React Hooks. It is suitable for those who want to update their knowledge to include Hooks, which have become a staple in modern React development. The course is particularly beneficial for developers moving from class-based components to function-based components using Hooks.
How does the depth of this course compare to other React courses?
This course specifically focuses on React Hooks, providing detailed explanations and practical applications of different Hooks like useState, useEffect, useReducer, and useRef. Unlike broader React courses, this course dives deeply into Hooks, offering solutions and projects that thoroughly cover their use cases. Students will gain a specialized understanding of Hooks, which are essential for modern React development.
What specific tools or platforms are covered in this course?
The course covers tools and platforms integral to React Hooks, such as creating custom hooks and using built-in hooks like useState, useEffect, and useReducer. Students will also explore advanced concepts like React.memo, useCallback, and useMemo to optimize performance. The guide to React Context is included to demonstrate state management with Hooks. However, the course does not cover unrelated tools or platforms outside the React ecosystem.
What topics are not covered in this course?
The course is focused exclusively on React Hooks and does not cover topics outside of this scope, such as Redux for state management, server-side rendering with Next.js, or detailed CSS styling techniques. It also does not delve into the basics of React itself, such as component creation or JSX syntax, assuming prior knowledge of these areas.
How much time should I expect to commit to completing this course?
The course consists of 30 lessons, each focusing on different aspects of React Hooks. While the total runtime is not specified, students should be prepared to dedicate time not only to watching lessons but also to completing the practical exercises and projects. Depending on the student's prior experience, the time commitment can vary, but a few weeks of part-time study should be expected to fully grasp the material and complete the assignments.