Seguramente mas de uno hemos caído en anti-patrones utilizando React Hooks, y es que React Hooks viene a resolver un problema de reutilización, donde su principal tarea es extraer la lógica de estado de un componente de tal forma que este puede ser probado y re-utilizado independientemente.
Sin embargo muchos desarrolladores lo utilizan para renderizar JSX, lo cual lo convierte en un anti-patrón. Veamos un ejemplo:
Hay varias razones por las cuales no tenemos que hacer lo del ejemplo:
Una función que devuelve JSX puede convertirse simplemente en un componente funcional con Hooks. Si lo escribimos como un componente nos ayudara de varias maneras:
Brindar flexibilidad para transmitir propiedades y controlar el comportamiento fácilmente.
También es más fácil memorizar componentes funcionales y evitar renderizaciones adicionales si nada ha cambiado. (También puede hacerlo con Hooks personalizados, pero luego tendrá que hacer uso de useMemo).
Facilita la definición de una jerarquía clara de elementos.
Ahora ya saben, renderizar JSX dentro de un Hook puede funcionar pero estarás haciendo uso de un anti-patrón 😉
Top comments (0)