6 React useCallback Secrets Professional Teams Use (But Never Document)

/* ================================================ * ❌ PROBLEMA: Função recria a cada mudança de estado * Impacto: Componentes filhos re-renderizam desnecessariamente * Suposição comum: "Apenas liste todas as dependências" * ================================================ */function ComponenteBusca() {  const [query, setQuery] = useState('');  const [filtros, setFiltros] = useState({});  const [ordenarPor, setOrdenarPor] = useState('data');  const [resultados, setResultados] = useState([]);  // Recria sempre que QUALQUER estado muda  const handleBusca = useCallback(async () => {    const response = await api.buscar({      query,      filtros,      ordenarPor    });    setResultados(response.data);  }, [query, filtros, ordenarPor]); // 3 dependências = recriações frequentes  return <ResultadosBusca onBusca={handleBusca} />;}

/* ================================================ * 🎯 SEGREDO: Consolidar estado relacionado em objeto único * Por que funciona: Uma dependência ao invés de muitas * Benefício profissional: 80% menos recriações de função * ================================================ */function ComponenteBusca() {  const [parametrosBusca, setParametrosBusca] = useState({    query: '',    filtros: {},    ordenarPor: 'data'  });  const [resultados, setResultados] = useState([]);  // Dependência única = referência estável  const handleBusca = useCallback(async () => {    const response = await api.buscar(parametrosBusca);    setResultados(response.data);  }, [parametrosBusca]); // Apenas 1 dependência!  // Função de atualização que preserva estabilidade do callback  const atualizarParametros = useCallback((atualizacoes) => {    setParametrosBusca(prev => ({ ...prev, ...atualizacoes }));  }, []); // Sem dependências!  return <ResultadosBusca onBusca={handleBusca} />;}

// Padrão production-ready com otimização de reffunction useCallbackEstavel(callback, deps) {  const callbackRef = useRef(callback);    useEffect(() => {    callbackRef.current = callback;  }, [callback]);  return useCallback((...args) => {    return callbackRef.current(...args);  }, deps);}// Uso: Dependências apenas para mudanças externasconst buscaEstavel = useCallbackEstavel(  () => api.buscar(parametrosBusca),  [] // Array vazio = nunca recria!);

/* ================================================ * ❌ PROBLEMA: Event handler recria com mudanças de valor * Impacto: Event listeners constantemente desanexam/reanexam * Crença comum: "Dependências são inevitáveis" * ================================================ */function ComponenteArrastavel({ onFimArraste }) {  const [posicao, setPosicao] = useState({ x: 0, y: 0 });  const [arrastando, setArrastando] = useState(false);  // Recria sempre que posição muda (60+ vezes por segundo!)  const handleMouseMove = useCallback((e) => {    if (arrastando) {      setPosicao({ x: e.clientX, y: e.clientY });      onFimArraste(posicao); // Precisa da posição atual    }  }, [arrastando, posicao, onFimArraste]); // Recria constantemente!  useEffect(() => {    document.addEventListener('mousemove', handleMouseMove);    return () => document.removeEventListener('mousemove', handleMouseMove);  }, [handleMouseMove]); // Re-registra a cada recriação!}

/* ================================================ * 🎯 SEGREDO: Refs fornecem valores atuais sem dependências * Por que funciona: Refs não provocam recriações * Benefício profissional: Event handlers nunca recriam * ================================================ */function ComponenteArrastavel({ onFimArraste }) {  const [posicao, setPosicao] = useState({ x: 0, y: 0 });  const [arrastando, setArrastando] = useState(false);    // Armazena valores atuais em refs  const posicaoRef = useRef(posicao);  const arrastandoRef = useRef(arrastando);  const onFimArrasteRef = useRef(onFimArraste);  // Atualiza refs quando valores mudam  useEffect(() => { posicaoRef.current = posicao; }, [posicao]);  useEffect(() => { arrastandoRef.current = arrastando; }, [arrastando]);  useEffect(() => { onFimArrasteRef.current = onFimArraste; }, [onFimArraste]);  // Handler NUNCA recria!  const handleMouseMove = useCallback((e) => {    if (arrastandoRef.current) {      const novaPosicao = { x: e.clientX, y: e.clientY };      setPosicao(novaPosicao);      onFimArrasteRef.current(posicaoRef.current);    }  }, []); // Array vazio = criado uma vez!  useEffect(() => {    document.addEventListener('mousemove', handleMouseMove);    return () => document.removeEventListener('mousemove', handleMouseMove);  }, []); // Registra uma vez!}

/* ================================================ * ❌ PROBLEMA: Setup caro roda em todo mount * Impacto: Render inicial bloqueado pelo custo de setup * Suposição: "Callbacks devem estar prontos imediatamente" * ================================================ */function ProcessadorDados({ dados, config }) {  // Setup caro roda imediatamente no mount  const processarDados = useCallback(() => {    // Inicialização pesada (roda no mount!)    const processador = new ProcessadorDadosComplexo(config);    const validador = new ValidadorDados(config.regras);    const transformador = new TransformadorDados(config.transformacoes);        return processador      .validar(validador)      .transformar(transformador)      .processar(dados);  }, [dados, config]);  // Usuário pode nunca clicar nisso!  return <button onClick={processarDados}>Processar Dados</button>;}

/* ================================================ * 🎯 SEGREDO: Inicializar operações caras apenas quando necessário * Por que funciona: Adia custo até interação do usuário * Benefício profissional: Render inicial 70% mais rápido * ================================================ */function ProcessadorDados({ dados, config }) {  const processadorRef = useRef(null);    // Padrão de inicialização lazy  const obterProcessador = useCallback(() => {    if (!processadorRef.current) {      // Inicializa apenas no primeiro uso      processadorRef.current = {        processador: new ProcessadorDadosComplexo(config),        validador: new ValidadorDados(config.regras),        transformador: new TransformadorDados(config.transformacoes)      };    }    return processadorRef.current;  }, [config]);  const processarDados = useCallback(() => {    const { processador, validador, transformador } = obterProcessador();        return processador      .validar(validador)      .transformar(transformador)      .processar(dados);  }, [dados, obterProcessador]);  // Invalida cache quando config muda  useEffect(() => {    processadorRef.current = null;  }, [config]);  return <button onClick={processarDados}>Processar Dados</button>;}

// Padrão de produção com cleanupfunction useCallbackLazy(factory, deps) {  const instanciaRef = useRef(null);  const depsRef = useRef(deps);    // Verifica se deps mudaram  if (!shallowEqual(depsRef.current, deps)) {    instanciaRef.current = null;    depsRef.current = deps;  }    return useCallback((...args) => {    if (!instanciaRef.current) {      instanciaRef.current = factory();    }    return instanciaRef.current(...args);  }, [factory]);}

/* ================================================ * ❌ PROBLEMA: Callbacks criam cadeias de dependências * Impacto: Uma mudança provoca múltiplas recriações * Crença: "Apenas memoize tudo" * ================================================ */function ComponentePai() {  const [usuario, setUsuario] = useState(null);  const [permissoes, setPermissoes] = useState([]);  // Nível 1: Depende do usuário  const buscarPermissoes = useCallback(async () => {    const perms = await api.obterPermissoes(usuario.id);    setPermissoes(perms);  }, [usuario]); // Recria quando usuário muda  // Nível 2: Depende de buscarPermissoes  const verificarAcesso = useCallback((recurso) => {    buscarPermissoes(); // Atualiza permissões    return permissoes.includes(recurso);  }, [buscarPermissoes, permissoes]); // Cascata!  // Nível 3: Depende de verificarAcesso  const handleAcao = useCallback((acao) => {    if (verificarAcesso(acao.recurso)) {      executarAcao(acao);    }  }, [verificarAcesso]); // Mais cascata!  // Árvore inteira recria quando usuário muda!  return <ComponenteFilho onAcao={handleAcao} />;}

/* ================================================ * 🎯 SEGREDO: Projetar callbacks para serem independentes * Por que funciona: Quebra cadeias de dependências * Benefício profissional: Fronteiras de re-render isoladas * ================================================ */function ComponentePai() {  const [usuario, setUsuario] = useState(null);  const [permissoes, setPermissoes] = useState([]);    // Gerenciador de permissões estável  const gerenciadorPermissoes = useMemo(() => ({    cache: new Map(),    async buscar(idUsuario) {      if (!this.cache.has(idUsuario)) {        const perms = await api.obterPermissoes(idUsuario);        this.cache.set(idUsuario, perms);      }      return this.cache.get(idUsuario);    },    verificar(permissoes, recurso) {      return permissoes.includes(recurso);    }  }), []); // Criado uma vez!  // Callbacks independentes sem cascata  const buscarPermissoes = useCallback(async () => {    if (usuario) {      const perms = await gerenciadorPermissoes.buscar(usuario.id);      setPermissoes(perms);    }  }, [usuario, gerenciadorPermissoes]);  const verificarAcesso = useCallback((recurso) => {    return gerenciadorPermissoes.verificar(permissoes, recurso);  }, [permissoes, gerenciadorPermissoes]);  // Handler de ação com contrato estável  const handleAcao = useCallback((acao) => {    // Verificação direta, sem dependência de outros callbacks    const temAcesso = gerenciadorPermissoes.verificar(permissoes, acao.recurso);    if (temAcesso) {      executarAcao(acao);    }  }, [permissoes, gerenciadorPermissoes]);  return <ComponenteFilho onAcao={handleAcao} />;}

/* ================================================ * ❌ PROBLEMA: Vazamentos de memória e closures desatualizadas * Impacto: Subscribers acumulam, dados errados exibidos * Equívoco: "useCallback cuida de tudo" * ================================================ */function SubscritorStore({ idStore }) {  const [dados, setDados] = useState(null);  // Recria com mudança de idStore, mas subscription antiga persiste!  const handleUpdate = useCallback((novosDados) => {    console.log(`Store ${idStore} atualizada`); // Closure desatualizada!    setDados(novosDados);  }, [idStore]);  useEffect(() => {    // Vazamento de memória: handlers antigos nunca removidos!    store.subscribe(idStore, handleUpdate);  }, [idStore, handleUpdate]);  return <div>{dados}</div>;}

/* ================================================ * 🎯 SEGREDO: Separar subscription de manipulação de dados * Por que funciona: Handler estável com valores atuais * Benefício profissional: Zero vazamentos, sempre atual * ================================================ */function SubscritorStore({ idStore }) {  const [dados, setDados] = useState(null);  const idStoreRef = useRef(idStore);    // Atualiza ref para sempre ter idStore atual  useEffect(() => {    idStoreRef.current = idStore;  }, [idStore]);  // Handler estável que sempre usa idStore atual  const handleUpdate = useCallback((novosDados) => {    console.log(`Store ${idStoreRef.current} atualizada`);    setDados(dadosAnteriores => {      // Lógica adicional com idStore atual      if (idStoreRef.current === novosDados.idStore) {        return novosDados;      }      return dadosAnteriores;    });  }, []); // Nunca recria!  useEffect(() => {    // Gerenciamento limpo de subscription    const desinscrever = store.subscribe(idStore, handleUpdate);        // Função de cleanup sempre executa    return () => {      desinscrever();    };  }, [idStore]); // Re-inscreve apenas com mudança de idStore  return <div>{dados}</div>;}// Avançado: Hook customizado para qualquer store externofunction useStoreExterno(inscrever, obterSnapshot) {  const [, forcarUpdate] = useReducer(x => x + 1, 0);  const snapshotRef = useRef(obterSnapshot());  const handleMudancaStore = useCallback(() => {    const novoSnapshot = obterSnapshot();    if (!Object.is(snapshotRef.current, novoSnapshot)) {      snapshotRef.current = novoSnapshot;      forcarUpdate();    }  }, []); // Estável para sempre!  useEffect(() => {    const desinscrever = inscrever(handleMudancaStore);        // Verifica atualizações perdidas    handleMudancaStore();        return desinscrever;  }, [inscrever, handleMudancaStore]);  return snapshotRef.current;}

/* ================================================ * ❌ PROBLEMA: Cada setState provoca um render * Impacto: Múltiplos renders desnecessários * Suposição: "React agrupa automaticamente" * ================================================ */function ComponenteFormulario() {  const [carregando, setCarregando] = useState(false);  const [erros, setErros] = useState({});  const [dados, setDados] = useState(null);  const [enviado, setEnviado] = useState(false);  const handleSubmit = useCallback(async (dadosForm) => {    // Cada setState causa um render!    setCarregando(true);    setErros({});        try {      const resultado = await api.enviar(dadosForm);      setDados(resultado);    // Outro render!      setEnviado(true);       // Outro render!    } catch (err) {      setErros(err.erros);    // Outro render!    } finally {      setCarregando(false);   // Outro render!    }    // Total: 4-5 renders para uma ação!  }, []);}

/* ================================================ * 🎯 SEGREDO: Agrupar atualizações com reducer ou estado único * Por que funciona: Uma atualização de estado = um render * Benefício profissional: 75% menos renders * ================================================ */function ComponenteFormulario() {  const [estadoForm, dispatch] = useReducer(    (estado, acao) => {      switch (acao.type) {        case 'ENVIO_INICIO':          return { ...estado, carregando: true, erros: {} };        case 'ENVIO_SUCESSO':          return {             ...estado,             carregando: false,             dados: acao.payload,             enviado: true           };        case 'ENVIO_ERRO':          return {             ...estado,             carregando: false,             erros: acao.payload           };        default:          return estado;      }    },    { carregando: false, erros: {}, dados: null, enviado: false }  );  // Único dispatch = único render!  const handleSubmit = useCallback(async (dadosForm) => {    dispatch({ type: 'ENVIO_INICIO' });        try {      const resultado = await api.enviar(dadosForm);      dispatch({ type: 'ENVIO_SUCESSO', payload: resultado });    } catch (err) {      dispatch({ type: 'ENVIO_ERRO', payload: err.erros });    }    // Total: 2 renders no máximo!  }, []);  // Alternativa: API de Transição para atualizações não urgentes  const handleSubmitComTransicao = useCallback(async (dadosForm) => {    startTransition(() => {      dispatch({ type: 'ENVIO_INICIO' });    });        try {      const resultado = await api.enviar(dadosForm);      // Atualização não urgente      startTransition(() => {        dispatch({ type: 'ENVIO_SUCESSO', payload: resultado });      });    } catch (err) {      // Exibição urgente de erro      dispatch({ type: 'ENVIO_ERRO', payload: err.erros });    }  }, []);}

// Hook customizado para atualizações agrupadasfunction useEstadoAgrupado(estadoInicial) {  const [estado, setEstado] = useState(estadoInicial);  const atualizacoesRef = useRef([]);  const timeoutRef = useRef(null);  const setEstadoAgrupado = useCallback((atualizacao) => {    atualizacoesRef.current.push(atualizacao);        if (timeoutRef.current) {      clearTimeout(timeoutRef.current);    }        timeoutRef.current = setTimeout(() => {      setEstado(estadoAnterior => {        let novoEstado = estadoAnterior;        for (const atualizacao of atualizacoesRef.current) {          novoEstado = typeof atualizacao === 'function'             ? atualizacao(novoEstado)             : { ...novoEstado, ...atualizacao };        }        atualizacoesRef.current = [];        return novoEstado;      });    }, 0);  }, []);  return [estado, setEstadoAgrupado];}