Preguntas de entrevista para React

De cero a experto. Con respuestas detalladas en Español 🇪🇸

^{Deja tu :star: si te gusta el proyecto.}

Streams de programación en Twitch: twitch.tv/midudev

Comunidad de desarrollo en Discord: discord.gg/midudev

Índice

• Índice
• Principiante
  • ¿Qué es React?
  • ¿Cuáles son las características principales de React?
  • ¿Qué significa exactamente que sea declarativo?
  • ¿Qué es un componente?
  • ¿Qué es JSX?
  • ¿Cómo se transforma el JSX?
  • ¿Cuál es la diferencia entre componente y elemento en React?
  • ¿Cómo crear un componente en React?
  • ¿Qué son las props en React?
  • ¿Qué es y para qué sirve la prop children en React?
  •  ¿Qué diferencia hay entre props y state?
  • ¿Se puede inicializar un estado con el valor de una prop? ¿Qué pasa si lo haces y qué hay que tener en cuenta?
  • ¿Qué es el renderizado condicional en React?
  • ¿Cómo puedes aplicar clases CSS a un componente en React y por qué no se puede usar class?
  • ¿Cómo puedes aplicar estilos en línea a un componente en React?
  • ¿Cómo puedo aplicar estilos de forma condicional a un componente en React?
  • ¿Qué es el renderizado de listas en React?
  • ¿Cómo puedes escribir comentarios en React?
  • ¿Cómo añadir un evento a un componente en React?
  • ¿Cómo puedo pasar un parámetro a una función que maneja un evento en React?
  • ¿Qué es el estado en React?
  • ¿Qué son los hooks?
  • ¿Qué hace el hook useState?
  • ¿Qué hace el hook useReducer?
  • ¿Qué significa la expresión "subir el estado"?
  • ¿Qué hace el hook useEffect?
  • Explica casos de uso del hook useEffect
  • Cómo suscribirse a un evento en useEffect
  • ¿Qué hace el hook useId?
  • ¿Cómo podemos ejecutar código cuando el componente se monta?
  • ¿Qué son los Fragments en React?
  • ¿Por qué es recomendable usar Fragment en vez de un div?
  • ¿Qué es el Compound Components Pattern?
  • ¿Cómo puedes inicializar un proyecto de React desde cero?
  • ¿Qué es React DOM?
  • ¿Qué JavaScript necesito para aprender React?
  • JavaScript que necesitas para aprender React
  • EcmaScript Modules o ESModules
  • Operador condicional (ternario)
  • Funciones flecha o Arrow Functions
  • Parámetros predeterminados (default values)
  • Template Literals
  • Propiedades abreviadas
  • La desestructuración
  • Métodos de Array
  • Sintaxis Spread
  • Operador Rest
  • Encadenamiento opcional (Optional Chaining)
