React Hook - useEffect();

Hooks are one of the most important part of using React specially if you write functional components with its latest update. ( React 16.8 ).

In this blog you will learn:

- What are React Hooks?

- What is UseEffect() Hook?

- How to use it in a functional component?

- Advantages and important rules to remember

React Hooks are simple functions that let you “hook into” React state and lifecycle features from function components.

Note: They are a new addition to React 16.8 and works only with functional components

UseEffect()

This hook lets you perform side effects from a function component. It replaces componentDidMount, componentDidUpdate, and componentWillUnmount from React classes.

'Side Effects' (or “effects” for short) are operations that affect other components that can't be done during rendering like data fetching, subscriptions, or changing the value of a state prop in other components

How to use it?

Since Hooks are available only for functional components, let's look that a simple example below

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

function App() {
const [resourceType, setresourceType] = useState('posts')

useEffect(() => {
console.log('clicked');
}, [renderType]) 

return (
<>
<div>
<button onClick()={() => setresourceType('posts')}>Posts</button>
<button onClick()={() => setresourceType('users')}>Users</button>
</div>
<h1>{resourceType}</h1>
</>
)
}

The App component renders 2 buttons which display 'posts' or 'users' when clicked on them.

Now if you notice the UseEffect() hook takes 2 arguments:

-A function that is used to perform the given operation, in this case log 'clicked' on the console.

-A input value that determines when the function has to be executed. Here when the resourceType is changed the function is executed and 'clicked' is logged onto the console.

This is how useEffect() works, it helps you perform a side operation when an event occurs on the DOM.

Advantages and Rules

• The main advantage of React hooks is the re-usability of stateful logic. It can be done with the help of custom hooks (which we will discuss later)

• We can eliminate the need to use the different life-cycle method in class components and instead use one single useEffect() hook for all

• The complexity of using 'this' keyword can be removed in the functional component

• React hooks are easier to test and work with, they make the code look cleaner, easier to read and have fewer lines of code.

Hooks are JavaScript functions, but they impose two important rules:

• Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.

• Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks.)