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