¿Cómo modelarías estado derivado y efectos secundarios para no llenar la app de `subscribe()` manuales?

"¿Cómo modelarías estado derivado y efectos secundarios para no llenar la app de subscribe() manuales?" toca un punto muy concreto de Angular: cómo tomar decisiones de gestión de estado sin esconder el problema bajo una abstracción vistosa.

Una respuesta senior se nota cuando nombras qué riesgo quieres reducir con gestión de estado en Angular para "Cómo modelarías estado derivado y efectos secundarios para no llenar la app de subscribe() manuales", qué concesión aceptarías frente a signals y qué comprobarías antes de extender la decisión a todo el sistema.

Qué evalúa el entrevistador

• Si distingues qué parte de "Cómo modelarías estado derivado y efectos secundarios para no llenar la app de subscribe() manuales" pertenece a gestión de estado y cuál debería resolverse en signals.
• Si conviertes la respuesta en criterios observables: límites claros, impacto en el mantenimiento y forma de detectar regresiones.
• Si identificas la fuente de verdad, el estado derivado y los puntos donde podría aparecer sincronización manual o duplicada.

Respuesta sólida

• Nombra primero la fuente de verdad y deja claro qué datos deberían derivarse en vez de almacenarse dos veces.
• Explica dónde viviría cada pieza de estado: local si solo afecta a una interacción, compartido si cruza componentes y remoto si depende del servidor.
• Añade cómo evitarías sincronizaciones manuales, renders accidentales y errores por datos obsoletos.

Compromisos y errores comunes

• Duplicar estado entre store, formularios, URL o caché acaba generando inconsistencias que son difíciles de reproducir.
• Mover demasiado pronto una preocupación al estado global hace visible el problema, pero no lo arregla.

Ejemplo de código

Este fragmento sirve para bajar "Cómo modelarías estado derivado y efectos secundarios para no llenar la app de subscribe() manuales" a código ejecutable y mostrar qué decisiones conviene hacer explícitas cuando gestión de estado empieza a cruzarse con signals.

import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';

@Component({
  selector: 'app-product-filter',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <input [value]="query()" (input)="query.set(($any($event.target)).value)" />
    <ul>
      @for (product of filteredProducts(); track product.id) {
        <li>{{ product.name }}</li>
      }
    </ul>
  `,
})
export class ProductFilterComponent {
  readonly query = signal('');
  readonly products = signal([{ id: 1, name: 'Angular' }, { id: 2, name: 'RxJS' }]);
  readonly filteredProducts = computed(() =>
    this.products().filter((product) =>
      product.name.toLowerCase().includes(this.query().trim().toLowerCase()),
    ),
  );
}

Fíjate en que el ejemplo deja claras las fronteras de "Cómo modelarías estado derivado y efectos secundarios para no llenar la app de subscribe() manuales", nombra los estados relevantes y evita trabajo implícito que luego cuesta depurar.

Ejemplo o caso real

La forma seria de aterrizar "Cómo modelarías estado derivado y efectos secundarios para no llenar la app de subscribe() manuales" es escoger un caso con usuarios reales, un criterio de éxito visible y una superficie de rollback pequeña. Eso obliga a hablar de impacto, no de dogmas, y evita convertir gestión de estado en arquitectura ornamental.

Frase corta de entrevista

Primero aclaro qué problema resuelvo con gestión de estado y luego elijo la técnica; no al revés.