React Hooks: useState e useEffect na Pratica

Os React Hooks foram introduzidos no React 16.8 e revolucionaram o gerenciamento de estado em componentes funcionais.

useState

Permite adicionar estado a componentes funcionais:

import { useState } from 'react';

function Contador() {
    const [contador, setContador] = useState(0);
    return (
        <div>
            <p>{contador}</p>
            <button onClick={() => setContador(c + 1)}>+</button>
        </div>
    );
}

useEffect

Permite executar efeitos colaterais:

import { useState, useEffect } from 'react';

function Dados() {
    const [dados, setDados] = useState([]);
    useEffect(() => {
        fetch('/api/dados')
            .then(res => res.json())
            .then(setDados);
    }, []);
}