Skip to content

Declaração de Funções

Para manter a consistência e clareza em todo o projeto, adotamos um padrão estrito para a declaração de funções.

1. Regra de Ouro

Nunca utilize const minhaFuncao = () => { ... } para declaração de funções de nível superior ou componentes. Sempre utilize a palavra-chave function diretamente na declaração.

Por que?

  1. Hoisting: Funções declaradas com function sofrem hoisting completo, permitindo uma organização mais flexível do código.
  2. Identificação: Facilita a leitura e identificação rápida de blocos de lógica no arquivo.
  3. Traceability: Em stack traces de erro, funções nomeadas via declaração são mais fáceis de identificar do que constantes anônimas.

2. Exemplos de Uso

Certo (Componentes e Telas)

tsx
export function HomeScreen() {
    return <Box>...</Box>;
}

Errado

tsx
export const HomeScreen = () => {
    return <Box>...</Box>;
};

Certo (Ações e Utilitários)

typescript
export async function getUserAction(id: string) {
    // ...
}

export function calculateArea(radius: number) {
    // ...
}

Errado

typescript
export const getUserAction = async (id: string) => {
    // ...
};

3. Funções de Callback e Inline

Para funções passadas como argumento (callbacks em map, filter, onPress), o uso de arrow functions é permitido para manter a concisão, desde que a lógica seja simples.

tsx
<Button
  onPress={function handlePress() {
    doSomething();
  }}
/>

// OU (apenas se for muito simples)

<Button onPress={() => doSomething()} />

Preferência: Mesmo em callbacks de eventos de UI, prefira funções nomeadas com function para facilitar o debug.