React.js: Basic React Hooks.

#javascript #react #programming #webdev

Introduction

There is no doubt that React.js is the most popular JavaScript library for building user interfaces. React.js was developed at Facebook in 2011 and became popular since it provides tons of functionalities to help developers not repeat the code. React.js is based on reusable component classes whose primary purpose is to be fast, scalable, and simple to use. With the new update React 16.8 introduction of hooks. It is a game-changer because it is easier to write and debug.

Basic Hooks

Every React component has three primary phases of lifecycle: mounting, updating and unmounting. Hooks is a state variable that can update those states in its component. We will discuss the basic Hooks and their use cases.

Rule of thumb to use Hooks.

Only call Hooks at the top level.
Only use Hooks from React functions(Components)

1. useState

useState is a Hooks that can update each lifecycle phase in Component.

Declare a State variable
Reading State
Updating State

In this example, I will create React.js that can increment by two each time when a user clicks the button and reset to 0 using useState Hook

import React,{useState} from 'react';;

function App() {
  const [counter,setCounter] = useState(0);

  return(
    <div>
      <p>{counter}</p>
      <button onClick={(()=> setCounter(counter+2))}>Counter </button>
      <button onClick={(()=> setCounter(0))}>Reset </button>
    </div>      
  )
}

export default App;

The app can update the counter and reset to 0 without loading the page. That is the beauty of React. Everything updates in the backend of React components asynchronously.

2. useEffect

useEffect is a hook that run every time the page render. It can take a function as an argument and the condition to fire an effect.

In this example, I will useEffect and fire only one time when the page render


import React,{useState,useEffect} from 'react';;

function App() {
  const [counter,setCounter] = useState(0);

  useEffect(() => {
    console.log('Render')
  },[])

  return(
    <>
    <div>
      <button onClick={(()=> setCounter(counter+1))}>Increment 1 </button>
      <button onClick={(()=> setCounter(counter+2))}>Increment 2 </button>
      <button onClick={(()=> setCounter(0))}>Reset </button>
    </div>   

    <h2>{counter}</h2>
    </>   
  )
}

export default App;

When a user clicks any button, the useEffect never fires because of the firing condition set to empty array.

In the following example, I will set the firing condition to useState variable. Every time the buttons click, it will fire the useEffect.

import React,{useState,useEffect} from 'react';;

function App() {
  const [counter,setCounter] = useState(0);

  useEffect(() => {
    console.log('Render')
  },[counter])

  return(
    <>
    <div>
      <button onClick={(()=> setCounter(counter+1))}>Increment 1 </button>
      <button onClick={(()=> setCounter(counter+2))}>Increment 2 </button>
      <button onClick={(()=> setCounter(0))}>Reset </button>
    </div>   

    <h2>{counter}</h2>
    </>   
  )
}

export default App;

The above example, useEffect fires whenever a user clicks on the Increment 1 button and the Increment 2 button because of counter value changes. However, if a user clicks on the reset button, it will stop firing useEffect because the counter is always set to zero.

Conclusion

React Hooks provide many benefits include reusability, readability, and testability. However, useEffect can cause unnecessary rendering or even infinity rendering if placed in the loop callback functions.