Hooks

Learn how to use Hooks in React, a powerful feature of function components.

Start

Key Concepts

Review core concepts you need to learn to master this subject

Function Components

Why Hooks?

Rules for Using Hooks

The State Hook

State Setter Callback Function

Multiple State Hooks

Side Effects

The Effect Hook

Function Components

// The two components below are equivalent.
class GreeterAsClass extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

function GreeterAsFunction(props) {
  return <h1>Hello, {props.name}!</h1>;
}

In React, you can use a function as a component instead of a class. Function components receive props as a parameter.

In the example code, we show two equivalent components: one as a class and one as a function.

Function Components

Lesson 1 of 3

1
Stateless Functional Components
In the code editor, take a look at Example.js. The first Example component is defined as a JavaScript class, but it doesn’t have to be! In React, we can also define components as JavaScript fu…
Start
2
Function Components and Props
Like any component, function components can receive information via props. To access these props, give your function component a parameter named props. Within the function body, you can access th…
Start
3
Review
Well done! You’ve written your first function component. Here’s a recap: * Function components are React components defined as JavaScript functions * Function components must return JSX * Functi…
Start