Inicialmente, vamos entender. O que são hooks? São funções do React que nos permitem utilizar recursos como gerenciamento de estados e efeitos colaterais em componentes funcionais, sem precisar escrever classes ou diversas linhas de código.

O que podemos fazer com eles? Bom, gerenciamento de estados, ações após a renderização, acessar estados globais e até mesmo, utilizar referências.

useState

Ele é quem nos permite controlar os estados de um componente. Ele retorna um par de valores: o valor atual do estado e uma função para atualizá-lo.

No exemplo abaixo, ele está sendo utilizado para gerenciar se uma certa cadeira já foi arremessada. Quando o usuário clicar em "Sim" ou "Não", o estado é atualizado e a resposta exibida será alterada.

function App() {
    // Iniciamos como falso, já que não aconteceu ainda
    const [cadeiraJaFoiArremessada, setCadeiraJaFoiArremessada] = useState(false)

    // Função para atualizar o estado para verdadeiro
    const confirmarArremesso = () => {
        setCadeiraJaFoiArremessada(true)
    }

    // Função para atualizar o estado para falso
    const negarArremesso = () => {
        setCadeiraJaFoiArremessada(false)
    }

    return (
        <div>
            <h1>A cadeira já foi remessada?</h1>
            <h2>Resposta: {cadeiraJaFoiArremessada ? 'Sim' : 'Não'}</h2>

            <button onClick={confirmarArremesso}>Sim</button>
            <button onClick={negarArremesso}>Não</button>
        </div>
    )
}

Existem outras maneira de se fazer isso ao invés de criar funções propriamente ditas e tornar tudo mais simples, como:

<button onClick={() => setCadeiraJaFoiArremessada(true)}>Sim</button>
<button onClick={() => setCadeiraJaFoiArremessada(false)}>Não</button>

Isso irá eliminar uma quantidade imensa de código desnecessário e a funcionalidade ainda será a mesma.

useEffect

Este hook nos permite executar efeitos colaterais em componentes, como chamadas de API e manipulação de DOM.

Ele roda uma vez após a renderização inicial do componente e pode ser configurado para ser disparado sempre que um valor no array de dependências mudar.

No exemplo abaixo, sempre que a variável cadeiraJaFoiArremessada for alterada, a função será executada.

useEffect(() => {
    if (cadeiraJaFoiArremessada) {
        alert('Arremessaram a cadeira')
    }
}, [cadeiraJaFoiArremessada])

useRef

Ele nos possibilidade criarmos uma referência mutável, a qual podemos associar a elementos do DOM, como inputs, sem precisar causar uma nova renderização do componente.

No exemplo abaixo, usamos o useRef para referenciar o campo de input e, com a função focarNoInput, podemos aplicar o foco diretamente utilizando o Javascript.

function App() {
    const inputRef = useRef(null)

    const focarNoInput = () => inputRef.current.focus()

    return (
        <div>
            <label>Quem arremessou a cadeira?</label>
            <input ref={inputRef} type="text" />
            <button onClick={focarNoInput}>Focar no input</button>
        </div>
    )
}

Curtiu o conteúdo? Fique à vontade para acrescentar ou perguntar algo útil para mim lá no Twitter/X, compartilhe com amigos e conhecidos caso esse conteúdo tenha sido útil. Até mais!