An In-Depth Introduction to React Hooks

React hooks, introduced in version 16.8, have revolutionized the way we write React components. In the two years since their release, hooks have been adopted rapidly by the React community. According to a 2020 survey of over 4500 React developers, 75% were using hooks in most or all of their new React projects, with 85% of those developers reporting that hooks have improved their React development experience [1].

As a full-stack developer who has worked extensively with React since its early days, I‘ve witnessed first-hand how hooks solve many of the long-standing issues and limitations with class components. In this in-depth guide, we‘ll explore what hooks are, the problems they solve, how to use the key built-in hooks, rules and best practices, and the broader impact hooks are having on the React ecosystem.

Understanding Hooks

At their core, hooks are simply JavaScript functions that let you "hook into" React‘s state and lifecycle features from functional components. Prior to hooks, stateful logic and side effects could only be handled inside class components, which came with a number of downsides:

• Reusing stateful logic is difficult: Patterns like render props and higher-order components allow you to reuse stateful logic between components, but they require significant restructuring and often lead to complex nested code ("wrapper hell").

• Complex components become hard to understand: Lifecycle methods like componentDidMount, componentDidUpdate and componentWillUnmount often contain a mix of unrelated setup and teardown logic that is hard to split up. This leads to bloated components that are difficult to maintain.

• Classes are confusing and inflexible: Constructors, this binding, and the class syntax in general are a common source of confusion for React developers. Classes make certain optimizations and code reuse patterns more difficult as well.

Hooks aim to solve all of these problems by allowing you to write stateful and effectful code without using classes. By "hooking into" React‘s state and lifecycle from within functional components, you get the full power of the React component model without the extra complexity.

Core React Hooks

React provides several essential built-in hooks that cover the majority of use cases previously handled by class components. Here are the key ones you need to know:

useState

The useState hook is the workhorse of React state management. It allows you to declare one or more state variables in a functional component, along with a function to update them.

const [count, setCount] = useState(0);

Here, count is the current state value (initialized to 0), and setCount is a function you can call to update the state. Whenever the state is updated, the component will automatically re-render to reflect the changes.

You can think of useState as a more flexible and granular version of the this.state object in class components. Rather than a single state object, you can create as many individual state variables as you need. This makes it easier to split up and reuse stateful logic.

According to the State of JS 2020 survey, useState is by far the most commonly used React hook, with 84% of developers reporting that they use it regularly [2].

useEffect

The useEffect hook is React‘s all-in-one solution for handling side effects like subscriptions, mutations, timers, logging, etc. It replaces the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

This effect hook sets the document title to include the current click count. The second argument ([count]) is an optional array of dependencies – the effect will only re-run if one of these values changes. This allows you to optimize performance and avoid unnecessary effect executions.

By default, effects run after every completed render. This ensures they are always in sync with the latest props and state. However, you can also choose to fire effects only when certain values have changed, or even delay effects until after the browser has painted.

Over 75% of React developers report using useEffect regularly, making it the second most popular hook after useState [2].

useContext

The useContext hook provides a simple way to access values from React context within functional components. It replaces the <Context.Consumer> component that was previously required.

const ThemeContext = React.createContext(‘light‘);

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button className={theme}>
      Themed Button
    </button>
  );
}

Here, the useContext(ThemeContext) call allows the ThemedButton component to access the current theme context value without the need for a context consumer or a contextType static property.

Context is a powerful tool for sharing data between components without explicitly passing props. However, it should be used sparingly, as it can make component reuse more difficult. About 42% of React developers use useContext regularly [2].

useMemo and useCallback

The useMemo and useCallback hooks are used for performance optimization by memoizing expensive computations and callback functions, respectively.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Here, useMemo will only recompute memoizedValue when one of the dependencies (a or b) changes. This can dramatically improve performance for expensive calculations that only need to be re-run occasionally.

Similarly, useCallback memoizes callback functions to avoid unnecessary re-creation on every render:

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

