Hooks

In React, hooks are functions that give function components class-like abilities. These abilities include:

  • Using state
  • Performing side effects

There are a few rules when using hooks! Specifically:

  • Call hooks at the top level of React functions. If hooks are called in a loop, condition, or nested function, they may not render in the same order every time.
  • Call hooks from React functions and not regular JavaScript functions.

While there are standard React hooks, like useState() and useEffect(), there are also custom-made hooks!

Hooks are imported at the top of a file from the react library:

import React, { useState, useEffect } from 'react';

Syntax of useState()

Pass an initialValue into useState() to return a pair of new values:

  • A current state value
  • A function, setState that updates the state
const [state, setState] = useState(initialValue);

useState() returns an array. The first element is the initialValue assigned to state. The second element is a function with a similar use case as React’s this.setState() class component method.

Syntax of useEffect()

The useEffect() hook and function will execute whenever a component mounts or updates. It is equivalent to React’s class component lifecycle methods: componentDidMount(), componentDidUpdate(), and componentWillUnmount().

A callback function, sideEffects(), is passed into useEffect(). In addition, the component’s state can be accessed inside of sideEffect().

useEffect(function sideEffects() {
...
})
Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn React on Codecademy