Understanding Hooks : what and why?
Tags: react, webdev, javascript, beginners
Published: 2021-01-06 12:53:14

This blog post is the first in series about [React Hooks](https://reactjs.org/docs/hooks-reference.html ).

For those who just start to learn React or those who are switching from using class-based components to functional components - this topic is a must-to-learn. 

React Hooks  were first introduced in React v.16.8 and became very popular since then. From what I have read from React developers, they even plan to leave classes for good and use functional components only. At least they intend to develop hooks further and advise devs to use them often. 

## What is Hook?

**Hook** is a fancy name for a simple JavaScript function which is called from React library. 

Before hooks, the most useful building block was *class-based component*, because it was using local state management and  lifecycle methods for side-effects.

With hooks, we  can use React lifecycle features and other built-in features directly from *functional component* without the need to create *class*.  

## How to use Hook?

To use hooks, you need first to import the necessary Hook from React library. To distinguish Hooks from other JS functions, it's a convention to start their name from word `use` (it is possible also to create your own Hooks, but this is for later topic). 

We import for example `useState` hook from React like this:
```react
import {useState} from 'react';
```

Than we can use it in our code:
```react
const [state, setState] = useState();
```
Before the release of React Hooks, this example would have used more lines of code, as we’d have had to make use of a *class component*.

### Rules for using Hooks

1. Call Hooks at the Top Level
2. Only call Hooks from React Components
3. Use the key word `use` for creating customs Hooks

#### Call Hooks at the Top Level
Always use Hooks at the top level of your React component. 
Don't call Hooks inside loops, conditions or nested functions. 
By following this rule, you ensure that Hooks are called in the same order each time a component renders. 

#### Only call Hooks from React Components
Only call Hooks from React components and never from regular JavaScript functions as it will simply not work there. 
If you happened to import your preferred Hook without importing React, you will not be able to make use of the Hook you’ve imported.

#### Use the key word `use` for creating customs Hooks
You can create your own custom Hook simply by starting your function name from keyword `use` - for example `useUserName`.
Inside the custom Hook it's possible to use other hooks:

```react
import {useState} from 'react';

const useUserName => (userName) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
useEffect(() => {
    const data = MockedApi.fetchData();
    data.then((res) => {
      res.forEach((e) => {
        if (e.name === userName) {
          setIsLoggedIn(true);
        }
     });
    });
  });
    
  return isLoggedIn;
}
```

### Built-In React Hooks

There are many built-in hooks in React library, which we explore in my other posts. Here is a list of them:
#### Basic Hooks:

 - useState
 - useEffect
 - useContext

#### Additional Hooks:

- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue

### Why to use Hooks?

Hooks let us organise the logic inside a component into reusable isolated units, hence they help to solve such problems as:
- Huge components that are hard to refactor and test.
- Duplicated logic between different components and lifecycle methods.
- Complex patterns like render props and higher-order components.

Each Hook may contain some local state and side effects. You can pass data between multiple Hooks just like you normally do between functions. They can take arguments and return values. They give us so much more flexibility!

They are much easier to read and test because they are plain JavaScript functions and you end up with less code.

If you want to learn more about Hooks, **AlterClass** learning platform has a very good course called [Become a React Developer](https://alterclass.io?ref=60193a5ab375a4002c3f7df4) and now they offer 40% off discount on it! 

I hope you enjoyed this brief intro and in my next blog post we are going to look at specific Hooks more closely.