Hooks
Learn how to use Hooks in React, a powerful feature of function components.
StartKey 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
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
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory