Question 1

¿Cuál es la diferencia principal entre let y var?

Accepted Answer

let declara una variable con alcance de bloque, lo que significa que solo existe dentro del bloque donde se define (entre llaves). var tiene alcance de función, lo que puede causar errores inesperados ya que la variable es accesible en toda la función. Usar let por defecto evita problemas de hoisting y fugas de variables en bucles o condicionales.

Question 2

¿Qué es JSX en React?

Accepted Answer

JSX es una extensión de sintaxis de JavaScript que permite escribir markup similar a HTML directamente en código JavaScript. Es transformado en llamadas a la función React.createElement por Babel durante la compilación. Usar JSX hace el código más legible y permite detectar errores en tiempo de compilación a través del tipado, combinando el poder de JavaScript con una sintaxis familiar.

Question 3

¿Qué es el hook useState en React?

Accepted Answer

useState es un hook de React que gestiona el estado local en un componente funcional. A diferencia de las variables JavaScript regulares que se reinician en cada renderizado, useState preserva el valor del estado entre renderizados sucesivos. Este hook retorna un array que contiene el valor actual del estado y una función para actualizarlo, desencadenando automáticamente un nuevo renderizado del componente cuando el estado cambia.

Question 4

¿Qué es el mounting en un componente React?

Accepted Answer

El mounting es la fase en que se crea un componente y se inserta en el DOM por primera vez. Durante esta fase, React inicializa el estado, ejecuta el código de construcción y realiza el primer renderizado. Es el momento ideal para lanzar llamadas a la API o inicializar suscripciones mediante useEffect.

Question 5

¿Qué es un CSS Module en React?

Accepted Answer

Los CSS Modules generan automáticamente nombres de clases únicos añadiendo un hash al nombre de la clase, lo que previene conflictos de estilos entre componentes. Cada archivo CSS Module tiene su propio scope local, a diferencia de las hojas de estilo globales tradicionales. Este enfoque permite escribir estilos modulares sin riesgo de sobreescrituras accidentales en otros componentes.

Question 6

¿Qué es el App Router en Next.js?

Accepted Answer

El App Router es el nuevo sistema de routing de Next.js 13+ basado en el directorio app/. Reemplaza al Pages Router e introduce los Server Components por defecto, layouts compartidos, y un modelo de routing más flexible con convenciones de archivos como page.tsx, layout.tsx y loading.tsx.

Question 7

¿Cuál es la sintaxis correcta para tipar las props de un componente React?

Accepted Answer

La interfaz Props seguida del tipado de la función con Props como parámetro es la sintaxis estándar recomendada. Este enfoque ofrece una excelente inferencia de tipos y permite reutilizar fácilmente el tipo Props en otras partes del código. Es más explícito que React.FC y permite un mejor control del tipado de children.

Question 8

¿Cuál es el rol principal de React.memo?

Accepted Answer

React.memo es un Higher-Order Component que memoriza el resultado del renderizado de un componente. Realiza una comparación superficial de las props y omite el re-renderizado si las props no han cambiado. Es particularmente útil para optimizar componentes hijos costosos que reciben las mismas props con frecuencia.

Question 9

¿Qué es un Error Boundary en React?

Accepted Answer

Un Error Boundary es un componente de clase React que captura errores JavaScript que ocurren en el árbol de sus componentes hijos, muestra una UI de respaldo (fallback) y evita que toda la aplicación se bloquee. Utiliza los métodos componentDidCatch() y getDerivedStateFromError() para interceptar y manejar los errores de renderizado.

Question 10

¿Qué es el patrón Compound Components?

Accepted Answer

El patrón Compound Components permite crear componentes que comparten estado implícito a través de React Context, sin pasar props explícitamente. Este patrón se usa en bibliotecas como Radix UI y Headless UI para proporcionar una API flexible y componible. Los componentes hijo pueden acceder al estado compartido automáticamente, permitiendo la personalización de la estructura sin perder la lógica común.

Preguntas de entrevista de React / Next.js

¿Listo para tu entrevista de React / Next.js?

Explora todos los temas de React / Next.js

Fundamentos de JavaScript

Fundamentos de React

React Hooks

Ciclo de vida de los componentes

React Router

Gestión de estado con Context

Formularios y Controlled Components

Obtención de datos y API

React Query (TanStack Query)

Styling & CSS-in-JS

Fundamentos de Next.js

TypeScript con React

Data Fetching en Next.js

Server Actions de Next.js

Routing y Navegación en Next.js

API Routes de Next.js

Metadata & SEO en Next.js

Middleware y Auth en Next.js

Testing en React

Zustand State Management

Optimización de Rendimiento en React

Error Boundaries & Error Handling

Advanced React Patterns

Características avanzadas de Next.js

Despliegue y Producción de Next.js

Architecture & Design Patterns

React Server Components

Internacionalización de Next.js

React Security & Buenas Prácticas

Domina React / Next.js para tu próxima entrevista