ReactJS Hooks: How to Use useEffect in ReactJS?



To give an initial state sometime we need an auto refresh state such as to display a realtime data in our page. And to support this activity we need to use a kind of Hooks which is called useEffect.

  • When you call useEffect with only the callback function, useEffect runs on every render. useEffect(() => {});
  • When you call useEffect with empty array of dependencies, the useEffect run only once at the first render. useEffect (() => {}, []);
  • When you call useEffect with an array of dependencies, useEffect runs everytime one of the dependencies changes. useEffect(() => {}, [array, of, dependencies]);

Below as a sample in using useEffect:
import React, { useState, useEffect } from 'react';

function Example() {
const [count, setCount] = useState(0);

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

For more advance in useEffect implementation can be read from below project URL where I use this method to display initial data automatically.

Comments

Post a Comment

Popular posts from this blog

ReactJS: Protected Routes Implementation in ReactJS

Image
Protected Routes are routes that can only be accessed if a condition is met(usually, if user is properly authenticated). It returns a Route that either renders a component or redirects a user to another route based on a set condition. We will use this method if we want to separate between specific user and public user in accessing pages in our website by using ReactJS platform.
Read more

How to Inspect Problems in Your ReactJS Codes

Image
Every web developer needs to validate their codes according to standard formats especially ReactJS Web Developers. When writing JavaScript with an editor such as Visual Studio Code, there are different ways you can ensure your code is syntactically correct and in line with current best practices. You can use a linter to do this. Linters check your code for syntax errors and highlight errors to make sure you can quickly find and fix them.
Read more