Hooks

In React, hooks are functions that give class-like abilities to function components, including state and side-effects.

There are a few rules when using hooks, including the following:

  • Hooks must be called from React functions (i.e. components or custom hooks) and not from a regular JavaScript function.
  • Hooks should not be called inside of a loop, condition, or nested function. Instead, hooks should be called at the top level of a React function so they render in the same order every time.

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

Syntax

import React, { useHook } from 'react';

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

Note: The code snippet above is purely pseudocode and useHook is not an actual React hook.

Hooks

useEffect()
Takes in a function and an array. The function will be executed after the current render phase finishes and only if the elements inside the array has changed from the previous render.
useState()
Returns the current state of the component and its setter function

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn React on Codecademy