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
- 1In 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…
- 2Like 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…
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