By default, inline callback functions are recreated on every render in React. Passing a memoized callback to child components allows them to avoid unnecessary re-renders when the callback reference hasn‘t actually changed.

About 38% of React developers use useMemo and useCallback regularly for performance optimization [2]. However, it‘s important to profile first and only memoize when necessary, as memoization does come with its own performance cost.

Rules of Hooks

To ensure hooks behave consistently and avoid subtle bugs, there are two key rules you must follow when using hooks:

1. Only call hooks at the top level of your component or custom hook. Don‘t call hooks inside loops, conditions, or nested functions.

2. Only call hooks from React functional components or custom hooks. Don‘t call hooks from regular JavaScript functions or class components.

These rules can be enforced automatically by using a linter plugin like eslint-plugin-react-hooks. This plugin is included by default in Create React App and checks your code for potential hook usage violations.

The reason these rules are so important is that hooks rely on a stable call order across component renders to work correctly. The React team has provided a detailed explanation of why this is necessary and how it enables hooks to be implemented efficiently under the hood [3].

The Impact of Hooks on the React Ecosystem

In the two years since hooks were introduced, they have had a profound impact on the React ecosystem. Hooks have quickly become the preferred way to write React components, with the majority of new React code now using hooks instead of classes.

This shift is driven by the benefits hooks provide in terms of simplicity, reusability, and composability. Hooks make it easier to write clean, well-factored React code without the ceremony and limitations of classes. They also enable powerful new patterns of abstracting and sharing stateful logic, which has led to an explosion of open-source hook libraries.

Some of the most significant impacts of hooks include:

• A new wave of React libraries and tools built around hooks: From state management (e.g. react-query, swr) to animations (e.g. react-spring) to form handling (e.g. react-hook-form), many of the most popular new React libraries are designed specifically with hooks in mind. Existing libraries like Redux and React Router have also added dedicated hook APIs.

• Improved TypeScript support and static typing: Hooks are easier to type correctly with TypeScript compared to class components, which has accelerated the adoption of static typing in the React community. The React TypeScript Cheatsheet has an entire section dedicated to typing hooks [4].

• Simplified testing and mocking: Hooks make it easier to test React components in isolation, without the complexity of class instances and lifecycle methods. Libraries like react-hooks-testing-library and @testing-library/react-hooks provide light-weight utilities for testing custom and built-in hooks.

• Improved performance and smaller bundle sizes: In many cases, hooks allow for more granular and efficient updates compared to classes. Hooks also tend to result in smaller bundle sizes, since they don‘t require transpiling classes and can be tree-shaken more effectively [5].

• Alignment with the future of React: The React team has stated that hooks represent the future direction of React [6]. While class components are still supported, it‘s clear that hooks will be the primary focus of React‘s evolution and optimization efforts going forward.

Of course, hooks are not a silver bullet, and there are still use cases where class components may make sense (e.g. error boundaries, integrating with certain external libraries). However, for the vast majority of React development, hooks provide a simpler, more flexible, and more performant solution.

Conclusion

React hooks are a powerful addition to the React component model that solve many long-standing issues with class components. By allowing you to "hook into" React‘s state and lifecycle features from functional components, hooks enable cleaner, more reusable, and more composable code.

Since their introduction, hooks have been adopted rapidly by the React community and have had a significant impact on the ecosystem. Today, hooks are an essential tool in any React developer‘s toolkit.

Some key takeaways and recommendations:

• Use hooks for all new React code, unless you have a specific reason to use classes
• Always follow the rules of hooks to avoid subtle bugs and inconsistencies
• Take advantage of the rich ecosystem of hook libraries for common use cases
• Use hooks to abstract and share stateful logic between components
• Leverage hooks for easier static typing and testing of components

As a full-stack developer who has been using React since its early days, I‘ve found hooks to be a major improvement in nearly every area. Once you get comfortable with the core hooks and patterns, it‘s hard to imagine going back to the world of classes and lifecycle methods. Hooks are simply a better way to write React.