• Intermedio
  • ¿Cómo crear un hook personalizado (custom hook)?
  • ¿Cuántos useEffect puede tener un componente?
  • ¿Cómo podemos ejecutar código cuando el componente se desmonta del árbol?
  • Cómo puedes cancelar una petición a una API en useEffect correctamente
  • ¿Cuáles son las reglas de los hooks en React?
  • ¿Qué diferencia hay entre useEffect y useLayoutEffect?
  • ¿Qué son mejores los componentes de clase o los componentes funcionales?
  • ¿Cómo mantener los componentes puros y qué ventajas tiene?
  • ¿Qué es la hidratación (hydration) en React?
  • ¿Qué es el Server Side Rendering y qué ventajas tiene?
  • ¿Cómo puedes crear un Server Side Rendering con React desde cero?
  • ¿Puedes poner un ejemplo de efectos colaterales en React?
  • ¿Qué diferencia hay entre componentes controlados y no controlados? ¿Qué ventajas y desventajas tienen?
  • ¿Qué son los High Order Components (HOC)?
  • ¿Qué son las render props?
  • ¿Por qué no podemos usar un if en el renderizado de un componente?
  • ¿Por qué debemos utilizar una función para actualizar el estado de React?
  • ¿Qué es el ciclo de vida de un componente en React?
  • ¿Por qué puede ser mala práctica usar el index como key en un listado de React?
  • ¿Para qué sirve el hook useMemo?
  • ¿Es buena idea usar siempre useMemo para optimizar nuestros componentes?
  • ¿Para qué sirve el hook useCallback?
  • ¿Es buena idea usar siempre useCallback para optimizar nuestros componentes?
  • ¿Cuál es la diferencia entre useCallback y useMemo?
  • ¿Qué son las refs en React?
  • ¿Cómo funciona el hook useRef?
  • ¿Qué hace el hook useLayoutEffect?
  • Orden de ejecución del useLayoutEffect
  • ¿Qué son los componentes stateless?
  • ¿Cómo puedes prevenir el comportamiento por defecto de un evento en React?
  • ¿Qué es el StrictMode en React?
  • ¿Por qué es recomendable exportar los componentes de React de forma nombrada?
  • ¿Cómo puedes exportar múltiples componentes de un mismo archivo?
  • ¿Cómo puedo importar de forma dinámica un componente en React?
  • ¿Cuando y por qué es recomendable importar componentes de forma dinámica?
  • ¿Sólo se pueden cargar componentes de forma dinámica si se exportan por defecto?
  • ¿Qué es el contexto en React? ¿Cómo puedo crearlo y consumirlo?
  • ¿Qué es el SyntheticEvent en React?
  • ¿Qué es flushSync en React?
  • ¿Qué son los Error Boundaries en React?
  • ¿Qué son las Forward Refs?
  • ¿Cómo puedo validar el tipo de mis props?
  • ¿Cómo puedo validar las propiedades de un objeto con PropTypes?
  • ¿Cómo puedo validar las propiedades de un array con PropTypes?
  • ¿Cómo puedo inyectar HTML directamente en un componente de React?
  • ¿Por qué puede ser mala idea pasar siempre todas las props de un objeto a un componente?
  • ¿Cuál es el propósito del atributo "key" en React y por qué es importante usarlo correctamente al renderizar listas de elementos?
  • ¿Para qué sirve el hook useTransition y cuándo deberías usarlo?
  • ¿Para qué sirve el hook useActionState?
  • ¿Qué problema resuelve el hook useOptimistic?
  • ¿Cómo funciona el hook useFormStatus y qué aporta junto a las Server Actions?
  • ¿Qué es el hook useFormState y cuándo conviene usarlo?
  • ¿Qué son las Server Actions y cómo se usan con formularios en React?
  • ¿Cuál es la diferencia entre la prop action y el atributo formAction en React/Next.js?
  • ¿Qué diferencia hay entre componentes de servidor y componentes de cliente en React/Next.js?
  • ¿Para qué sirve el hook useSyncExternalStore?
  • ¿Cómo funciona React.memo y cuándo es útil?
  • ¿Qué diferencia hay entre ReactDOM.render, createRoot y hydrateRoot?
• Experto
  • ¿Es React una biblioteca o un framework? ¿Por qué?
  • ¿Para qué sirve el hook useImperativeHandle?
  • ¿Para qué sirve el método cloneElement de React?
  • ¿Qué son los portales en React?
  • ¿Por qué StrictMode renderiza dos veces la aplicación?
  • ¿Qué problemas crees que pueden aparecer en una aplicación al querer visualizar listas de miles/millones de datos?
  • ¿Cómo puedes abortar una petición fetch con useEffect en React?
  • ¿Qué solución/es implementarías para evitar problemas de rendimiento al trabajar con listas de miles/millones de datos?
  • Pagination
  • Virtualization
  • ¿Qué es el hook useDebugValue?
  • ¿Qué es el Profiler en React?
  • ¿Cómo puedes acceder al evento nativo del navegador en React?
  • ¿Cómo puedes registrar un evento en la fase de captura en React?
  • [¿Cómo puedes mejorar el rendimiento del Server Side Rendering en React para evitar que bloquee el hil