React useEffect Hook | React JS Tutorial

The useEffect Hook allows you to perform side effects in your components.

useEffect accepts two arguments. The second one is optional.

Runs on every render:

import { useState, useEffect } from "react";
 
function Home() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });
 
  return <h1>I have rendered {count} times!</h1>;
}
 
export default Home;

Runs on first render:

import { useState, useEffect } from "react";
 
function Home() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []);
 
  return <h1>I have rendered {count} times!</h1>;
}
 
export default Home;

Runs when data changes:

import { useState, useEffect } from "react";
 
function Home() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState('');
 
  const handleChange = (e) => {
    setData(e.target.value);
  }
 
  useEffect(() => {
    setCount((count) => count + 1);
  }, [data]);
 
  return (
    <>
      <input onChange={handleChange} value={data} />
      <p>{count}</p>
    </>
  );
}
 
export default Home;