Hooks in ReactJS

by

React Hooks

Hooks are the functions introduced in the React 16.8 version, in order to allow the use of state and other React features without writing a class, but does not replace the knowledge of React concepts. It does not work inside classes, but, “hook into” React state and lifecycle features from function components. They do not contain any breaking changes as they are backwards-compatible.

 

Rules:

These rules of using Hooks are to ensure that all the stateful logic in a component is visible in its source code.

  • Do not call Hooks inside loops, conditions, or nested functions, but only at the top level of the React functions in order to ensure that Hooks are called in the same order each time a components renders.
  • Hooks cannot be called from regular JavaScript functions but can be called from React function components and from custom Hooks.

 

Pre-requisites:

  • Node version 6 or above
  • NPM version 5.2 or above
  • Create-react-app tool for running the React App

 

React Hooks Installation:
To install the latest React, run the below command in terminal:
Command: 

$ npm install [email protected] --save

To install the latest React-DOM, run the below command in terminal:
Command: 

$ npm install [email protected] --save

Ensure that the package.json file lists the React and React-DOM dependencies.

"react": "^16.8.0-alpha.1",  
"react-dom": "^16.8.0-alpha.1",

Hooks State:
Hook state is used to declare a state in React app using the useState() functional component. It is used for setting and retrieving state.

Example: Example of Hook State.
App.js:

import React, { useState } from 'react';  
function Counting() {  
const [i, setCount] = useState(0);  
return (  

  

Number of click: {i} 
  
  

  
);  
}  
export default Counting;

Output:
import React, { useState, useEffect } from 'react'; function Counting() { const [i, setCount] = useState(0); useEffect(() => { document.title = `Number of click: ${i}`; }); return (

Number of click: {i}

); } export default Counting;

Output:
import React, { useState, useEffect } from 'react'; const useDocumentTitle = title => { useEffect(() => { document.title = title; }, [title]) } function Counting() { const [i, setCount] = useState(0); const incrementCount = () => setCount(i + 1); useDocumentTitle(`Number of click: ${i}`); return (

Number of click: {i}

) } export default Counting;

Explanation:
Here, useDocumentTitle is a custom Hook inside which useEffect Hook is called. It takes an argument as a string of text which is a title. The check and update of the title are performed only when its local state is different than what we are passing in, by the second argument of the useDocumentTitle Hook.

Built-in Hooks:

The built-in Hooks can be divided into two parts.

Basic Hooks:

There are three types of Basic built-in Hooks in ReactJS.

  • useState Hook
  • useEffect Hook
  • useContext Hook

 

Additional Hooks:

There are seven types of Advanced built-in Hooks in ReactJS.

  • useReducer Hook
  • useCallback Hook
  • useMemo Hook
  • useRef Hook
  • useImperativeHandle Hook
  • useLayoutEffect Hook
  • useDebugValue Hook