Share this page!

Matías Hernández Arellano Profile picture
Twitter logo
24 Apr, 12 tweets, 4 min read
Al escribir componentes React.
¿Cuando decides usar useReducer en vez de useState?

En general puedes usar reducers siempre, técnicamente useState es una versión simplificada de useReducer.

¿Por que usar useReducer?
Si bien se ve más complejo usarlo te da grandes ventajas
La primera ventaja es encapsulacion y abstracción.
useReducer utiliza una función reducer que vive fuera del componente no siendo afectada por los re-renders y además simplifica tu código por que AISLA la lógica de estado en una función.
Otra ventaja es que puedes manejar estados más complejos con lógicas de actualización diferente y de manera "atómica".
La función reducer recibe el estado actual y un objeto que comúnmente llamamos acción.
Dependiendo de la acción la función retornará un nuevo estado.
Esta simple definición te permite modificar estados complejos en base a diferentes acciones o "eventos" quitando la logia de actualización desde el componente.
Cuando usas useState suele ser para estados simples y no interrrlacionados. Además la lógica de actualización (las llamadas a tu setState) ocurren directamente en el componente.
Pero volviendo a la primera pregunta

¿Cuando usar useReducer?
No hay una regla particular pero una buena "rule of thumb" es que si tu componente tiene 3 /4 o más useState te verás beneficiado de usar useReducer aún más si es5os estados son dependientes.
Ahora bien si tienes un estado tan complejo probablemente hay otro problema de modelado del estado o de composición de componentes. Es un "code smell".
Por último otra ventaja al usar useReducer es que te permite crear patrones más complejos como "State Reducer" permitiendote ofrecer una API flexible a tu usuario.
Te invito a ver esta lección en @eggheadio
egghead.io/lessons/react-…
Finalmente conocer y utilizar hooks más complejos te permite implementar componentes "avanzados" como en este curso en @eggheadio

egghead.io/courses/hooks-…

This course is also available in Enlighs 🇺🇸
egghead.io/courses/build-…
Si quieres saber más de React, javascript y desarrollo web unete al newsletter MicroBytes!!
El curso "React desde 0" esta pronto a ser publicado.
microbytes.matiashernandez.dev
Y sígueme en Twitter para saber sobre más contenido
Si prefieres leer el hilo de otra forma quizá más cómoda
threadreaderapp.com/thread/1385988…
Here is the English version of the thread 🇺🇸🇺🇸

And the unrolled version too

threadreaderapp.com/thread/1385994…

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Matías Hernández Arellano

Matías Hernández Arellano Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @matiasfha

Matías Hernández Arellano Profile picture
24 Apr
When writing React.

How do you decide to use useReducer instead of useState?

In general you can always use reducers, technically useState is a simplified version of useReducer.

But then, Why use useReducer?

Although it looks more complex, using it gives you great advantages.
The first advantage is encapsulation and abstraction.
useReducer uses a reducer function that lives outside of the component and is not affected by re-renders. It also simplifies your code by ISOLATING the state logic in a function.
Another advantage is that you can handle more complex states with different update logics and in an "atomic" way.
The reducer function receives the current state and an object that we commonly call an action.
Depending on the action, the function will return a new state.
Read 9 tweets
Matías Hernández Arellano Profile picture
22 Apr
Becoming an @eggheadio instructor is for sure the biggest achievement in my career as dev.
I was just talking about this very same topic with @RealChrisSean and now I see that I been featured

egghead.io/blog/matias-he…
Becoming an instructor gave so much confident and encouragement to move forward that I now have two podcasts @cafe_contech and @ControlRemoto7 had the honor of became and @Auth0Ambassador and @MediaDevs, write for @freeCodeCamp and @freecodecampES...
Been accepted on @draftdev and been able to write for other publications (not yet published) and also land a pretty good job at @Clevertech.
Read 6 tweets
Matías Hernández Arellano Profile picture
18 Apr
Hablemos de "State management" y porqué es "complejo".

¿Que es el estado de una App?

En una versión muy simple estado son datos que cambian en el tiempo y que usamos para definir que se muestra o no al usuario.

Pero: ¿de donde vienen esos datos?
Esta pregunta es quiza la "piedra angular" para un modelo mental sobre el manejo de estado.
No todo el estado es igual ni proviene de las mismas fuentes.
Podemos definir a lo menos 2 categorías de estado
- UI state
- Server State
(shouts @tannerlinsley for this idea)
UI State: el estado que representa aspectos de la interfaz exclusivamente y que es modificado por acciones del usuario por ejemplo ejemplo un modal abierto/cerrado, el valor de un input o un menú.
Es un estado de fácil acceso, efímero y sincrono y es "simple" de manejar
Read 14 tweets
Matías Hernández Arellano Profile picture
18 Apr
¿Por que el desarrollo web se ha vuelto tan complejo?
En mi opinión tiene que ver con principalmente dos razones:
1. Los requerimientos han crecido y las expectativas de los usuarios y clientes han aumentado respecto a que es y no posible "en la plataforma"
...
2. La web (como la ideó Sir @timberners_lee) no fue ni está "arquitecturada" (palabra inventada) para lo que la estamos usando hoy.

La web fue ideada e implementada como una plataforma para compartir documentos de hiper texto. "Documentos" (subrayo ésto) que se enlazan con otros
He ahí que el lenguaje principal de la web sea HTML. Javascript vino a ser un parche sobre los motores de los browsers para darle algo de interactividad y dinamismo a esos documentos
Read 19 tweets
Matías Hernández Arellano Profile picture
18 Feb
Q me disculpe @Pa__tty pero usar la vulnerabilidad de NNA como argumento para la presencialidad en clases de colegio es incongruente.
1ero que edades? Acaso todos los estudiantes podrán llevar a cabo los protocolos de autocuidado?
2do hablan de la vulnerabilidad de estudiantes...
Si hablamos de estudiantes vulnerables lo más seguramente también serán establecimientos de escasos recursos por lo que es muy difícil asegurar protocolos de seguridad (en cuanto a insumos).
Vulnerabilidad, si es económica entonces hablamos de uso de transporte público, es decir, espacios aglomerados y sabemos que los menores no serán vacunados, ergo, exposición a posibles contagios ya que aun no se alcanza inmunidad de grupo.
Read 6 tweets
Matías Hernández Arellano Profile picture
17 Feb
He leído varias veces este tipo de preguntas.
¿Se puede usar React con....? O ¿Cómo usar React con X...? Siendo X alguna tecnología para desarrollo de APIS como Rails, Django, PHP/Laravel,.Net y en general la respuesta es la misma.
2 opciones posibles (no sólo para React) 🧵
La primera opciones es simple. Crea una api Rest o un endpoint graphql y listo.
React (y otros frameworks) pueden funcionar "solos" (una SPA). Es decir se distribuye un grupo de archivos estáticos que son servidos en algún CDN y se comunican con el servidor mediante alguna API.
Esto quiere decir que React (y los demás) son agnósticos de la tecnología de servidor usada ya que el medio de comunicación son solo llamadas HTTP (POST, GET, etc) que transmiten json.
Read 6 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

Like this author's thread?

Get emails when @matiasfha has new unrolls!

Check out other threads from @matiasfha!

Read all threads by @matiasfha