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

See more

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

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo