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?
- Hoisting: Funções declaradas com
functionsofrem hoisting completo, permitindo uma organização mais flexível do código. - Identificação: Facilita a leitura e identificação rápida de blocos de lógica no arquivo.
- 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.