Understanding Common React Hooks

Introduction

React hooks were first introduced in late October 2018, and in early February 2019, React version 16.8 was released for production use. The state can now be maintained in both class and functional components since the introduction of hooks.

Why learn React Hooks?

Hooks are easy and convenient to work with; they make codes cleaner and easier to read.
Hooks make code more reusable, like the passing of props from one file component to another file component or allowing the creation of custom hooks without affecting the hierarchy of components.
Hooks make React easier to learn and do not make it look complex, which makes learning React interesting.

Prerequisites

To follow along with this article:

It is advisable to have a basic understanding of JavaScript.
Download any IDE of your choice. I prefer Visual Studio Code

What Are React Hooks?

Hooks are special functions used in React functional components. They have a special feature that allows a lifecycle update. Most updates were done in a class component before, but with hooks, it is possible to manage the states of web applications in a functional component.

Types of Hooks

useState()

This is a type of hook in React that allows management of the state of your application.

Our components' state gives us access to and allows us to update specific values over time.

useState () takes in two values.

current value
Updated value.

useState() can be used to store an Array, Object, Number, String, Boolean, or Null as the initial value.

useState() must be declared first at the top of the React application, and it can only be used in a functional component of a React application.

To declare a useState():

It must be imported first.

Syntax:


import {usestate} from 'react'

const []=useState()

An example that shows how it is used:


import { useState } from 'react'// importing a useState at the top

// to be able to use it

const UseStateContainer = () => {

    const [text, setText] = useState(' obi is a boy');

    const handleClick = () => {

 setText('julia is a girl')

    }

    return (

 <div>

 <h1>{text}</h1>

 <button onClick={handleClick}> show text</button>

 </div>

    );

};

export default UseStateContainer;

useState() makes the application reactive.

useEffect()

useEffect() runs on every render in a web application. It is used to fetch data from an API, authenticate, and also set a function.

useEffect() accepts two arguments.

A function
A dependency ([]).

Without a dependency, when useEffect() is declared, it will keep rendering and that will cause an infinite loop.

Syntax for useEffect() without the addition of dependency


import { useEffect } from 'react'

useEffect(() => {

 })

This runs continuously on every render.

Syntax for a useEffect() with the addition of dependency


import {useEffect} from 'react'

useEffect(() => {

 }, [] )

This runs on the first render.

As said earlier, useEffect() accepts a function as an argument.

An example of useEffect() that accepts a function


import React from  'react'

import { useEffect, useState } from 'react'

const Container = () => {

 const [name, setName]=useState('White')

 useEffect(() => {

 setTimeout(() => {

 setName('Jennifer')

 }, 3000);

 }, [])

 return (

 <div>

 <h1>{name}</h1>

</div>

 )

}

export default Container;

// After 3 seconds, the value changes from 'white' to 'Jennifer'

useLayoutEffect()

This React hook is comparable to useEffect (), although they differ slightly from it in some ways. The useLayoutEffect() is useful when you want to get a position before printing the item on the browser. It provides the measurement directly. whereas the useEffect() displays the item before positioning itself like in a pop-up modal.

Web Dev Simplified

Syntax


import{useLayoutEffect} from 'react'

useLayoutEffect(()=>{

})

useParam()

This is one of the React hooks I ❣. useParam() matches the exact or direct to the URL i.e. gets the details of a particular id but when using useParam() a router has to be installed first in the React application.

This is the code to install react-router-dom


npm install react-router-dom

useRef()

This hook preserves the values just like useState() but does not trigger a render like a useState(). Instead, useRef() targets the DOM nodes directly.

Example

useNavigate()

The useNavigate() navigates programmatically, e.g. When a form has been submitted, the application programmatically returns to the homepage. For the useNavigate() to be used, react-router-dom version 6 has to be installed. The useNavigate() replaced the useHistory() which is in react-router-dom version 5.

To install react-router-dom version 6


npm install react-router-dom@6

useNavigate() has to be imported at the top of your application and it must be declared.

example


import React from 'react';

import {useNavigate} from "react-router-dom"

const About= () => {

 const navigate = useNavigate();

 return (

 <>

 <h1>About</h1>

 <button onClick={()=>navigate("/")}>click me</button>

 </>

 )

};

export default About;

With the use of useNavigate() it returns without having to link it to the homepage.

useContext()

This hook gives you the ability to control the overall state of the application globally by sharing the props stored in the parent component with the children component. PedroTech

Conclusion

React hooks are used in the functional components.
React function hooks should be declared first at the top level of your application.
All hooks start with the word use