data.js

Daniel, abre o data.js comigo por cinco minutos.

Procura o React nele.

Não tem componente. Não tem hook. Não tem JSX. Não tem nem um import do React. É um arquivo .js com objeto, array e função — roda num Node, roda no console do navegador, roda em qualquer lugar.

Vamos por partes.

export const ana = {
    id: 1,
    name: "Ana Paula",
    username: "anapaula_dev",
    avatar: "https://..."
};

Objeto, exportado com nome. Igual aos temas do projeto anterior.

const allAuthors = [ana, bruno, carla, diego];

Array com os quatro objetos dentro. Não são cópias — é o mesmo ana de cima, referenciado aqui.

function mockComments(postId, count = 2) {

Função normal. O count = 2 é valor padrão: quem não passar o segundo argumento, recebe 2.

const author = allAuthors[Math.floor(Math.random() * allAuthors.length)];

Essa assusta, mas lê de dentro pra fora. Math.random() dá um número entre 0 e 1. Multiplica por 4, dá algo entre 0 e 4. Math.floor arredonda pra baixo, dá 0, 1, 2 ou 3. Isso vira o índice.

Sorteia um autor.

createdAt: new Date(Date.now() - Math.floor(Math.random() * 100000000)).toISOString(),

Mesma lógica. Date.now() é agora em milissegundos, subtrai um tanto aleatório, vira data, vira texto.

Sorteia uma data no passado.

O resto é um array de objetos, cada um com capa, título, slug, corpo, autor, likes e comentários.

Repara nessas três linhas

"author": ana,
"likes": randomLikes(),
"comments": mockComments(1, 3)

ana é objeto. randomLikes() é função sendo executada — os parênteses rodam ela ali e guardam o que voltou.

Você lembra do aoSubmeter={adicionarEvento}, sem parênteses?

Com parênteses, executa. Sem parênteses, passa a função. Os dois casos lado a lado, no mesmo arquivo, sem React no meio.

Sobre abrir um arquivo que você não escreveu

Você vai clonar repositório com anos de código de gente que nunca conheceu. Ninguém vai te dar aula sobre ele. Vai ter que abrir arquivo por arquivo e se virar.

A pessoa ao seu lado que parece saber tudo faz exatamente isso. Só que mais rápido, porque já fez muitas vezes.

E tem método:

Começa pelo que você reconhece, não pelo que te assusta. No data.js você reconhece objeto e array — aí já foram 80% do arquivo.

Roda o código. Abre o console, chama mockComments(1, 3), olha o que sai. Ver o resultado ensina mais rápido que ler a função.

Joga um console.log no meio. Ou um breakpoint no devtools, melhor ainda.

E não precisa entender tudo de primeira. Dev sênior também não entende. Ele só aguenta mais tempo sem saber.

Isso não melhora com mais curso. Melhora com repetição. Cada código estranho que você decifra deixa o próximo menos estranho.

Sobre o useAuth

Custom hook é uma função comum, que começa com use, e que por dentro usa outros hooks do React.

É isso. Não é API especial, não é categoria nova. É um jeito de tirar lógica de dentro do componente e deixar num lugar reaproveitável.

Escrevi um artigo sobre o papel deles na arquitetura, se quiser ir fundo: https://www.alura.com.br/artigos/papel-dos-hooks
Ou, se preferir vídeo: https://cursos.alura.com.br/extra/alura-mais/hooks-do-react-criando-hooks-personalizados-custom-hooks-c9212

Mas eu deixaria pra depois. Custom hook em cima de base instável vira mais uma camada de névoa.

O que eu faria no seu lugar

Pega os dois conteúdos de JavaScript que indiquei antes. Faz inteiros, com os exercícios.

Depois volta e abre o data.js de novo.

Você vai ler ele em cinco minutos.