react/05-useeffect/src/App.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'
import './App.css'

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

  useEffect(() => {
    console.log('This runs on every render');
  });

  useEffect(() => {
    console.log('This runs only once when the component mounts');
  }, []);

  useEffect(() => {
    console.log(`This runs on mount and whenever count changes`);
  }, [count]);

  return (
    <>

      <button
        type="button"
        className="counter"
        onClick={() => setCount((count) => count + 1)}
      >
        Count is {count}
      </button>

    </>
  )
}

export default App