Using React Hooks

By Peter Kellner
Take your React programming to the next level by learning React Hooks. They simplify programming state and lifecycle events exclusively in functional components - no classes needed. Learn both basic and advanced techniques for using React Hooks.
Play course overview
Course info
Level
Beginner
Updated
May 3, 2019
Duration
1h 54m
Table of contents
Course Overview
Course Overview 2m
Start Using React Hooks with useState, useEffect, and useRef
Learning About the useEffect Hook 3m Takeaways 1m Why You Should Care a Lot About React Hooks 3m Setting up Our React Tool Chain for The Course 3m Our First React Hook, setState and Tracking Input Field Value 4m Using the Hook useRef to Enable Mouseover to Colorize an Image 6m Using useEffect, useRef and useState for Colorizing on Scroll 6m
Using More Hooks: useContext, useReducer, useCallback, and useMemo
React Hooks Basic Usage and Rules 3m Why Should You Use React Hooks and Does It Matter 3m Learn How useReducer Is What useState Is Built On 4m Updating Our Examples to a Conference Website including Bootstrap 3m Preparing React Context for Use with useContext Hook 4m Using useReducer with Multiple Dispatched Actions 2m Takeaways 1m Our New Three Hooks Only Conference Website Code Review 4m Using useCallback to Improve React App Performance 3m Using useMemo to Optimize Filtering and Sorting Speakers 3m Using useContext to Access Global Configuration from React Context API 3m
Migrating Your Existing Apps to React Hooks
Learn What’s Different and What’s the Same between Hooks and No Hooks 2m Learn What the Hook useState Represents in a Class Component 3m Tracking State Changes in React Hooks Functional Components Verses React Class Components 3m Learn What the Hook useRef Represents in a Class Component 1m Takeaways 1m Learn What the Hook useEffect Represents in a Class Component 5m
Learn How to Combine Existing React Hooks into New Combined Hooks
Learning the Benefits of Combing React Hooks into Custom Hooks 2m Integrating Our Custom React Hook a useAxiosfetch into Our Conference App 3m Combining Multiple React Hooks into One Custom Hook 2m Our Working Timing out Email Validating Conference Signup Form 3m Introducing the Custom React Hook useAxiosfetch for async REST 4m Updating Speaker Favorite with Our useAxiosfetch Custom Hook 4m
Integrating Authentication into Your App with React Hooks
Learning What We Mean by Authentication 2m Customizing Our Node Server for Authentication 4m Module and Course Wrap Up 2m Updating Our Conference Site as if Login Was Done 5m Integrating the Server Generated Request Object with Our Next.js App 6m
Description
Course info
Level
Beginner
Updated
May 3, 2019
Duration
1h 54m
Description

React versions 16.8 and higher include React Hooks which solves several problems that went unaddressed in previous versions. React Hooks provide a direct API to React concepts you already know about, like props, state, context, refs and lifecycle events. This is not a beginner course on React itself; if you are not comfortable building simple React apps that use state, start out with the React: Getting Started course. In this course, Using React Hooks, you’ll learn both basic and advanced techniques for using React Hooks in React functional components where previously there was no good way to manage state or lifecycle events. First, you'll see how to use all of the built-in React Hooks provided by the React team. Next, you’ll discover that you can combine the base React Hooks into your own custom React Hooks. Finally, you’ll explore how to incorporate Hooks into a real-world React App. When you are finished with this course, you’ll confidently be able to combine functional components with React Hooks to build first class React apps.

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
Building Server-side Rendered React Apps for Beginners
Beginner
1h 54m
Jan 2, 2019
Building a Website with React and ASP.NET Core
Intermediate
3h 20m
May 22, 2018
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 and class components. And finally, we'll build a real-world React app using Hooks that includes 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