En 2026, las entrevistas de front-end en las empresas rusas de TI se convirtieron en algo entre un examen de física cuántica y el juego «¿Quién quiere ser millonario?». Solo que en lugar de llamar a un amigo, tienes 5 segundos para explicar en qué se diferencia useEffect de useLayoutEffect y por qué debería importarle a alguien.
🎯 Categoría: «Nivel básico» (también conocido como «todos deberían saberlo, pero la mitad no lo sabe»)
1. ¿Qué es el desarrollo de front-end en general?
Por qué preguntan: Comprueban si entiendes la escala de tu profesión o si crees que se trata simplemente de «hacer botones bonitos».
Respuesta normal: El front-end es todo lo que el usuario ve e interactúa. HTML, CSS, JavaScript, marcos, rendimiento, accesibilidad, adaptabilidad... y sí, a veces incluso «botones bonitos».
Realidad 2026: El front-end dejó de ser solo diseño hace mucho tiempo. Ahora es toda una arquitectura con SSR, edge computing, integraciones de IA y microfrontends. En general, «solo botones» — eso fue en 2015.
2. ¿Cuál es la diferencia entre == y ===?
Por qué preguntan: Un clásico del género. Si no lo sabes, ve a aprender los conceptos básicos.
Respuesta corta:
==compara los valores con la conversión de tipos (puede convertir "5" a 5)===comparación estricta (los tipos deben coincidir)
Comentario del meme: Usar == en 2026 es como llevar chanclas a una entrevista. Técnicamente es posible, pero ¿para qué?
3. ¿Qué es DOM?
Por qué preguntan: Sin este conocimiento, no hay nada que hacer en el front-end.
Respuesta: Document Object Model es una estructura de árbol para representar un documento HTML. JavaScript manipula el DOM para cambiar la página dinámicamente.
Válido en 2026: Ahora también preguntan sobre Virtual DOM (React), Signals (Solid/Angular) y cómo todo esto optimiza el renderizado. Porque el DOM es demasiado simple.
4. Explica el posicionamiento en CSS: relative, absolute, fixed, sticky
Por qué preguntan: Comprueban si entiendes cómo se comportan los elementos en la página.
Guía rápida:
relative— se desplaza de su posición habitual, pero el lugar está reservadoabsolute— se extrae del flujo, se posiciona en relación con el padre posicionado más cercanofixed— se adhiere a la ventana del navegador, no se desplazasticky— híbrido: se comporta comorelativehasta que alcanza el punto de adhesión, entonces se convierte enfixed
Ficha 2026: En la era de CSS Container Queries y CSS Grid, position: absolute se usa cada vez menos. Pero todavía se pregunta 🤷♂️
🔥 Categoría: «JavaScript: el lenguaje que a todo el mundo le saca de quicio, pero que todo el mundo usa»
5. ¿Qué es el cierre (closure)?
Por qué preguntan: Porque es un concepto fundamental de JS, y no se puede prescindir de él.
Explicación para las personas: La función "recuerda" las variables del ámbito externo, incluso cuando este ámbito ya ha finalizado.
function createCounter() {
let count = 0;
return function() {
count++;
return count;
}
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2Dónde se utiliza en la vida real: Variables privadas, controladores de eventos, ganchos de React... en todas partes.
6. ¿Cuál es la diferencia entre null y undefined?
Rápido:
undefined- variable declarada pero sin asignarnull— el programador ha indicado claramente que "aquí no hay nada"
Pregunta filosófica 2026: ¿Por qué typeof null === 'object'? Respuesta: un error en JavaScript, que ahora es histórico y ya no se puede corregir 😅
7. ¿Qué es Event Loop?
Por qué preguntan: Comprueban la comprensión de la asincronicidad en JavaScript.
Explicación sin dolor:
JavaScript es de un solo hilo. Event Loop es un mecanismo que permite ejecutar código asíncrono:
Call Stack ejecuta código síncrono
Las operaciones asíncronas (setTimeout, fetch) se envían a las API web
Cuando estén listos, se ponen en la cola (Task Queue)
Event Loop comprueba: ¿Call Stack está vacío? → Toma de la cola y ejecuta
Tendencia 2026: Ahora también necesitas saber sobre microtareas (Promises) vs macrotareas (setTimeout). Porque un bucle de eventos ya no es suficiente 🙃
8. var, let, const — ¿cuál es la diferencia?
Breve y claro:
var— vieja escuela, alcance de la función, elevación, problemaslet— alcance de bloque, se puede reasignarconst— block scope, no se puede reasignar (¡pero el objeto se puede mutar!)
Regla 2026: Usa const por defecto, let cuando sea necesario, var no lo uses en absoluto.
⚛️ Categoría: «React, porque no hay vuelta atrás en 2026»
9. ¿Qué son los React Hooks y por qué son necesarios?
Contexto: Antes de los hooks había componentes de clase. Funcionaban, pero el código era prolijo.
Hooks en 2026: Estándar de la industria. Principales:
useState— estado localuseEffect— efectos secundarios (API, suscripciones, DOM)useContext— acceso al contextouseRef— enlaces a DOM o guardar valoresuseMemo/useCallback— optimizaciónuseReducer— lógica de estado compleja
Nuevo 2026: React Compiler (React Forget) optimiza automáticamente el código, por lo que la memorización manual es menos necesaria. ¡Pero en las entrevistas todavía preguntan por ella!
10. Reglas de uso de los ganchos
Dos reglas de oro:
Llama a los hooks solo en el nivel superior (no en bucles, condiciones, funciones anidadas)
Llama a los hooks solo en componentes de React o hooks personalizados
Por qué: React sigue el orden de las llamadas de los hooks. Si cambia, todo se rompe.
11. useEffect vs useLayoutEffect — ¿cuál es la diferencia?
Pregunta trampa 2026:
useEffecten ejecución después render (asíncrono)useLayoutEffecten ejecución hasta renderizado en el navegador (sincrónico)
Cuándo usar useLayoutEffect: Cuando necesitas medir el DOM o hacer cambios antes de que el usuario vea algo (para que no haya "parpadeo").
En el 99 % de los casos: Se necesita un useEffect normal.
12. ¿Qué es el DOM virtual?
En palabras sencillas: Una copia ligera del DOM real en la memoria. React compara (diff) el antiguo DOM virtual con el nuevo, calcula los cambios mínimos y solo los actualiza en el DOM real.
Por qué es importante: El trabajo directo con el DOM es lento. El DOM virtual acelera el proceso.
Alternativas en 2026: Svelte compila todo en vanilla JS sin Virtual DOM, Solid.js utiliza fine-grained reactivity (Signals). Pero React todavía domina en Rusia.
13. ¿Cómo funciona useState?
Básico:
const [count, setCount] = useState(0);¿Qué está pasando?
useState(0)inicializa el estadoDevuelve una matriz: [valor actual, función de actualización]
Al llamar a
setCount, el componente se vuelve a renderizar
Matiz: ¡Actualización de estado asincrónica! setCount(count + 1) no cambia inmediatamente count.
Actualización funcional (¡importante!):
setCount(prev => prev + 1); // Más fiable14. ¿Qué es la API de contexto?
Problema: Lanzar props a través de 10 niveles de componentes es un dolor de cabeza.
Solución: La API de contexto permite «teletransportar» los datos directamente a los consumidores.
Cuándo usar: Temas, autorización, idioma de la interfaz.
Cuándo NO usar: Para todo el estado de la aplicación. Para una lógica compleja, es mejor Redux Toolkit, Zustand o Jotai.
15. Explica el ciclo de vida de un componente
En los componentes de clase: componentDidMount, componentDidUpdate, componentWillUnmount
En componentes funcionales con ganchos:
useEffect(() => {
// componentDidMount + componentDidUpdate
return () => {
// componentWillUnmount (cleanup)
};
}, [deps]); // Las dependencias determinan cuándo ejecutarMatriz de dependencias vacía []: Solo funcionará durante el montaje (análogo componentDidMount).
🎨 Categoría: «CSS, porque centrar un div sigue siendo difícil»
16. Flexbox vs. Grid: ¿cuándo usar cada uno?
Flexbox: Diseños unidimensionales (filas o columnas)
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid: Diseños bidimensionales (filas y columnas al mismo tiempo)
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}Regla 2026: Utiliza Grid para la estructura de la página, Flexbox para los componentes internos.
17. ¿Qué son las variables CSS (propiedades personalizadas)?
Esencia: Variables en CSS que se pueden reutilizar.
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}Ventajas en 2026:
Cambia fácilmente los temas (modo oscuro)
Se puede manipular a través de JavaScript
Soporte nativo para navegadores
18. ¿Cómo optimizar el rendimiento de CSS?
Consejos actuales 2026:
Critical CSS: Inserte el CSS crítico en
<head>, cargue el resto de forma asíncronaMinificación y compresión
Evitar CSS en JS en tiempo de ejecución: Utiliza soluciones de tiempo de compilación (StyleX de Meta, Tailwind)
Container Queries: En lugar de consultas de medios para componentes adaptativos
⚡ Categoría: «Productividad o cómo no hacer que el sitio web sea un freno»
19. ¿Qué son los Core Web Vitals?
Google en 2026 es aún más estricto con el rendimiento:
LCP (Largest Contentful Paint): Tiempo de carga del contenido principal (objetivo: < 2,5 s)
INP (Interaction to Next Paint): Reemplazó FID, mide la capacidad de respuesta (objetivo: < 200 ms)
CLS (Cumulative Layout Shift): Estabilidad de la parte visual (objetivo: < 0,1)
Por qué es importante: Afecta al SEO y a la conversión.
20. Lazy Loading: ¿qué es y cómo funciona?
Imágenes:
<img src="image.jpg" loading="lazy" alt="description">Componentes de React:
const HeavyComponent = lazy(() => import('./HeavyComponent'));
<Suspense fallback={<div>Загрузка...</div>}>
<HeavyComponent />
</Suspense>Tendencia 2026: Next.js hace esto automáticamente para páginas y componentes.
21. Code Splitting: ¿cómo y por qué?
Problema: Un paquete enorme tarda mucho en cargarse.
Solución: Dividir el código en fragmentos, cargar bajo demanda.
Webpack/Vite lo hace automáticamente:
import('./module').then(module => {
// usamos el módulo
});React + Next.js 2026: Todo desde la caja con el enrutador de la aplicación y los componentes del servidor.
22. Memorización en React: useMemo, useCallback, React.memo
Cuándo usar:
React.memo: Envuelve el componente, evita la renderización si las propiedades no han cambiado
const ExpensiveComponent = React.memo(function Component({ data }) {
// ...
});useMemo: Almacena en caché el resultado de los cálculos
const expensiveValue = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);useCallback: Almacena en caché la función
const handleClick = useCallback(() => {
doSomething(a, b);
}, [a, b]);Importante en 2026: ¡No optimices antes de tiempo! React Compiler pronto hará todo esto automáticamente.
🌐 Categoría: «Pila moderna: IA, TypeScript y cosas del servidor»
23. TypeScript: ¿por qué lo necesitas?
Respuesta corta: Tipificación estática para JavaScript. Menos errores, mejor autocompletado, más fácil de refactorizar.
Estadísticas 2026: TypeScript se ha convertido en el estándar en las empresas de TI rusas. Más del 80 % de los nuevos proyectos utilizan TS.
En la entrevista pueden preguntar:
¿Qué es
interfacevstype?Cómo funcionan los genéricos
¿Qué son los Union Types y los Type Guards?
24. Componentes del servidor en React: ¿qué son?
Nuevo React 18+, la popularidad se disparó en 2026:
Los componentes se renderizan en el servidor
Se envía menos JavaScript al cliente
Acceso a la base de datos directamente desde el componente
Ejemplo (Next.js App Router):
async function ProductPage({ id }) {
const product = await db.products.findById(id); // ¡directamente en el componente!
return <div>{product.name}</div>
}Ventajas: Carga más rápida, menos paquetes, mejor SEO.
25. Edge Computing: ¿qué es y para qué sirve?
Idea: Ejecutar el código en servidores edge (más cerca del usuario) y no en un servidor central.
Ventajas:
Menos latencia
Mejor para usuarios de diferentes regiones de Rusia
Ahorro de recursos
Ejemplos: Cloudflare Workers, Vercel Edge Functions, Yandex Cloud Functions.
En la entrevista 2026: Preguntan sobre la comprensión de la arquitectura y cuándo es necesaria.
26. IA en desarrollo: ¿cómo la usas?
Realidad 2026: Las herramientas de IA se han convertido en parte del flujo de trabajo en las empresas rusas.
Herramientas populares:
GitHub Copilot: autocompletar código
Cursor / Windsurf — AI IDE
ChatGPT / Claude / Yandex GPT: explicación del código, depuración, generación
Varios asistentes de IA rusos
Qué pueden preguntar:
¿Cómo ayuda la IA en el trabajo?
¿Qué limitaciones del código de IA ves?
¿Cómo se comprueba la calidad del código generado por IA?
Importante: La IA es una herramienta, no un sustituto de la comprensión de los conceptos básicos.
🔧 Categoría: «Herramientas y ecosistema»
27. npm vs yarn vs pnpm: ¿cuál es la diferencia?
Todos los gestores de paquetes:
npm: Estándar, viene con Node.js
yarn: Más rápido, mejor almacenamiento en caché (Yarn 2+ es aún más rápido, pero es discutible)
pnpm: El más económico en discos (usa enlaces simbólicos), superrápido
Tendencia 2026: pnpm está ganando popularidad en los monorepositorios de las empresas rusas.
28. Webpack vs Vite vs Turbopack: ¿cuál elegir?
Webpack: El bueno de siempre, flexible, pero lento en grandes proyectos.
Vite: Utiliza módulos ES para el modo de desarrollo → inicio instantáneo. esbuild para producción.
Turbopack: El nuevo compilador de Vercel (Next.js), escrito en Rust, es aún más rápido que Vite.
Conclusión 2026: Vite es el estándar para nuevos proyectos. Turbopack está ganando impulso.
29. ¿Qué es un monorepo y por qué es necesario?
Monorepo: Un repositorio para varios paquetes/aplicaciones.
Herramientas: Turborepo, Nx, Lerna.
Ventajas:
Código compartido entre proyectos
Versión única
Es más fácil hacer cambios entre proyectos
Cuándo usar: Grandes equipos (como en Yandex, VK), microfrontends, sistemas de diseño.
🧪 Categoría: «Prueba: porque 'works on my machine' no funciona»
30. Tipos de pruebas de front-end
Pruebas unitarias: Prueban funciones/componentes individuales (Jest, Vitest)
Pruebas de integración: Prueban la interacción entre las partes (React Testing Library)
Pruebas E2E: Prueban todo el flujo del usuario (Playwright, Cypress)
Tendencia 2026: Playwright reemplaza a Cypress. Vitest reemplaza a Jest en los proyectos de Vite.
31. React Testing Library: principios básicos
Filosofía: Prueba cómo interactúa el usuario con la aplicación.
Mal:
wrapper.find('.button').simulate('click'); // prueba de detalles de implementaciónBien:
const button = screen.getByRole('button', { name: /submit/i });
fireEvent.click(button);En la entrevista te preguntarán: Cómo pruebas los ganchos, el código asíncrono, la API de simulación.
🎭 Categoría: «Cuestiones de comportamiento y habilidades blandas»
32. Háblanos de un proyecto del que estés orgulloso
Lo que quieren escuchar:
El problema que se resolvió
Tecnología y enfoque
Tu rol
Resultado (métricas)
Estructura STAR: Situation → Task → Action → Result
Ejemplo:
«El panel de control en CRM tardó 5 segundos en cargarse. Lo perfilé a través de Chrome DevTools, encontré dependencias pesadas, hice división de código y carga diferida. El tiempo de carga se redujo a 2 segundos, el compromiso aumentó en un 18 %».
33. ¿Cómo te mantienes al día con las tendencias?
Buenas respuestas 2026:
Leo las actualizaciones de los frameworks (React blog, Next.js changelog)
Miro informes de conferencias (HolyJS, FrontendConf, React Summit)
Participo en open-source
Pruebo nuevas tecnologías en proyectos de mascotas
Suscripción a blogs de desarrolladores y boletines
Formo parte de comunidades de desarrolladores de Telegram
🚀 ¡Por cierto, sobre las comunidades de Telegram!
Si no solo quieres leer artículos una vez al mes, sino ver contenido de programación útil en tu feed todos los días, únete a a la comunidad de Kodik ¡en Telegram!
Hay publicaciones breves, análisis de tareas, noticias del mundo del front-end y del back-end, y también hay comunicación con otros desarrolladores. Es como vitaminas para el cerebro de un programador: un poco cada día, pero el efecto es acumulativo 💪
34. Describa un problema técnico complejo que se resolvió
Qué se comprueba: Habilidades de resolución de problemas y profundidad técnica.
Esquema de respuesta:
Problema: Qué se ha roto, síntomas
Diagnóstico: Cómo se buscó la causa (herramientas, hipótesis)
Solución: Lo que hemos hecho
Resumen: Resultado y lo que aprendimos
Bonificación: Menciona que documentaste la decisión para el equipo.
🚀 Categoría: «Nivel avanzado: preguntas para niveles intermedio y sénior»
35. Microfrontends: ¿qué son y cuándo usarlos?
Idea: Dividir el front-end en partes independientes que son desarrolladas por equipos separados.
Enfoques:
Module Federation (Webpack 5)
Iframe (de la vieja escuela, pero funciona)
Web Components
Cuándo NO usar: Equipos pequeños, aplicaciones sencillas.
Cuándo usar: Grandes equipos (Yandex, VK, Sber), sistemas heredados, se necesita independencia de despliegue.
Tendencia 2026: El patrón está madurando en las empresas rusas, pero no para todos. ¡Cuidado con el bombo publicitario!
36. Accesibilidad (a11y): ¿qué es importante saber?
Fundamentos:
HTML semántico (usa las etiquetas correctas)
Atributos ARIA cuando sea necesario
Navegación por teclado (todo debe funcionar sin ratón)
Contraste de colores (estándares WCAG AA/AAA)
Textos alternativos para imágenes
Herramientas: Lighthouse, axe DevTools, WAVE.
Importante en Rusia 2026: Para los proyectos estatales y las grandes empresas, la accesibilidad se convierte en un requisito obligatorio.
37. ¿Cómo diseñaría el sistema de autenticación?
Verificación: Pensamiento arquitectónico.
Aspectos clave:
JWT vs Session-based auth
Refresh tokens
Almacenamiento de tokens (cookies httpOnly vs localStorage)
Protección CSRF
OAuth / Social login (VKontakte, Yandex ID, Telegram)
Respuesta de moda 2026: NextAuth.js, Clerk, Supabase Auth: soluciones listas para usar en lugar de escribir desde cero.
38. Gestión estatal en 2026: ¿qué usar?
Opciones:
Redux Toolkit — todavía potente para aplicaciones complejas
Zustand — API ligera y sencilla
Jotai / Recoil — atomic state
TanStack Query (React Query) — para el estado del servidor
Context API — para casos simples
Tendencia: Separe el estado del cliente (UI) y el estado del servidor (datos de la API). Para el segundo, usa TanStack Query.
39. ¿Qué es la hidratación en SSR/SSG?
SSR (Server-Side Rendering): El servidor devuelve el HTML terminado.
Hydration: React "da vida" a este HTML en el cliente adjuntando controladores de eventos.
Problema: Si el código del cliente no coincide con el código del servidor, se produce un error de hidratación.
Nuevo 2026: Partial Hydration e Islands Architecture (Astro) — hidratación solo de las partes interactivas.
40. Optimización del rendimiento: lista de verificación
Lista de verificación para la entrevista:
✅ Carga lenta (imágenes, componentes, rutas)
✅ Code splitting (importaciones dinámicas)
✅ Tree shaking (eliminación de código no utilizado)
✅ Memorización (React.memo, useMemo, useCallback)
✅ Debounce / Throttle (búsqueda, desplazamiento)
✅ Virtualización de listas largas (react-window, TanStack Virtual)
✅ Optimización de imágenes (WebP, AVIF, imágenes adaptables)
✅ CDN para estática
✅ HTTP/2, HTTP/3
✅ Prefetch / Preload de recursos críticos
🎯 Categoría: «Preguntas difíciles: trampas y acertijos»
41. ¿Qué mostrará este código?
console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);Respuesta: 1, 4, 3, 2
Por qué:
El código síncrono se ejecuta primero: 1, 4
Las microtareas (promesas) se ejecutan antes que las macrotareas (setTimeout)
Por lo tanto: Promise (3), luego setTimeout (2)
Este es un clásico para comprobar la comprensión de Event Loop.
42. ¿Cuál es la diferencia entre map() y forEach()?
forEach: Simplemente itera, no devuelve nada.
map: Crea una nueva matriz basada en la transformación.
const numbers = [1, 2, 3];
numbers.forEach(n => console.log(n * 2)); // muestra, pero no guarda
const doubled = numbers.map(n => n * 2); // [2, 4, 6]Regla: Necesito una nueva matriz → map. Simplemente haz algo con cada elemento → forEach.
🎓 Resumamos
La entrevista de front-end en las empresas rusas de TI en 2026 es una mezcla de:
Conocimientos básicos (HTML, CSS, JavaScript)
Marcos (React domina, pero conocer las alternativas es una ventaja)
Rendimiento y optimización
Herramientas modernas (TypeScript, Vite, asistentes de IA)
Pensamiento arquitectónico (cuándo usar qué y por qué)
Soft skills (comunicación, resolución de problemas, trabajo en equipo)
📚 ¿Cómo prepararse de forma eficaz?
Comprende los conceptos básicos en profundidad — sin ellos no se puede
Practica el código — no solo leas, escribe
Haz proyectos para mascotas — aplica los conocimientos en la práctica
Estudia las bases de código reales — lee el código de las bibliotecas populares
Mock interviews - practica el formato de entrevista
🚀 ¿Quieres mejorar el front-end de forma sistemática y con gusto?
Entonces definitivamente tienes que probar Kodik — ¡una aplicación para aprender programación con práctica directamente en tu teléfono!
Por qué Kodik es genial:
✅ Práctica desde el primer minuto — no solo teoría, sino tareas reales
✅ Tutoriales interactivos — escribes el código directamente en la aplicación y ves el resultado de inmediato
✅ Cómodo en cualquier lugar — en el metro, en la cola, en el sofá — aprende en cualquier lugar
✅ Programa estructurado — desde lo básico hasta temas avanzados
✅ Comunidad — en Canal de Telegram comparten experiencias, analizan tareas, discuten tendencias
👉 ¡Descarga Kodik y empieza a codificar hoy mismo!
👉 Suscríbete a Canal de Telegram — ¡Publicaciones útiles todos los días que te ayudarán a no olvidar el material y mantenerte al tanto de las tendencias de front-end!
P.S.
Recuerda: No es necesario saberlo todo en la entrevista. Es más importante mostrar:
Capacidad de pensar y resolver problemas
Disposición para aprender
Comprensión de los conceptos básicos y capacidad de aplicarlos
Capacidad para explicar tus pensamientos
Incluso si no sabes la respuesta, piensa en voz alta. Los entrevistadores valoran el proceso de pensamiento, no solo la respuesta final.
¡Buena suerte en la entrevista! 🚀 Y recuerda: cada entrevista es una experiencia. Incluso si no lo superaste, aprendiste qué estudiar a continuación.