Getting Started with React Hooks
4.6 (305 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
16,027 students enrolled

Getting Started with React Hooks

Master React Hooks, the next evolution of the popular React library for building dynamic front end interfaces
4.6 (305 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
16,027 students enrolled
Created by Boris Paskhaver
Last updated 3/2019
English [Auto]
Current price: $11.99 Original price: $19.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 22 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Explore the React Hooks API introduced in React 16.8
  • Master the useState, useEffect, and useContext hooks that ship with the library
  • Declare your own custom hooks to extract business logic from components
Course content
Expand all 25 lectures 03:23:38
+ Introduction
2 lectures 10:47

React Hooks are a new addition to the popular React library for building user interfaces with JavaScript. In this introductory lesson, we take a big picture look at hooks and the advantages they offer over class-based React components.

Preview 03:35

Hooks were introduced in React version 16.8, which was released in February of 2019. In this lesson, we utilize create-react-app, an open-source tool released by the core React team, to bootstrap a basic React application from scratch. We'll be writing all of our code in the main App.js file for each lesson.

Preview 07:12
+ The useState Hook
9 lectures 01:06:11

A stateless functional component is a React component created from a plain JavaScript function that returns JSX. It has no internal state or data. In this optional lesson, we declare an SFC and also practice passing it props. A prop represents an input to a component, in the same way that an argument represents an input to a function.

OPTIONAL - REVIEW: Stateless Functional Components

Class-based React components grant additional benefits compared to stateless functional components. They can hold state that changes over time and are also wired to respond to React's lifecycle hooks. In this lesson, we create a class-based component with a button and wire up a click handler to modify the component's state.

OPTIONAL - REVIEW: Class-based React Components

Array destructuring is an ES6 feature that assigns constants to the elements of an array in sequential order. In this lesson, we practice destructuring inside the Chrome developer console. On a Mac, the console can be accessed with the keyboard shortcut Command + Option + J. On a Windows machine, the shortcut is Control + Shift + J.

OPTIONAL - REVIEW: Array Destructuring

The time has come to explore our first React hook! In this lesson, we use the useState hook to keep track of a single Boolean piece of state within a functional React component. Hooks can only be invoked within function bodies; they also cannot be wrapped in a conditional like an if statement. The useState hook accepts an initial value for the piece of state it represents.

Invoking the useState Hook

The useState hook returns an array of two elements:

  • the current value of the state (called a state variable)

  • a function to update the state to a new value.

In this lesson, we destructure the two values from our hook invocation and use them in the JSX returned from the function. We also define a click handler function to toggle the value of the state variable.

Preview 07:42

In this lesson, we use the useState hook to build a counter component from scratch. We compare the new hooks solution with an old class-based approach to show how hooks drastically reduce the complexity of the code.

Using the useState Hook to Build a Counter

The challenges in this course offer you the opportunity to review the concepts introduced in the previous lessons by tackling a coding problem. In this lesson, you're challenged to add two more buttons and two more click handlers / functions to the counter component we started building in the previous lesson.

CHALLENGE: Adding More Click Handlers

Class-based React components typically rely on a plain JavaScript object to store multiple pieces of state. In this lesson, we attempt to apply that paradigm to hooks-based React components. We discover some surprising differences between how object merges work class-based vs functional-based React components.

The useState Hook with an Object Argument

An alternative solution to storing state in a plain JavaScript object is to simply invoke the useState hook multiple times, once for each independent piece of state. In this lesson, we refactor the form component from the previous lesson to apply this approach.

Working with Multiple Pieces of State in a Hooks-Based Component
+ The useEffect Hook
8 lectures 01:11:14

A lifecycle method is a function that run at a certain point in the existence of a class-based React component. In this lesson, we offer a review of 3 lifecycle methods that the useEffect hook is designed to replace. The ​componentDidMount​ lifecycle method is invoked when a component is mounted on the DOM. The ​componentDidUpdate​ lifecycle method is invoked after a DOM update or, in other words, post-render. Finally, the ​componentWillUnmount​ lifecycle method is invoked before a component is removed from the DOM.

OPTIONAL - REVIEW: Lifecycle Methods on Class-based Components

The useEffect​ hook accepts a function, known as an effect, as an argument. A side effect is just a sequence of one or more steps, a procedure, a routine that you want the component to execute every time it renders or re-renders. In this lesson, we observe the effect execute as we force re-renders by updating state.

Preview 05:55

The body of the effect function passed to the useEffect hook is responsible for setting up the business logic of the component. This can include actions like making API requests, registering event listeners, or subscribing to data sources. In order for React to teardown what we setup, we can return a function from inside the effect. In this lesson, we explore the syntax for this optimization.

Cleaning Up by by Returning a Function from the Effect I

In this lesson, we refactor the code from the previous lesson into two separate components. We demonstrate how the useEffect hook works when a component is unmounted from the DOM. This functionality is similar to how the componentWillUnmount lifecycle method works in a class-based React component.

Cleaning Up by by Returning a Function from the Effect II

To prevent the useEffect function from running after every re-render, we can pass an empty array as the second argument to the hook. With this setup, the effect will only run when the component is first mounted on the DOM. In addition, the returned function (the teardown function) will only run when when the component is unmounted.

Limiting useEffect to Mounting and Unmounting

The second argument to the useEffect hook is an array that informs React what data to use in determining whether the component should re-render. For example, if we pass an array of a single state variable, React will only re-render the component if the value of that state variable changes. An empty array prevents re-rendering because we tell React not to care about state or prop changes.

The Second Argument to the useEffect Hook

Event listeners refer to functions that are invoked whenever an event occurs in the browser. Examples of user events include key presses, mouse clicks, and mouse hovers. In this lesson, we review how to register an event listener on a DOM node using the addEventListener method and how to remove it with the removeEventListener method.

OPTIONAL - REVIEW: Event Listeners

In this lesson, we employ the useEffect hook to create an app that outputs the user's keypresses to the screen. We show the dangers of forgetting a return function in the body of the useEffect function. The lesson also serves as a review of all the concepts introduced in this section of the course.

Another useEffect Example: User Input
+ The useContext Hook
2 lectures 25:00

React Context is a feature introduced in React 16.3, first released in March 2018. It’s designed to solve the problem of passing data from a parent component to a grandchild without passing using props. The createContext function returns an object with two properties, Provider and Consumer, both of which are React components. The Provider component broadcasts context out while the Consumer component receives it. In this lesson, we show context in action and talk about some of the messy code that happens when multiple pieces of context are used.

Preview 16:47

The useContext hook simplifies the ugly syntax that arises when multiple pieces of context are consumed by the same concept. It accepts a context object as an argument and returns the value of the context, which can be assigned to a plain constant in the body of a functional React component. In this lesson, we refactor the code from the previous lesson to rely on useContext.

Invoking the useContext Hook
+ Custom Hooks
3 lectures 29:56

A custom hook allows us to extract business logic built on hooks to functions that are not React components. The custom hook function must begin with the keyword use,. In this lesson, we refactor our code from the useEffect section of the course to rely on a new useKeyPress custom hook we define.

Define a Custom Hook (User Keypresses)

Continuing where we left off in the previous lesson, we refactor our favorite counter component to rely on a useCounter custom hook. We also show how the custom hook can be reused in two separate components with different UIs. The state variables are kept isolated and independent to the component in which they are used.

Another Custom Hook Example (Counter)

In this challenge, we build out a user form with three separate input fields. Our goal is to move all the functionality for updating the input value to a custom hook.

CHALLENGE: Reusing Custom Hooks in Multiple Components
+ Conclusion
1 lecture 00:30

Congratulations on making it to the end of the course! I hope you put your newfound knowledge of React hooks to good use!

  • Basic knowledge of the React library (components, state, props) -- reviews are provided
  • Basic knowledge of JSX, the syntax extension for JavaScript
  • Intermediate knowledge of ES6 features (classes, object destructuring, constants, etc)

Welcome to Getting Started with React Hooks!

This course offers a comprehensive overview of React Hooks, the latest feature introduced in the popular React library for building dynamic front end interfaces.

A hook is a plain JavaScript function that "hooks" into existing React features like state, lifecycle methods, and context. In the official documentation, the core React team writes that, in due time, they "expect Hooks to be the primary way people write React components".

Getting Started with React Hooks begins with the essentials and proceeds to more complex topics including:

  • The useState hook

  • The useEffect hook

  • The useContext hook

  • Custom hooks

In addition to hooks, the course is packed with optional lessons to enhance your knowledge of core JavaScript and React concepts. These topics include:

  • Stateless functional and class-based React components

  • Lifecycle methods

  • Array and object destructuring

  • Closures

  • Event Listeners

  • The React Context API

No matter your skill level, the content is designed to get you up to speed on React Hooks as quickly as possible.

Thanks for checking out the course!

Who this course is for:
  • React developers who want to explore the future of the popular UI library
  • Front end developers interested in discovering the React library