¿Redux o Context?

[frecall71]

¿Cuando usarlos?
¿Cuando escoger uno por sobre otro?
¿Por qué?
¿Para qué?

[matiasfha]

Disculpa la tardanza en contestar.
Es una buena pregunta y en realidad diría que depende de varios factores, pero en busca de simplificar revisemos cual es el objetivo de cada uno o sus casos de uso.

Context es la api nativa de React que permita comunicar componentes sin necesidad de pasar props entre ellos creando así un estado global a un cierto árbol de componentes. Es decir, todos los componentes que estén bajo el Provider del Context tendrán acceso estos datos o estado. Es una solución simple y elegante para administrar estados "client side" y una perfecta solución para el problema de prop-drilling. Es necesario? No del todo. Muchas veces el prop-drilling puede resolverse refactorizando el código reordenando los componentes para evitar la cascada.

Redux por su parte apareció hace ya varios años como una implementación de la arquitectura flux propuesta por Facebook para el manejo de estado (o datos) en React. Redux provee algunas utilidades que lo hacían diafrutable pero sobre todo sencillo de trabajar. Todo el estado global esta disponible en un único store y tus componentes pueden leer de ese store los trozos de estado que necesitan. Al mismo tiempo los componentes reaccionan al cambio de estado (ya que ese estado es pasado como props) renderizadose nuevamente. Si es necesario actualizar el estado envías una acción para requerir ese cambio.
El problema de redux es que comenzó a utilizarse como solución "para todo" creando mucho "boilerplate" generando problemas de mantenibilidad e incluso de performance pero no es un problema inherente a Redux si no más bien a su uso.

El caso de uso de Redux es para cuando hay un estado global (que se requiere en toda la App) y complejo pero por lo general no muchas app tienen un real estado global si no más bien tienen pequeños estados que son compartidos por algunas secciones de la aplicación.

Muchas librerías se crearon en busca de manejar todo con redux incluyendo formularios cuyos datos son solo usados en un solo componente. La idea era mantener los side effects fuera de la App (manejados por redux) incluyendo solicitudes a api externas.

En mi opinión, y sin conocer Redux Toolkit existen hoy nuevas herramientas que quizá son mucho más eficaces o simples de implementar como react-query para manejar cache de datos externos o mobx-state-tree para el estado global.

Además estas herramientas no necesariamente se ven enfrentadas, si no, pueden usarse en conjunto dejando Context para pequeños estados pseudo-globales y Redux (u otra) para manejar las solicitudes a alguna API.

Finalmente te comparto un artículo al respecto https://matiashernandez.dev/no-necesitas-redux/