Trabalhando com Rooks & States no React

Hooks

Funções que estão sempre associadas ao componente
Hooks básicos:
- useState
- useEffect
- useContext
Hooks adicionais:
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandler
- useLayoutEffect
- useDebugValue

Counter - Com e sem estado

Para compararmos a facilidade de um uso de hooks, criaremos um componente com e sem o uso do hook useState

Counter Stateless

function Counter() {
  let quantity = 1

  function upQuantity() {
    quantity = quantity + 1
    document.getElementById("counter-box").innerHTML = quantity
    console.log(quantity)
  }

  return (
    <>
      <h1>Counter</h1>
      <h2 id="counter-box">{quantity}</h2>
      <button onClick={upQuantity}>Aumentar</button>
    </>
  )
}

export default Counter

Counter Statefull

import { useState } from "react"

function SmartCounter() {
  const [quantity, upQuantity] = useState(1)

  return (
    <>
      <h1>Smart Counter</h1>
      <h2>{quantity}</h2>
      <button onClick={() => upQuantity(quantity+1)}>Aumentar</button>
    </>
  )
}

export default SmartCounter

Podemos observar que o useState torna desnecessário criarmos uma função para setarmos o valor da variável quantity - o hook já nos retorna essa função
Podemos inserir vários useState, o que simplificaria progressivamente nosso componente

Efeitos colaterais e o hook useEffect

useEffect - Função que indica um efeito colateral a ser executado quando um valor monitorado se altera
```
useEffect(() => {
  efeitoColateral()
  return cleanup
}, [valorMonitorado])
```
O useEffect pode ser visto como a junção dos métodos ComponentDidMount, ComponentDitUpdate e ComponentWillUnmount originais do React