Understanding Hooks : what and why?

This blog post is the first in series about React Hooks.

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:

import {useState} from 'react';

Than we can use it in our code:

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

Call Hooks at the Top Level
Only call Hooks from React Components
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:

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.

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

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)