Modelo de reactividad con Signals

Angular Signals es un sistema que rastrea de forma granular cómo y dónde se usa su estado en una aplicación, lo que permite que el marco optimice las actualizaciones de renderizado.

¿Qué son las signals?
Una signal es un envoltorio alrededor de un valor que notifica a los consumidores interesados ​​cuando ese valor cambia. Las signals pueden contener cualquier valor, desde primitivas simples hasta estructuras de datos complejas.

El valor de una signal se lee llamando a su función getter, que permite a Angular rastrear dónde se utiliza la signal.

Las signals pueden ser de escritura o de sólo lectura.

no se si es mi pc pero cuando realizo cambios en el codigo no se reflejan en muchas ocasiones en el front y me toca reiniciar el servidor... esto desde la instalacion de angular 17

Angular introdujo **Signals** en la versión **v16**, lanzada en mayo de 2023

Justo hace unas semanas revisaba este tema pero para React. Se menciona que en React que cuando no trabajas con variables primitivas debes de tener cuidado cómo gestionas el estado ya que puede generar conflictos o reducir el rendimiento de la aplicación. ¿Por qué pasa esto en React y no en Angular al trabajar la Reactividad con variables no primitivas? Encontré esto: La diferencia en la gestión de estado y reactividad entre React y Angular se debe a cómo cada framework maneja la reactividad y las referencias a objetos no primitivos (como arrays y objetos) en su flujo de trabajo. ### React: Inmutabilidad y Referencias En React, la reactividad está fuertemente ligada al concepto de **inmutabilidad** y cómo el framework detecta cambios en el estado para re-renderizar componentes. * **Inmutabilidad**: React utiliza la referencia de las variables para determinar si un componente debe ser re-renderizado. Si cambias directamente el contenido de un objeto o array (mutación), la referencia no cambia, y React no detectará que hubo un cambio, por lo que el componente no se actualizará. * **Ejemplo**: Si usas `array.push()` para añadir un elemento a un array en el estado, React no detectará el cambio porque la referencia del array sigue siendo la misma. * **Problemas de Rendimiento**: Si no se sigue el patrón de inmutabilidad, React podría perder actualizaciones necesarias o incluso desencadenar re-renderizados innecesarios, afectando negativamente el rendimiento. Es por eso que en React, cuando trabajas con objetos o arrays, es común crear una nueva referencia mediante métodos como `concat()`, `slice()`, o el operador de propagación (`...`), para que React detecte que algo ha cambiado. ### Angular: Cambio de Detección y Observables Angular maneja la reactividad de una manera diferente debido a su mecanismo de **detención de cambios** y el uso de **observables**. * **Detección de Cambios**: Angular realiza un proceso de detección de cambios (Change Detection) donde compara el estado del modelo de datos con el DOM. Angular se basa en un ciclo de detección que detecta cambios tanto en las variables primitivas como en las no primitivas, incluso si la referencia no cambia. * **Ejemplo**: En Angular, si mutas un array directamente, Angular detecta el cambio debido a su estrategia de detección de cambios, y el componente se actualizará automáticamente. * **Reactividad con Observables**: Angular también utiliza observables y RxJS para gestionar la reactividad de manera declarativa. Esto permite manejar flujos de datos asincrónicos y complejos sin preocuparse tanto por la inmutabilidad. ### Resumen de las Diferencias * **React**: Depende de la inmutabilidad y referencias para la reactividad. Los cambios de estado en objetos no primitivos deben crear nuevas referencias para que React los detecte. Esto hace que sea importante gestionar adecuadamente el estado para evitar problemas de rendimiento. * **Angular**: Utiliza detección de cambios, que no depende de la inmutabilidad de las referencias de objetos. Angular puede detectar mutaciones en objetos y arrays incluso sin cambiar la referencia, lo que simplifica la gestión del estado, aunque puede tener un costo de rendimiento si no se gestiona adecuadamente.

Super interesante esto de signals, es primera vez que interactúo con un lógica como esta !

Excelente explicación, la mejor manera de tenerlo en cuenta para nuestras siguientes clases