Introduction to React Hooks

A New Way to Write React

For a long time in React, if you wanted a component to have its own state or use lifecycle methods, you had to write it as a class. Functional components were simple and “stateless.” That all changed with the introduction of Hooks in React 16.8.

Hooks are functions that let you “hook into” React state and lifecycle features from function components.

In simple terms, Hooks allow you to use features like state without writing a class. This makes your code cleaner, easier to understand, and more reusable. It’s a fundamental shift in how React components are built, moving away from the complexities of classes towards the simplicity of functions.

Why Bother With Hooks?

You might wonder why this change was necessary. While class components are powerful, they have a few common pain points that Hooks solve.

First, managing state logic within class components can get messy. Related logic often gets split across different lifecycle methods like componentDidMount and componentDidUpdate. For example, you might set up a subscription in componentDidMount and clean it up in componentWillUnmount. Hooks let you group related logic together, making your components more organized.

Second, reusing stateful logic between components was often cumbersome. Patterns like higher-order components (HOCs) and render props were used, but they could lead to a “wrapper hell” in your component tree, making code harder to follow.

Finally, classes themselves can be a barrier for some developers. Remembering to bind this and understanding how it works in JavaScript can be tricky. Functional components with Hooks are more direct and rely on standard JavaScript function behavior.

Hooks allow you to pull stateful logic out of a component so it can be tested independently and reused. You get to use React’s features without a class.

The Two Rules of Hooks

To ensure Hooks work correctly, React enforces two simple rules. These aren't just suggestions; they're essential for avoiding bugs.

Hook

noun

A special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components.

1. Only Call Hooks at the Top Level

This means you shouldn't call Hooks inside loops, conditions, or nested functions. Always use Hooks at the top level of your React function, before any early returns.

Why? React relies on the order in which Hooks are called to associate state with the right Hook call. If you put a Hook inside a condition, the order of calls could change between renders, leading to unpredictable behavior.

```javascript
// Don't do this!
if (userName !== '') {
  // Bad: calling a Hook inside a condition
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });
}

Mastering React Hooks