Função dentro do componente

Fala Antonio, tudo certo?

Então, no contexto deste curso realmente não foi uma boa prática pois esta função vai ser recriada sempre que o componente renderizar novamente, mas isto não significa que você não pode colocar uma função dentro de um componente.

Caso você coloque uma função fora do componente, você não vai ter acesso a nenhuma função dentro do componente, tudo teria que ser passado via param, como o aoEnviar e o validarCPF por exemplo, e caso você tenha várias coisas para passar via params isso pode ficar bem pesado, e não é isso que a gente quer, certo?

Uma solução para isto é utilizar uma função chamada useCallback, ela memoriza o estado atual da função e só muda ela se algum item de fora que você escolher mudar, essa função ficaria assim:

    const formularioAtual = useCallback(() => {
        switch(etapaAtual) {
          case 0:
            return <DadosUsuario />
          case 1:
            return <DadosPessoais aoEnviar={aoEnviar} validarCPF={validarCPF}/>
          case 2:
            return <DadosEntrega />
          default:
            return <Typography> Erro ao selecionar formulário </Typography>
        }
    }, [etapaAtual])

Caso você não esteja familiarizado com o hook useEffect, você não vai entender muito esta sintaxe, então vou dar mais detalhes aqui. Este hook (assim como em vários outros) aceita 2 parâmetros.

1. a função que você deseja executar.
2. um array com todas as dependências externas que você gostaria que afetasse essa função.

No caso do useEffect por exemplo, o segundo parâmetro define quando esta função vai rodar novamente. No caso do useCallback, ela define quando que a sua função deverá ser escrita do 0 novamente, e no nosso caso como a função está sendo executada no return, ela sempre irá executar independente de ter useCallback ou não.

Caso tenha alguma dúvida sobre este ou outro tema fique a vontade para responder este tópico ou criar outro!

Bons estudos!