flutter_hooks + signal_hook + store (how to?)

[prf-alissonprimo]

I’m using Flutter Hooks with Signal Hooks, and I organize my app with one store per feature. Inside my widgets, I use useExistingSignal to import read-only signals from the store, and useComputed to filter the data.

The issue I’m encountering is that when I create another useComputed based on an existing useComputed, it doesn’t react as expected—the dependent data doesn’t update properly.

Store

class ConsultasStore {
  final consultasService = ConsultaBaseService();
  final renachService = ConsultaRenachService();
  final ufsPassagemService = ConsultaUfsPassagemService();
  final consultaMotorDticService = ConsultaMotorDticService();
  final consultaFiscalizacaoDetalhadaService =
      ConsultaFiscalizacaoDetalhadaService();

  final searchText = signal('');

  final _contextosConsultas = signal<List<ContextoConsulta>>([]);
  late final contextosConsultas = computed(() => _contextosConsultas.value);

Widget

class ConsultaHeader extends HookWidget {
  final String chaveConsulta;
  final bool showCloseButton;
  final bool showExpandButton;
  final VoidCallback? onClose;
  final VoidCallback? onExpand;
  final VoidCallback? onDelete;

  final int? quantidadeVeiculos;

  const ConsultaHeader({
    super.key,
    required this.chaveConsulta,
    this.showCloseButton = false,
    this.showExpandButton = true,
    this.onClose,
    this.onExpand,
    this.onDelete,

    this.quantidadeVeiculos,
  });

  @override
  Widget build(BuildContext context) {
    final contextosConsultas = useExistingSignal(
      consultasStore.contextosConsultas,
    );

    final contextoConsulta = useComputed(() {
      return contextosConsultas.value
          .where((c) => c.id == chaveConsulta)
          .firstOrNull;
    });

    final consultaBaseResponse = useComputed(() {
      final consulta = contextoConsulta.value;
      if (consulta == null) {
        return null;
      }
      return consulta.consultaBaseResponse;
    });

    final restricoes = useComputed(() {
      final contexto = contextosConsultas.value
          .where((c) => c.consultaBaseResponse.chave == chaveConsulta)
          .firstOrNull;

      return _calcularRestricoes(contexto);
    });

  final isCardLoading = useComputed(() {
        final consulta = contextosConsultas.value
            .where((c) => c.consultaBaseResponse.chave == chaveConsulta)
            .firstOrNull;
  
        if (consulta == null) return false;
  
        final isLoading =
            consulta.fotoRenachBuscando ||
            consulta.ufsPassagemBuscando ||
            consulta.consultaMotorDticBuscando ||
            consulta.fiscalizacaoDetalhadaBuscando;
  
        return isLoading;
      });

That's the only way I could make it work... But when I use "contextoConsulta" in "restricoes" and "isCardLoading" it does not work.

[prf-alissonprimo]

That's another way that worked, but I still don't know if it's a good practice. Since I come from Angular it seems a little bit odd.

class ConsultaHeader extends HookWidget {
  final String chaveConsulta;
  final bool showCloseButton;
  final bool showExpandButton;
  final VoidCallback? onClose;
  final VoidCallback? onExpand;
  final VoidCallback? onDelete;

  final int? quantidadeVeiculos;

  const ConsultaHeader({
    super.key,
    required this.chaveConsulta,
    this.showCloseButton = false,
    this.showExpandButton = true,
    this.onClose,
    this.onExpand,
    this.onDelete,

    this.quantidadeVeiculos,
  });

  @override
  Widget build(BuildContext context) {
    final contextosConsultas = useExistingSignal(
      consultasStore.contextosConsultas,
    );

    /// Retorna o contexto específico para esta consulta
    final contextoConsulta = contextosConsultas.value
        .where((c) => c.id == chaveConsulta)
        .firstOrNull;

    // Computed que retorna a entidade da consulta
    final consultaBaseResponse = contextoConsulta?.consultaBaseResponse;

    // Computed que retorna a quantidade de restricoes
    final restricoes = _calcularRestricoes(contextoConsulta);

    /// Computed que verifica se há loading específico para este card
    /// Computed para verificar se há alguma operação em loading
    final isCardLoading =
        contextoConsulta?.fotoRenachBuscando == true ||
        contextoConsulta?.ufsPassagemBuscando == true ||
        contextoConsulta?.consultaMotorDticBuscando == true ||
        contextoConsulta?.fiscalizacaoDetalhadaBuscando == true;