Peço desculpas pela frustração! Você está certo, o erro "Maximum update depth exceeded" é um sinal claro de que estamos presos em um ciclo de re-renderizações, provavelmente devido à forma como o estado está sendo atualizado em useEffect ou em resposta a mudanças de props.

Vamos tentar uma abordagem mais simplificada e robusta para gerenciar o estado do ano e mês, focando em ter uma única fonte da verdade em app/page.tsx e garantindo que os componentes filhos não causem atualizações de estado em loop.

Principais Pontos da Refatoração:

1. Centralização do Estado de Data em app/page.tsx: currentDisplayYear e currentDisplayMonth serão gerenciados exclusivamente aqui.
2. useEffect em app/page.tsx para Validar Ano: Este useEffect será o único responsável por garantir que currentDisplayYear seja sempre um ano válido presente em yearsFromStore. Ele só chamará setCurrentDisplayYear se for estritamente necessário.

3. CardListItem.tsx Simplificado:

   • Não terá estado local para ano/mês de exibição.
   • Usará as props currentDisplayYear e currentDisplayMonth diretamente.
   • Suas ações de navegação (setas de mês, seletor de ano) chamarão as funções onYearChange e onMonthChange passadas de app/page.tsx, que atualizam o estado global.
   • O seletor de ano dentro do CardListItem ainda usará uma lista de anos específica para aquele cartão (cardSpecificAvailableYears) para suas opções, mas ao selecionar, ele modificará o estado global.

Vamos aplicar essas mudanças.

Resumo das Mudanças:

• app/page.tsx:

  • A inicialização de currentDisplayYear agora considera yearsFromStore para começar com um ano válido.
  • O useEffect que valida currentDisplayYear foi mantido, mas a dependência setCurrentDisplayYear foi removida (pois é uma função estável e o linter pode reclamar, mas não é a causa do loop aqui; o importante é a condição if (newValidYear !== currentDisplayYear)).
  • As funções de manipulação de data (handleYearChange, handleMonthChange, etc.) foram envolvidas em useCallback para estabilizá-las, o que é uma boa prática quando passadas como props.
  • A navegação global de mês/ano agora atualiza o estado de forma mais direta e confia no useEffect para corrigir o ano se ele sair do intervalo válido.
  • Passa currentGlobalYear, currentGlobalMonth, onGlobalYearChange, onGlobalMonthChange, e globalAvailableYears (que é yearsFromStore) para CardListItem.

• components/card-list-item.tsx:

  • Recebe as props globais de data e os handlers (currentGlobalYear, currentGlobalMonth, onGlobalYearChange, onGlobalMonthChange).
  • Não tem mais estado local para o ano/mês de exibição.
  • cardSpecificAvailableYears é calculado com useMemo baseado nas parcelas deste cartão específico e é usado para popular as opções do seletor de ano dentro do card.
  • Quando o usuário interage com os controles de data dentro do card (setas de mês, seletor de ano), as funções onGlobalYearChange e onGlobalMonthChange (recebidas como props) são chamadas para atualizar o estado global em app/page.tsx.
  • InstallmentDisplay usa currentGlobalYear e currentGlobalMonth para buscar e exibir as parcelas.

Essa abordagem visa eliminar qualquer conflito de estado entre o componente pai (InstallmentsPage) e o filho (CardListItem) em relação à data de exibição, que é uma causa comum de loops de renderização. A fonte da verdade para a data de exibição é sempre app/page.tsx.

Por favor, teste esta versão. Estou confiante de que esta refatoração resolverá o problema do loop de atualização.

Você está absolutamente correto em apontar a persistência do erro. Peço desculpas por isso. O erro "Maximum update depth exceeded" é realmente teimoso e indica que a causa raiz do loop de re-renderização ainda não foi totalmente eliminada.

A principal suspeita recai sobre como o array yearsFromStore (derivado de state.getAvailableYears()) está sendo tratado como uma dependência no useEffect em app/page.tsx. Se getAvailableYears() retorna uma nova instância de array a cada renderização (mesmo que os números dentro do array sejam os mesmos), o useEffect será acionado desnecessariamente, podendo levar a um ciclo de chamadas setState.

Para resolver isso, vamos usar a função shallow do Zustand. Ela permite que o useAppStore faça uma comparação superficial do array, de modo que o componente só seja re-renderizado se o conteúdo do array realmente mudar, e não apenas a sua referência.

Mudanças principais:

1. Em app/page.tsx:

   • Importar shallow de zustand/shallow.
   • Usar shallow ao selecionar yearsFromStore: useAppStore((state) => state.getAvailableYears(), shallow).
   • Revisar as dependências dos useCallback para garantir que sejam mínimas e corretas.
   • Garantir que o useEffect que valida currentDisplayYear só chame setCurrentDisplayYear se o valor realmente precisar mudar.

Vamos aplicar essas correções:

Principais alterações:

• app/page.tsx:

  • yearsFromStore agora usa shallow na sua seleção do store: useAppStore((state) => state.getAvailableYears(), shallow). Isso é crucial para que a referência do array yearsFromStore só mude se o seu conteúdo mudar.
  • As dependências dos useCallback foram revisadas para serem mais precisas.
  • A lógica de exibição da navegação global de mês/ano foi ajustada para ser mostrada também quando não há cartões na visualização de cartões, permitindo ao usuário definir uma data antes de adicionar o primeiro cartão.

• components/card-list-item.tsx:

  • installmentsForCard agora também usa shallow para estabilizar sua referência: useAppStore((state) => state.installments.filter(...), shallow). Isso garante que useMemo para cardSpecificAvailableYears só recalcule quando as parcelas relevantes realmente mudarem.
  • A lógica de fallback para cardSpecificAvailableYears foi melhorada para usar globalAvailableYears se o cartão específico não tiver parcelas, garantindo que o seletor de ano dentro do cartão sempre tenha opções razoáveis.

Acredito que com o uso de shallow para os seletores de arrays do Zustand, a estabilidade das referências de yearsFromStore e installmentsForCard será garantida, o que deve quebrar o ciclo de re-renderizações e resolver o erro "Maximum update depth exceeded".

Por favor, teste esta versão. Estou mais otimista de que esta abordagem resolverá o problema.