Using React Hooks

During the React Conf 2018, the React team introduce us a new React version and new features: “Hooks.”

They allow us to use state, context and others feature in function component. We don’t need to create a class component to use state anymore.

In this post, we’re going to test useState, useEffect, useContext, and create our own hook :-). Let’s dive into it.

useState Hook:

A simple example of a security form (email, password and CGU checkbox) from one of my project to show how to handle useState. It uses a not familiar syntax, but it’s the same as object destructuring. useState return an array like this: [initialState, setState]

useEffect Hook:

This is one of the most powerful hooks, it allows us to have lifecycle function in our function components. With useEffect we have componentDidMount , componentDidUpdate and componentWillUnmout with one function. Let’s dive into it.

We’re going to modify our example above to test these 3 lifecycles functions. To do so we’re going to create a new component that shows the CGU and use the checkbox to show, hide and update it. (mount, unmount, update)

componentDidMount:

When you use take a function and an array as second argument, by setting and empty array as second argument we transform our useEffect to componentDidMount and our console.log will be called only once at render.

useEffect(
    () => {
      console.log("componentDidMount");
    },
   []
  );

componentDidUpdate:

In this case we set number in a array as second argument. The console.log is called when number changes

useEffect(
    () => {
      console.log("componentDidUpdate => number changes");
    },
   [number]
  );

componentWillUnmout:

Our function returned is called when the component unMount.

useEffect(
    () => {
      console.log(
        "called On mount (componentDidMount) and only number is changed"
      );
      return () => console.log("--- componentWillUnmount ---");
    },
    [number]
  );

useContext Hook:

One of most useful Hooks for me. Before the useContext hook, we can only use one context at the time using contexType API or multiple render props to use one or multiple context, check this article. The useContext Hook save us from multiple render props and make the context easier to consume.

Before useContext:

We have a button component consuming two contexts (translation and authentication) and we can see two nested consumers.

With useContext:

Everything works the same, and the code is much cleaner. Love it

Our own hook:

We gonna create a simple hook, that gets the user information form the server and we can use it in any function component we want. This allows us to share some (business or not)logic with multiple components.

That’s it….

Thanks for your time, CLAP and SHARE if you enjoy this article and HIT ME UP FOR FEEDBACKS ❤