React Hooks???
Published: 2020-08-24 13:48:02


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`.

```jsx
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. 

```jsx
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`.

```jsx
const FlagContext = React.createContext();
```

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

```jsx
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.

```jsx
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.