Como tratar erros em Functional Components no React?

Olá Jonatãn, tudo certo?

Então, o Error Boundary era muito utilizado no aspecto do class components por conta da função componentDidCatch, pois como existiam muitas funções e muitos lugares poderiam "quebrar" o seu código, isto era muito mais difícil de lidar. Mas com a ascensão dos hooks, isto ficou muito mais fácil pois todas aquelas funções se transformaram em useEffects, useLayoutEffects etc. Com isto é mt mais fácil criar um hook para criar este erro e resolvê-lo com um catch, por exemplo. Na documentação sobre error boundary já mostra que, caso você queira verificar um erro em uma ação por exemplo, você pode envolvê-lo em um try/catch:

    try {
      showButton();
    } catch (error) {
      // ...
    }

Ou caso você queira mostrar este erro na tela, você pode utilizar um setState neste catch e renderizá-lo assim:

    return (
        <>
            {error ? <h1> capturei um erro! </h1> :
            (
                ...
            )}
        </>
    )

Ou até mesmo antes do return, quem sabe?

    if (error) {
        return <h1> capturei um erro! </h1>
    }
    return (
        ...
    )

Se você quer colocar este erro em um console, pode utilizar o throw ou o console.error, que são bem parecidos mas o throw pode ser tratado no meio do código, já o console não.

Caso tenha alguma outra dúvida/curiosidade fique a vontade para continuar este tópico ok?

Bons estudos! :D