React Hooks

Before you read any further, this tutorial assumes you are familiar with the React basics. That said this tutorial will cover;
What Hooks are
Rules hooks follow
UseState Hook
UseEffect Hook
I hope by the end of this tutorial y’all are Hooked onto React Hooks

NB: The code being used as can be found Here

What are Hooks

Hooks are functions that let you tap into React features such as state management and lifecycle methods without the use of class-based components. Hold up, what, I just said it “without class-based components”

In this tutorial, we shall be looking at two React Hooks that is UseState hook and the UseEffect hook. Before that, we shall look at the rules we are to follow when using Hooks.

Rules To Using Hooks

• Only use Hooks at the top level. Don’t use Hooks inside loops, conditions or nested functions. If this rule is breached it could cause bugs due to inconsistent flow between renders.

• Only call Hooks from React Functions

UseState Hook

This Hook is responsible for state management within react function components.

Ensuring we have imported useState from react as seen on line 1.
On line 7, we call the useState hook. What does this do?
Calling useState hook will create a state variable called count similar to what we would do in a class-based component using this.state = {} as well as create a function setCount that would be used to handle state change similar to this.setState().

An in-depth look at line 7,
On the right-hand side, we have a useState hook that takes the initial state value which is 0 in this case and returns an array of two values i.e [stateValue, f()]
the f() handles state change.The returned array influences what is on the left-hand side of the equal sign.

On the left-hand side of the equal sign, we see those things in square brackets. Well, that is what we call array destructuring an ES6 feature. Why do we do this? This is done to avoid complication.

Reading And Updating state

As we can see on line 11, we use the variable directly(Reading). And on line 12 inside the onClick event, we have a function that calls the setCount() (Handle the state updates which in this case happen after a button click).

UseEffect Hook

This hook is responsible for lifecycle method management within function-based components. This hook allows us to perform side effects(Data fetching, setting up a subscription and manually changing the DOM in React components) in a function component. There are two types of side effects ie Effects without CleanUp & Effects with CleanUp.
NB: You could think of the UseEffect Hook as a combination of componentDidMount, componentWillUnmount and componentWillUpdate. I guess you are wondering how it notices which one to run at what time.

Ensuring we have imported the useEffect hook as seen on line 1.
On line 11, we are telling React to run an effect after the rendering had occurred. In this particular example, we are utilizing the document.title
browser API to change the title though we could perform other tasks such as calls to APIs the app is using. Literally what we would perform in the componentDidMount

Before Hooks, in case we need to make any updates without reloading the whole page, we would use componentDidUpdate to make any necessary updates. But now, we can leverage the useEffect Hook. How? Rather the question should be, Does the useEffect hook run only after the initial render?
The answer is No, the useEffect hook run after initial render and after every update made this can further be customized to only running if it meets a particular condition and others. Though we won’t be discussing that in this tutorial but can be found here
Therefore we could stop complicating our lives with mounting or updating rather just know effects will happen after render.

In case of an effect clean up, this was previously done in the componentWillUnmount clean up such as unsubscribing from something and others. Using the useEffect hook, as shown below.

On line 6, inside the Parag component, we return a function, this function is the optional cleanup mechanism provided by useEffect Hook which also perfomrs the features of componentWillUnmount.

Ensuring you have imported the Parag Component, we shall go ahead and create a new state variable as shown on line 9, this will manage the display of the Parag i.e when it's true the Parag Component mounts and when false it unmounts.

That will be managed by the Button below.

When the Button is clicked, assuming the toogleDisplay value is changed to false, this will trigger the Parag Component to Unmount hence running the cleanUp function in the useEffect hook.

useEffect(() => {
    // Returned Functionality that handles CleanUp
    return () => console.log('It has unmounted')
  })

Conclusion

Having used React for a while, React Hooks have done a great job making the use of react much easier as well as improving performance. What A Time To Get Hooked