Não ficou clara a definição de Stateful e Stateless

Olá, Vitor! Tudo bem?

Ambos os componentes, Stateful e Stateless, possuem a parte visual (JSX), certo?

Outro ponto importante é que no React, componentes possuem algo chamado estado. O estado, basicamente, é um conjunto de dados que podem variar durante a existência do componente. Por exemplo, temos um componente de Input, esse componente possui um estado que é o valor digitado, ou seja, é uma variável que guarda o valor digitado. Esse valor digitado começa vazio, certo? O usuário não digitou ainda. Conforme o usuário digita, a variável precisa ser atualizada.

Entretanto, essa mesma variável é usada para mostrar ao usuário o valor digitado até então, para ele ver o que está digitando. A diferença entre uma variável comum e uma variável de estado é que a variável de estado, sempre que atualizada, precisa também atualizar o que o componente está retornando, o HTML que o React entrega. Então, uma atualização de estado = uma atualização da DOM (que chamamos de rerender).

A diferença é que o Stateless carrega essa parte visual, e uma vez entregue, nada vai mudá-la, exceto se ele recebe algo via props. No caso de props, o que faz com que o componente continue sendo Stateless é que o estado não é dele, mas do componente que passou as props, porque quando o estado for atualizado, é o componente-pai que atualiza, e todos os componentes-filhos, por consequência, atualizam também, incluindo esse que recebeu o estado via props.

Enquanto isso, o Stateful possui o estado nele mesmo. Se esse estado é atualizado, o componente é atualizado, porque no fim das contas em qualquer momento que você olhar para um componente, ele é estático. A diferença é que um componente Stateful é como um filme, ele possui vários "frames", sempre que algo muda, ele recarrega com o novo "frame". Já o Stateless (se ignorarmos a possibilidade de props por um momento apenas para a comparação funcionar) é como uma foto, ou seja, apenas um "frame", que não vai ser trocado porque nada dentro dele dispara uma mudança para o próximo "frame".

Resumindo, os componentes stateful estão monitorando dados internos que ele precisa desencadear uma atualização caso sejam alterados. Esses dados geralmente são atualizados por ações do usuário, ou por uma API (back-end). Já os componentes stateless não possuem esse comportamento.

Espero que tenha entendido, qualquer coisa avise! Bons estudos