Using React Hooks

By Peter Kellner
React Hooks bring state and lifecycle events to React Functional Components as well as streamlining code that previously was coupled and complex. Learn techniques for using React Hooks including Redux-like state management with React Context.
Get started
Play course overview
Course info
Rating
(291)
Level
Beginner
Updated
Apr 9, 2021
Duration
3h 20m
Table of contents
Course Overview
Course Overview 2m
Start Using React Hooks with useState, useEffect, and useRef
Learn How React Hooks Makes React Better with a Simple Example 4m Setting up Our React Tool Chain 6m Our First React Hook setState, and Tracking Input Field Value 6m Using useRef to Enable Mouseover to Colorize an Image 6m Learning How to Use the useEffect Hook 5m Using useEffect, useRef and useState for Colorizing on Scroll 6m Improving and Fixing Our Scrolling Colorizing React App 3m Adding a Side Effect to Our Scroller Component 5m Optimizing Performance with the useEffect Dependency Array 2m Takeaways 1m
Using More Hooks: useContext, useReducer, useCallback, and useMemo
Why Should You Use React Hooks and Does It Matter? 3m React Hooks Basic Usage and Rules 4m Updating Our Examples to a Real-world Conference React App 8m Building out the Conference Speakers Page with Our Primitive React Hooks 7m Preparing React Context for Use with useContext Hook 4m Using useContext to Access Global Configuration from React Context API 2m useReducer Is What useState Is Built On 4m Using useReducer with Multiple Dispatched Actions 6m Using useCallback to Improve React App Performance 3m Using useMemo to Optimize Filtering and Sorting Speakers 3m Takeaways 1m
Migrating Your Existing Apps to React Hooks
What’s Different and What’s the Same between Hooks and No Hooks 2m Tracking State Changes in React Hooks Functional Components vs. React Class Components 3m What useState Represents in a Class Component 3m What useRef Represents in a Class Component 1m What useEffect Represents in a Class Component 6m Takeaways 1m
Learn How to Combine Existing React Hooks into New Combined Hooks
Benefits of Combing React Hooks into Custom Hooks 2m Timing out and Email Validation on the Signup Form 6m Combining Multiple React Hooks into One Custom Hook 3m Updating Our Speakers Component to Handle Multiple State Values Using Destructuring 6m Creating a Custom React Hook to Manage Speaker Data and Loading 3m Extending Our Custom React Hook with Update Functionality 5m The Basics of Using a REST Service as Our Speaker Data Source 4m Converting Our Custom React Hook to Use REST Instead of a Static Array 6m Replace Array with REST Service Calls in Custom React Hook 5m Eliminate Client Loading Message with Server-side Rendering of HTML 2m Coding Server-side Rendering with No useEffect Lifecycle Event 5m Integrating Server-side Generated Code with useContext on the Client 2m Static Site Rendering and Near Infinite Site Scaling 4m Takeaways 1m
Using useContext and useReducer to Make a Redux-like Global State
Why Manage React State Globally? 3m Create a Global Context and Include in Our App 5m Replace Our Custom Hook Usage with a Reference to Global Context 3m Create a New Custom Hook for Counting Clicks Per Speaker 5m Consolidate and Totaling Favorite Click Counts to the Page Header 4m Creating Nested Global Contexts to Reduce Re-renders of Components 6m Handling Errors in Your React App 5m Using Context to Solve a Corner Case 3m Implementing Our Colorizing on Checkbox Change Bug Fix 5m Course and Module Takeaways 2m
Description
Course info
Rating
(291)
Level
Beginner
Updated
Apr 9, 2021
Duration
3h 20m
Your 10-day individual free trial includes:

Expert-led courses

Keep up with the pace of change with thousands of expert-led, in-depth courses.
Start a 10-day free trial
Description

React Hooks reduce the complexity associated with managing state and lifecycle events exclusively in React Functional Components. What previously was complex, and often required middleware to implement, can be easily done and extended using React Hooks. They are called “hooks” because they allow the developer to hook into existing pre-built functionality. In this course, Using React Hooks, you'll gain the ability to consume pre-built React Hooks, as well as author your own custom React Hooks. First, you’ll learn all about the six most commonly used React Hooks that are built into the React core library. Then, you’ll see how they compare to the corresponding state and lifecycle events in more traditional legacy React Class Components. Next, you’ll explore how to both consume and author your own re-usable custom React Hooks. Finally, you’ll be shown how to combine React Context with React Hooks state management to integrate a Redux-like state management solution into your React app. When you are finished with this course, you’ll confidently be able to build fully capable functional components that use React Hooks.

About the author
Peter Kellner
About the author

Peter is the founder of Silicon Valley Code Camp and long-time software professional specializing in mobile and web technologies. He has also been a Microsoft MVP in ASP.NET since 2006.

More from the author
Designing React Components
Intermediate
3h 55m
May 10, 2021
Apollo: Performance Management Playbook
Intermediate
3h 20m
Nov 20, 2020
More courses by Peter Kellner
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi. I'm Peter Kellner, and welcome to my course, Using React Hooks. I'm a part‑time docs writer for Microsoft, part‑time author, part‑time conference organizer, and full‑time learner. React Hooks represents a huge step forward towards building a fully functional React app with minimal use of class components. Let me convince you that React Hooks, based off of functional components, are the best way to build React apps. Managing state and lifecycle events with Hooks is much easier, requires less code, and is much more readable than doing the same with React class components. Hooks are how JavaScript was always meant to be programmed. The major topics that we will cover include built‑in React Hooks, including useState, useRef, and useEffect, advanced Hooks like useReducer and useContext, we'll compare how React Hooks in functional components replace more complex code in class components, and finally, we'll build a real‑world React app using Hooks that includes a custom React Hook designed to handle CRUD operations running against a REST server. By the end of this course, you'll completely understand how to, using React Hooks, make your React functional components work with state and component lifecycle events in your apps. You'll be able to build an entire React app with just functional components and React Hooks, no class components needed. This is not a beginner course on React itself. If you are not comfortable building simple React apps that use state, I suggest you start out with the React: Getting Started or React Fundamentals course, and then take this one after. Join me and learn how you can use React Hooks in all your apps by watching this course, Using React Hooks, at Pluralsight.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT

Course info
Rating
(291)
Level
Beginner
Updated
Apr 9, 2021
Duration
3h 20m
Pluralsight IQ
Know exactly where everyone on your team stands with assessments and analytics.
Try our full library including this course free for your whole team for 14-days.