Como prevenir bugs bobos e até melhorar a performance da aplicação

Já percebeu que há três formas diferentes de chamar uma função usando o onClick no React? Já ficou na dúvida se precisava passar os parênteses ou não? Se sim, esse post vai te salvar e ainda te deixar pronto pra criar qualquer formulário por aí usando React.

Imagina que você tá jogando um RPG e precisa ativar uma habilidade. Você pode:

1. Equipar a habilidade
2. Usar ela direto, ou 
3. Usar ela com um item especial.

No React, o onClick funciona quase do mesmo jeito.

1. onClick={handleFunction}

Quando usamos onClick={handleFunction}, é como se você deixasse a habilidade equipada, pronta pra ser usada. Mas ela só ativa quando você realmente clica. Ou seja, a função só é chamada quando o clique acontece. Esse é o modo mais leve e indicado quando você não precisa passar parâmetros.

Exemplo:

const handleClick = () => console.log("Clicou!");
<button onClick={handleClick}>Clique aqui</button>

2. onClick={handleFunction()}

Já quando você escreve onClick={handleFunction()}, é como se você usasse a habilidade assim que entra na batalha. Ou seja, ela já foi ativada antes mesmo de clicar! Isso acontece porque os parênteses fazem a função ser executada na hora em que o componente renderiza, não quando você clica. Então nesse caso, o clique não serve pra nada. A função já rolou antes.

Ou seja: evita isso se a intenção for executar só no clique.

<button onClick={handleClick()}>
   Nem precisa clicar, já executou...
</button>

3. onClick={() => handleFunction(data)}

Agora, quando você precisa ativar sua função com um item especial, tipo passar um ID, um dado, ou algo assim, você vai precisar usar uma arrow function: onClick={() => handleFunction(params)}. Aqui você tá dizendo: “Quando clicar, aí sim, execute essa função com esse dado específico”. Ou seja, isso é necessário quando você quer passar parâmetros. 

Exemplo:

const handleDelete = (id: number) => console.log(`Deletando ${id}`);
<button onClick={() => handleDelete(5)}>Deletar</button>

Mas calma, não use dessa forma sem necessidade! Sempre que você escreve uma função dentro do JSX com arrow function () => ..., ela é criada novamente a cada renderização do componente. Se for algo muito frequente, pode impactar um pouco a performance.

Por isso, só usa essa forma quando for necessário mesmo, geralmente quando você precisa passar dados. Se não for o caso, usa direto a referência da função (onClick={handleFunction}), que é mais leve e eficiente.

Entender isso evita bugs bobos e ainda melhora a performance do seu componente. Pode parecer um detalhe, mas faz diferença, principalmente quando seu componente começa a crescer e ganhar novas responsabilidades. Então quando for equipar uma nova função com onClick, use no momento certo e escolha o item correto!