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.

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.

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.

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.

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.

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.

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.

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.

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

Check out the bonus content for the course!