React Hooks y Gestión de Estado
¿Qué son los React Hooks y por qué se introdujeron?
Respuesta:
Los React Hooks son funciones que te permiten "conectarte" a las características de estado y ciclo de vida de React desde componentes de función. Se introdujeron para permitir a los desarrolladores usar el estado y otras características de React sin escribir componentes de clase, promoviendo una mejor reutilización de código, legibilidad y resolviendo problemas como el "wrapper hell" y los métodos de ciclo de vida complejos.
Explica el propósito del Hook useState.
Respuesta:
El Hook useState permite a los componentes de función gestionar el estado. Devuelve un valor con estado y una función para actualizarlo. Cuando se llama a la función setter, React vuelve a renderizar el componente con el nuevo valor de estado.
¿Cómo funciona el Hook useEffect y cuáles son sus casos de uso comunes?
Respuesta:
El Hook useEffect te permite realizar efectos secundarios en componentes de función, como la obtención de datos, suscripciones o la modificación manual del DOM. Se ejecuta después de cada renderizado por defecto, pero su ejecución puede controlarse especificando un array de dependencias. Los casos de uso comunes incluyen la obtención de datos al montar el componente, la configuración de listeners de eventos y la limpieza de recursos.
¿Cuál es la importancia del array de dependencias en useEffect?
Respuesta:
El array de dependencias en useEffect controla cuándo se vuelve a ejecutar el efecto. Si el array está vacío ([]), el efecto se ejecuta solo una vez después del renderizado inicial. Si se omite, se ejecuta después de cada renderizado. Si contiene valores, el efecto se vuelve a ejecutar solo cuando uno de esos valores cambia, evitando re-ejecuciones innecesarias y posibles bucles infinitos.
¿Cuándo usarías useContext?
Respuesta:
useContext se utiliza para consumir valores de un Contexto de React. Te permite evitar el "prop drilling" al proporcionar una forma de pasar datos profundamente a través del árbol de componentes sin pasar manualmente props en cada nivel. Es ideal para estado global como temas, autenticación de usuario o localización.
Explica la diferencia entre useState y useReducer.
Respuesta:
useState es para una gestión de estado simple, típicamente para valores primitivos u objetos pequeños. useReducer es una alternativa a useState para una lógica de estado más compleja, especialmente cuando las transiciones de estado involucran múltiples sub-valores o el siguiente estado depende del anterior. A menudo se prefiere para gestionar el estado a nivel de aplicación o cuando las actualizaciones de estado son complejas e involucran una función "reducer".
¿Qué es useCallback y cuándo deberías usarlo?
Respuesta:
useCallback es un Hook que devuelve una función de callback memoizada. Se utiliza para evitar re-renderizados innecesarios de componentes hijos que dependen de props de callback, especialmente cuando esos callbacks se pasan desde un componente padre. Es beneficioso al pasar callbacks a componentes hijos optimizados (por ejemplo, React.memo) para mantener la igualdad referencial.
¿Qué es useMemo y cómo se diferencia de useCallback?
Respuesta:
useMemo es un Hook que devuelve un valor memoizado. Se utiliza para optimizar el rendimiento evitando que cálculos costosos se vuelvan a ejecutar en cada renderizado si sus dependencias no han cambiado. Mientras que useCallback memoiza una función, useMemo memoiza el resultado de una llamada a una función (un valor).
Describe las 'Reglas de los Hooks'.
Respuesta:
Hay dos reglas principales: 1) Solo llama Hooks en el nivel superior de tus componentes de función de React o en Hooks personalizados. No los llames dentro de bucles, condiciones o funciones anidadas. 2) Solo llama Hooks desde componentes de función de React o Hooks personalizados. No los llames desde funciones JavaScript normales. Estas reglas aseguran que los Hooks se llamen en el mismo orden en cada renderizado.
¿Cómo funcionan los Hooks personalizados y cuáles son sus beneficios?
Respuesta:
Los Hooks personalizados son funciones JavaScript cuyos nombres comienzan con use y que pueden llamar a otros Hooks. Te permiten extraer lógica con estado reutilizable de los componentes, facilitando compartir lógica entre diferentes componentes sin prop drilling o render props. Los beneficios incluyen una mejor organización del código, reutilización y testabilidad.
¿Cuándo elegirías una biblioteca de gestión de estado global (por ejemplo, Redux, Zustand) en lugar de los Hooks integrados de React como useState y useContext?
Respuesta:
Para aplicaciones pequeñas y medianas, useState y useContext suelen ser suficientes. Sin embargo, para aplicaciones a gran escala con interacciones de estado complejas, actualizaciones frecuentes o la necesidad de herramientas de depuración centralizadas (como Redux DevTools), una biblioteca dedicada de gestión de estado global proporciona una mejor escalabilidad, predictibilidad y mantenibilidad. Ofrecen características como middleware, aplicación de inmutabilidad y una única fuente de verdad.
¿Cuál es el propósito de useRef?
Respuesta:
useRef devuelve un objeto ref mutable cuya propiedad .current se inicializa con el argumento pasado. El objeto devuelto persistirá durante toda la vida del componente. Se utiliza comúnmente para acceder e interactuar directamente con elementos del DOM, o para almacenar cualquier valor mutable que no cause un re-renderizado al actualizarse, como un ID de temporizador.
