Introduction to React Hooks

What are Hooks?

Hooks allow us to use state and lifecycle features in function components that were specific to class components before React 16.8

Benefits of React Hooks

Less Code
Easily Readable
Easier to decouple logic from UI
Performance boost with functional components

useState Hook

The first hook we will look at is the useState hook. The useState hook allows us to add state to a functional component.

Syntax: The first element is the initial state and the second one is a function that is used for updating the state.

const [count, setCount] = React.useState(0)

In the above example, we declare a variable count which holds the value 0 and setCount is the function to update the count. Executing this function re-renders the component.

Let's make a counter using the useState hook

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <div>{count}</div>
      <button onClick={incrementCount}>increment</button>
    </div>
  );
}

First, we initialize our count to 0, and then we created a function incrementCount which uses setCount to increase our count by 1. We display our count and a button which on click calls the incrementCount function.

useEffect Hook

In class components, you may be familiar with lifecycle methods. The lifecycle methods, componentDidMount, componentDidUpdate, and componentWillUnmount, are all handled by the useEffect hook in functional components. The Effect Hook lets you perform side effects in function components. Examples of side effects are fetching data, changing the DOM. Fetching data is one of the most common uses of the useState hook. The useEffect hook needs at least one argument or a function to execute. You can also add a cleanup function inside the useEffect hook.

useEffect(()=>{
    // will be called on initial render and every single re-render
})

The useEffect hook also takes an array after the function which is called the dependency array. Where we can pass dependencies on which our effect depends on. Let's take a look at an example :

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

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

In the above example, count is our dependency so console.log("count") will only execute when the count changes. If we leave our dependency array empty console.log("
render") will only execute on the initial render.

useEffect( ()  =>  {
    effect
    return () => {
        cleanup
    }
}, [value])

Inside useEffect, we can add a return statement at the end of the function call which returns a function. This return function does all the cleanup work. It's similar to componentWillUnmount in class component. Note that adding a return statement is optional in useEffect.