React Hooks were introduced with React version 16.8. Hooks were the solution to React's shortcomings.

Hooks allows the use of React's features without having to define classes, making it easier to learn. In React, there was much confusion in the use of this, since it differs from how it is used in most other programming languages. Not to mention, the need to bind event handlers.

Hooks also allows the reuse of stateful logic without having to restructure the component. Even though sharing code is possible using props or higher-order components in React, their implementation resulted in multiple levels of abstraction, making the code harder to follow. This is known as "wrapper hell".

Hooks also permits the splitting of one component into smaller functions. In React, complex components were split based on lifecycle methods. These methods most often resulted in a hodgepodge of stateful logic and side effects, making it easy to instigate bugs and inconsistencies.

Since Hooks is not replacing React, they can co-exist in the code. So, there is no need to rewrite any existing code.

There is a limitation to Hooks, only call Hooks from React function components or from custom Hooks. This is necessary to ensure that all stateful logic is visible from its source code.

There are many hooks, but the three basic hooks are useState, useEffect, and useContext.

useState

In React, function components were known as "stateless components". A React state is now possible with Hooks. Making the "stateless components" into "function components".

The useState is a Hook that can be broken down into: the current state value and a function that updates the state value. It is similar to React's this.setState. The only argument needed is the initial state, which does not have to be an object unlike this.state.

import React, { useState } from 'react';

function Example() {
  const [flag, setFlag] = useState(false);

  .
  .
  .
}

useEffect

The useEffect is a Hook that adds the ability to perform side effects from a function component. It is similar to React's componentDidMount, componentDidUpdate, and componentWillMount all rolled up into one.

One of the most common uses of useEffect is to fetch data.

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

function HooksExample() {
  const [flag, setFlag] = useState(false);

  useEffect(() => {
    if (flag) {
      .
      .
      .
    } else {
      .
      .
      .
    }
  });

  render() {
    return (
      <div>
        <button
          onClick={() => setFlag(!flag)}
        >
          Click me!
        </button>
      </div>
    )
  }
}

useContext

In React, context makes it possible to pass props down from a parent component to a child component. To make context available to functional components, the useContext Hook must be used. The current context value is determined by the value prop. When the prop is updated in the provider, the Hook will trigger a rerender with the latest value.

Create the context by using createContext.

const FlagContext = React.createContext();

The child component using the context will be wrapped with the context provider.

const App = () => {

  render() {
    return (
      <div>
        <FlagContext.Provider
          value={{flag}}
        >
          <Flag />
        </FlagContext.Provider>
      </div>
    )
  }
}

The child component that will use the passed in context from a parent component.

const Flag = () => {
  const { flag } = useContext(FlagContext);

  render() {
    return (
      <div>
        .
        .
        .
        <span className="flag">{flag}</span>
        .
        .
        .
      </div>
    )
  }
}

In Conclusion . . .

Hooks takes advantage of the cleanliness and simplicity of a component, its state, and its lifecycle methods. But it is done in regular JavaScript functions, resulting in shortened code and making it more readable. If that were not enough, Hooks makes it possible to create custom Hooks.