Docs: adiciona artigo sobre Custom Hooks

[dvbcknd]

O que foi feito

Adiciona artigo explicando como criar custom hooks no React, cobrindo:

• O problema que motiva a extração de lógica
• Como criar um hook customizado
• Exemplo prático de uso

Closes #123

[gabrielduete]

(block): Ajuste no local do arquivo

Precisamos mover esse arquivo pra essa pasta: https://github.com/he4rt/react4noobs/tree/master/docs/Iniciando%20com%20React

E renomear ele pra 8.8-custom-hooks

[gabrielduete]

(nitpick): remover linha em branco (6 ou 7)

[gabrielduete]

(block): Antes disso, precisamos colocar o link para a próxima seção, tipo como é feito aqui: https://github.com/he4rt/react4noobs/blob/master/docs/Iniciando%20com%20React/8.3-useContext.md

[gabrielduete]

(block): Precisamos iniciar o state de loading como false. Se o hook for montado sem URL, o estado fica "carregando" pra sempre. Dá pra inicializar como false e só ativar dentro do fetchData.

Suggested change

	const [loading, setLoading] = useState(true);
	const [loading, setLoading] = useState(false);

OBS: Setar pra true dentro do fetchData

[gabrielduete]

(suggestion): Podemos usar early return nessa condição, vai ficar bem mais clean!

Atual

            if(!url){
                return;
            }else{
                fetchData(); //Se tiver URL ele chama a função
            }

Early return

         if (!url) return;
         
         fetchData();

Ou deixar o if (!url) no começo do arquivo mesmo. Vou deixar como exemplo no próximo comentário.

[gabrielduete]

(suggestion): Adicionar cleanup no useEffect pra evitar race condition

Como o useEffect dispara a cada mudança de url, requisições podem resolver fora de ordem, uma resposta antiga chega depois da nova e sobrescreve o data correto. Como é um tutorial, vale mostrar o padrão de cleanup, que é o jeito idiomático de lidar com isso:

useEffect(() => {
    if (!url) {
        setLoading(false);
        return;
    }

    let ignore = false; // flag: ignora resultado se o effect já foi limpo

    const fetchData = async () => {
        setLoading(true);
        setError(null);

        try {
            const respon
            }
            const json = await response.json();
            if (!ignore) setData(json);
        } catch (err) {
            if (!ignore) {
                setError(err.message);
                setData(null);
            }
        } finally {
            if (!ignore) setLoading(false);
        }
    };

    fetchData();

    // Cleanup: roda quando a url muda ou o componente desmonta
    return () => {
        ignore = true;
    };
}, [url]);

O let ignore = false + return () => { ignore = true } garante que só a requisição mais recente atualiza o estado.

Alternativa mais robusta seria AbortController pra cancelar o fetch de verdade, mas o ignore já resolve o problema visível e é mais simples de explicar para um iniciante.

[gabrielduete]

Opa, @dvbcknd! Tudo bem? O Artigo ficou muito bom!

Muito obrigado por contribuir! 💜

Deixei alguns comentários! Boa parte é bem simples, mas qualquer coisa pode falar! =)

[dvbcknd]

@gabrielduete obrigado pelos comentários. Vou verificar tudo e fazer as mudanças.