useCallback

O useCallback é um Hook que retorna uma versão memorizada de uma função (callback) que só muda se uma das suas dependências for alterada.

---

Como funciona?

Ele evita que funções sejam recriadas a cada renderização do componente pai, o que é crucial quando passamos funções para componentes filhos que utilizam React.memo ou quando a função é usada como dependência em outros Hooks.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

---

Quando usar?

1. Passagem de funções para componentes filhos otimizados: Se um componente filho usa React.memo e recebe uma função via prop, essa função deve ser memorizada com useCallback para evitar renderizações desnecessárias.
2. Dependências de outros Hooks: Se você define uma função que será usada dentro de um useEffect, memorizá-la evita que o efeito rode em todo ciclo de renderização.

Exemplo de Uso:

function UserListRaw({ onItemPress }: { onItemPress: (id: string) => void }) {
  // Este componente só re-renderiza se onItemPress mudar
  return <FlatList data={[]} renderItem={() => null} onSelected={onItemPress} />;
}

const UserList = React.memo(UserListRaw);

// No componente Pai
function ParentComponent() {
  const handlePress = useCallback((id: string) => {
    console.log('Selecionado:', id);
  }, []); // Nunca muda

  return <UserList onItemPress={handlePress} />;
}

---

Quando NÃO usar?

1. Componentes simples: Não use useCallback em todas as funções. Se o componente filho não for otimizado com React.memo, o custo de criar a função memorizada pode ser maior que o benefício.
2. Funções internas de handlers: Se a função é usada apenas dentro do próprio componente e não é passada para frente, não há necessidade de memorização.

---

Melhores Práticas

• Dependências corretas: Sempre inclua todas as variáveis externas usadas dentro da função no array de dependências.
• Não abuse: A memorização tem um custo de memória. Use-a apenas quando houver um benefício claro de performance ou correção lógica.