Getting Started with React Hooks
- 3.5 hours on-demand video
- 22 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
- Basic knowledge of the React library (components, state, props) -- reviews are provided
- 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.
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
Stateless functional and class-based React components
Array and object destructuring
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!
- React developers who want to explore the future of the popular UI library
- Front end developers interested in discovering the React library