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

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

ReactJS Hooks: How to Use useState in ReactJS?

Image
Hooks solve a wide variety of seemingly unconnected problems in React that we’ve encountered over five years of writing and maintaining tens of thousands of components. Whether you’re learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.
Read more