Preguntas para Entrevista Técnica en REACT

Summary

Este video ofrece una guía de entrevista para aspirantes a trabajos en React y React Native, abordando conceptos fundamentales como los hooks (useState, useEffect, useContext, useRef, useMemo, useReducer), el Virtual DOM, la diferencia entre componentes controlados y no controlados, y la distinción entre componentes basados en clases y funciones. Explica también el uso de props, state managers, local y global state, JSX y useRef. Las preguntas son diseñadas para evaluar el conocimiento del entrevistado y cubren desde temas básicos hasta conceptos más avanzados, asegurando una comprensión sólida de React.

Takeaways

• 🔍 Los hooks de React son herramientas para gestionar el estado y efectos secundarios en componentes funcionales.
• 📋 UseState permite gestionar el estado en componentes funcionales.
• 🎯 UseEffect se utiliza para realizar efectos secundarios y capturar dependencias.
• 🌐 UseContext permite acceder al valor de un contexto en cualquier componente.
• 🔗 UseRef crea referencias mutables a elementos o valores que persisten en el ciclo de vida del componente.
• 💡 UseCallback y useMemo sirven para mejorar el rendimiento mediante la memorización de funciones y valores pesados.
• 📈 UseReducer es similar a UseEffect pero se ejecuta síncronamente y es útil para manejar estados complejos.
• 📊 El Virtual DOM es una representación virtual del DOM actual que se utiliza para optimizar el rendimiento de las aplicaciones web.
• 🔄 Para pintar un array de elementos en React, se utiliza el método map.
• 🔲 La diferencia entre componentes controlados y no controlados es que los primeros tienen su estado controlado por React a través de props y callbacks, mientras que los segundos manejan su propio estado.
• 📚 Componentes basados en clases tienen métodos de ciclo de vida y estado, mientras que componentes funcionales son simples funciones que retornan JSX y tienen acceso limitado a ciclo de vida y estado.
• 🗂️ Los Props son datos enviados de componentes padres a hijos y son de solo lectura.
• 📋 Los State Managers como Redux o MobX ayudan a administrar el estado de la aplicación de manera centralizada y accesible por diferentes componentes.
• 📌 Se utiliza Local State para el estado interno de un componente y Global State cuando se necesita compartir datos entre varios componentes anidados.

Q & A

¿Cuáles son los hooks de React que conoces?

Algunos hooks de React incluyen useState, useEffect, useContext, useRef, useMemo, useReducer y useCallback. Cada uno tiene un propósito específico para gestionar el estado, efectos secundarios, contextos, memoria y referencias en componentes funcionales.

¿Qué es el Virtual DOM y cómo se utiliza para mejorar el rendimiento?

El Virtual DOM es una representación virtual del DOM actual almacenada en memoria. Se utiliza para comparar eficientemente las diferencias entre el estado actual y el nuevo estado, minimizando las actualizaciones del DOM y mejorando así el rendimiento de la aplicación.

¿Cómo se usa el map para pintar un array de elementos en React?

El método map se utiliza para iterar sobre un array y devolver un nuevo array de elementos de React. Se utiliza comúnmente para renderizar listas o colecciones de datos.

¿Cuál es la diferencia entre un componente controlado y un componente no controlado?

Un componente controlado tiene su estado gestionado por React, lo que significa que su valor se pasa a través de props y se actualiza a través de funciones callback. Un componente no controlado mantiene su propio estado interno y no está directamente conectado con el estado de un componente padre.

¿Cuál es la diferencia entre componentes basados en clases y componentes basados en funciones?

Los componentes basados en clases utilizan un método render y tienen acceso a métodos de ciclo de vida y estado con setState. Los componentes basados en funciones son más simples y se definen como funciones de JavaScript que retornan JSX.

¿Qué son los props en React y cómo funcionan?

Los props (propiedades) son datos que se envían de un componente padre a un componente hijo. Son de solo lectura y no pueden ser modificados directamente por el componente hijo.

¿Qué es un State Manager y cuáles son sus principales características?

Un State Manager es una herramienta o librería que ayuda a administrar el estado de una aplicación. Proporciona un almacenamiento centralizado y organizado de la data, accesible por diferentes componentes de la aplicación. Ejemplos comunes son Redux, MobX y Context API.

¿Cuándo se recomienda usar Local State y cuándo Global State?

Se recomienda usar Local State cuando el estado es específico de un componente y no se necesita compartir con otros componentes. Global State se utiliza cuando varios componentes necesitan compartir y gestionar el mismo estado, especialmente en aplicaciones con componentes anidados.

¿Qué es JSX y cómo se utiliza en React?

JSX es una sintaxis de extensiones de lenguaje que se utiliza en React para crear elementos. Permite escribir código que se parece a HTML dentro de archivos JavaScript, lo que simplifica la creación de interfaces de usuario.

¿Qué nos devuelve useRef y cómo es útil en React?

useRef devuelve una referencia (ref) a un objeto que persistirá durante el ciclo de vida del componente y no cambiará entre re-renders. Es útil para manejar el foco, la selección de texto, animaciones, entre otras funcionalidades que requieren la manipulación directa del DOM.