Logra superar tu Entrevista de React JS con esta Guía completa desde cero 2024

En esta MEGA guía te voy a enseñar las principales preguntas y respuestas que te harán en tus entrevistas técnicas como React Developer.

Si lees y comprendes estas preguntas, vas a estar un paso más cerca de Lograr ese puesto de trabajo que tanto deseas. ¡Vamos!

Table of Contents

Lo que debes evitar y tips generales

En cualquier entrevista técnica que tengas, ya sea de React JS o de otra tecnología, considera EVITAR:

Código en Español.
Mentir (nos damos cuenta).
Miedo a preguntar (y no hacerlo).

En cambio, te recomiendo que hagas:

Código en Inglés.
Ser honesto.
Pregunta con confianza.

Sencillamente con estos tips ya estás un paso más cerca de pasar tu entrevista con éxtio :D.

React JS Interview Questions y Proceso de reclutamiento

Cuando aplicas a una vacante de desarrollador en React JS, va a ser muy común que primero hables con un reclutador o reclutadora, quien te hará algunas preguntas filtro sobre tu experiencia, tiempo trabajando, nivel de inglés y expectativas salariales.

Si todo marcha bien, la siguiente etapa es tener una entrevista técnica con un desarrollador quien evaluará si las habilidades que tienes actualmente hacen match con lo que están buscando.

Es aquí donde muy probablemente pueda hacerte preguntas sobre qué tipo de proyectos has realizado, cómo es tu forma de trabajo, lo que has hecho con React, entre otras.

Ojo: Dentro de esta etapa, es muy probable que te harán algunas de las siguientes preguntas que te muestro en esta guía.

Las preguntas que vas a leer a continuación te pueden ayudar también para hacer pruebas técnicas, code challenges u otro tipo de entrevistas debido a que es ligado a cómo desarrollar con React.

¿Qué son los props en React JS?

Son las Propiedades que puedes pasar a un componente. Son el equivalente a pasar parámetros a una función.

¿Por qué necesitamos usar keys en las listas?

Porque el Virtual DOM necesita tener una maenra de identificar y diferenciar los diferentes elementos del árbol de componentes. Cuando React renderiza un listado de elementos, usa los Key para diferenciar cada elemento individual.

¿Qué es Babel en React JS?

Babel es un programa que toma como input código de JavaScript moderno y lo transforma a código JavaScript que los navegadores puedan ejecutar. Por ejemplo, el código JSX es tomado por babel y lo transforma en código JS.

¿Qué es webpack?

Webpack es un programa bunddle que toma como input diferentes tipos de archivos y los transforma de manera empaquetada y lista para usar en el navegador. Junto a Babel, puede tomar un proyecto de React JS y transformarlo en un conjunto de archivos que están listos para hacer deploy.

¿Qué son componentes en React?

Son la unidad primaria en React JS que usamos para definir elementos de la UI. Por ejemplo, desde un botón hasta un layout pueden ser un componente.

La idea es hacer componentes reutilizables que compongan una UI.

¿Cuál es la diferencia entre state y props?

State es el estado interno de un componente. El uso de estado es una de las características de los componentes en Reac JS.

Props son aquellas propiedades que un componente puede recibir de un elemento padre y pueden ser de cualquier tipo de dato.

¿Qué son los functional components?

Son componentes que son definidos por medio de funciones. Por ejemplo:

function App() {
  // code...
}

const Button = () => {
  // code...
}

¿Cuántos tipos de componentes hay en React?

Existen tipos de componentes que son oficiales por React JS y otros tipos de componentes que fueron adoptados por la comunidad.

Los componentes oficiales son:

Class Component.
Funcional Component.

Algunos ejemplos de los tipos de componentes adoptados por la comunidad:

Containers components y UI components.
Smart components y dumb components.

Estos tipos de componentes son categorizados en base a la responsabilidad que le damos a cada tipo y no tanto en si son funcionales o de tipo clase.

¿Es React MVC?

No. React sería la parte de "View" de un MVC.

¿Qué es JSX?

JSX básicamente es JavaScript en XML (no HTML) y son una manera más amigable de definir componentes en React JS.

¿Por qué los props son inmutables?

Por diseño, los props son únicamente de lectura para el componente que los recibe. El componente padre que los provee es quien puede modificarlos.

Por ejemplo, un componente padre puede pasar por prop una variable de estado. Cada vez que cambie la variable de estado, hará un re render y su cambio será reflejado también en el componente hijo que lo recibe como prop.

¿Qué significa async await en React?

Async Await son una "sugar sintax" de JavaScript que sirve para resolver promesas de manera más amigable.

En React es común ver async await porque al final de cuentas, React es JavaScript.

¿Cuántos tipos de ciclos de vida existen?

En modo general, existen 3 momentos clave en la vida de un componente.

Cuando se va a montar (ComponentDidMount).
Cuando está montado y se actualiza (ComponentDidUpdate).
Cuando se va a desmontar (ComponentWillUnmount).

¿React usa HTML?

No. React usa JSX, cuya sintaxis es parecida a HTML pero no debe de confundirse.

¿Qué son las clases en React?

Las clases de ES6 son una manera de definir componentes.

Sin embargo, desde el punto de vista de JavaScript, una Clase no es más que una "sintax sugar" o sintaxis amigable para Simular la creación de "Clases". Recordemos que JavaScript no es un lenguaje orientado a objetos.

Una clase en JS no es más que una función que tiene propiedades y sub funciones internas que interactúan con la variable "this".

¿Qué es el DOM?

DOM significa Document Object Model y es la manera en que JS puede interactuar programáticamente con la representación del documento/elementos creados a partir de la estructura HTML y del navegador.

¿React es una biblioteca o un framework?

React es una biblioteca que únicamente resuelve el problema de cómo crear componentes en la UI.

Es por ello que existen otras soluciones independientes como React Router o React Redux.

Personalmente, pienso que esto es probablemente algo elemental que hace a React tan popular y versátil.

¿Qué es React Router?

Es una biblioteca que se encarga de todo lo relacionado a cómo navegar en diferentes vistas de una app creada con React JS.

¿Qué son los React fragments?

Son una manera de crear un "wrapper" en el Render de un componente sin necesariamente crear un elemento en el nodo de componentes. Por ejemplo:

React Hooks Interview Questions

Desde la publicación de los React Hooks en la versión 16.8 de React, la experiencia de desarrollo en ha mejorado mucho.

Ahora podemos crear componentes funcionales y acceder a lo mismo que hacíamos en componentes de tipo clase, pero sin preocuparnos por la variable "this" y con menos código.

A continuación te comparto un buen listado de preguntas que muy típicamente te harán en una entrevista de React JS.

En caso de que las siguientes preguntas no te suenen nada familar, también puedes ver este mega post de los React Hooks

Por cierto, estas preguntas están basadas en el siguiente vídeo que publiqué en el canal de YouTube de Developero:

¿Qué son los React hooks?

Son funciones especiales de JS que empiezan por "use" y permiten acceder a características de React en componentes funcionales.

¿Por qué React Hooks?

Ayudan a simplificar el código de componentes de tipo clase.
Permite reusar lógica de estado más fácil.
Componentes menos complejos (ciclos de vida).
Sin confusiones por la variable "this".

¿Cuáles son algunos de los React Hooks?

useState
useEffect
useContext
useRef
useCallback
useMemo
useReducer

¿Qué es useState?

Es un hook de React que nos permite declarar variables de estado dentro de un componente funcional.

¿useState es síncrono o asíncrono?

¡Es Asíncrono! considera el siguiente ejemplo:

const MyComponent = () => {
  const [number, setNumber] = useState(1)

  const updateNumber = (newNumber) => {
    setNumber(newNumber)
    console.log(number) // qué imprime?
  }

  return <button onClick={() => updateNumber(3)}>Click me</button>
}

La respuesta es que imprime 1.

Cómo actualizar un estado de array de objetos?

Para actualizar una estrcutura como array o un objeto, necesitas crear uno nuevo con el dato que quieres tener modificado. Por ejemplo:

const newUserData = {
  name: 'Juanito',
  age: '20',
  favoriteLanguage: 'JavaScript',
}

const MyComponent = () => {
  const [usersList, setUsersList] = useState([])

  const addUser = (newUserData) => {
    setUsersList(/*code...*/) // Cómo ????
  }

  return <button onClick={() => addUser(newUserData)}>Add User</button>
}

La manera de actualizarlo sería:

setUsersList([...usersList, newUserData])

La sintaxis ...usersList se llama spread operator y lo que hace es retornar elemento por elemento del array en este caso.

Está entre corchetes porque estamos creando un nuevo array.

Para qué se usa el callback de useState?

Considerando el siguiente ejemplo:

const MyComponent = () => {
  const [number, setNumber] = useState(1)

  const updateNumber = (newNumber) => {
    setNumber((prevState) => {
      // code...
    })
  }

  return <button onClick={() => updateNumber(3)}>Click me</button>
}

El callback de useState se utiliza para acceder de manera inmediata al valor del estado actual y podemos usarlo para tener garantía de cuál es su valor en curso antes de modificarlo.

¿Podemos tener 2 useEffect en un mismo componente?

Sí, puedes tener N useEffects en un mismo componente. Considera el siguiente ejemplo:

import { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {})

  useEffect(() => {})

  // rest of the code...
}

¿Podemos hacer useEffect asíncrono?

Considera lo siguiente:

import { useEffect } from 'react'

const MyComponent = () => {
  useEffect(async () => {
    // esto está bien? por qué?
    const value = await Promise.resolve()
    // hacer algo con value
  })

  // rest of the code...
}

La respuesta es que si bien puedes hacerlo, una regla de useEffect es siempre usar funciones normales como callback para poder garantizar el correcto funcionamiento y actualización dentro del mismo.

En otras palabras, puedes hacerlo pero NO deberías. Para poder usar async await en un useEffect, puedes hacer una función interna que sea asíncrona e invocarla.

Por ejemplo:

const MyComponent = () => {
  useEffect(() => {
    const myFn = async () => {
      const value = await Promise.resolve()
    }

    myFn()
  })

  // rest of the code...
}

¿Cómo ejecutas useEffect una sola vez al montarse el componente?

Necesitas pasar como segundo parámetro un array vacío, lo que indica a React que se re ejecute el useEffect cuando un elemento de ese array cambie, pero como está vacío, no hay nada que vaya a cambiar, por lo que sólo se ejecuta al montarse.

import { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {}, [])
}

¿Cómo replicas componentWillUnmount con useEffect?

Puedes retornar una función dentro del callback de un useEffect. Por diseño, React va a ejecutar esa función antes de que se desmonte el componente.

import { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    // code...

    return () => console.log('unmount')
  }, [])

  // rest of the code...
}

¿Para qué sirve useCallback?

Para poder "memoizar" o guardar en memoria la referencia a una función. De este modo, podemos garantizar que esa función será idéntica a sí misma a través de los re renders y que sólo va a cambiar si un elemento del array de dependencias de useCallback cambia.

¿Qué es la igualdad referencial de JS y Cómo afecta useCallback?

const getFn = () => {
  const myFn = () => {
    console.log('executed')
  }

  return myFn
}

const fnA = getFn()
const fnB = getFn()

fnA() // executed
fnB() // executed

fnA === fnB // true o false???
fnA === fnA // true o false???

Es la manera en que JavaScript guarda y accede a diferentes tipos de datos.

En el código de ejemplo, fnA y fnB son DIFERENTES a pesar de que sean creadas a partir del mismo código.

Lo que nos permite hacer useCallback es evitar que suceda esta diferencia.

¿Por qué no usar useCallback siempre?

Porque si bien ayuda a resolver el problema de la igualdad referencial respecto a funciones, si no vas a necesitar hacer esas comparaciones, no vale la pena usarlo pues el costo es tener código innecesariamente complejo y verboso.

import { useEffect, useCallback } from 'react'

const MyComponent = () => {
  // Vale la pena???
  const myFn = useCallback(() => {
    console.log('myFn')
  }, [])

  useEffect(() => {
    myFn()
  }, [myFn])
}

En el ejemplo anterior, NO vale la pena.

¿Para qué sirve useMemo?

Para poder memorizar el resultado de operaciones complejas y así evitar sus re definiciones en re renders de manera innecesaria.

¿Cómo sería un ejemplo de useMemo?

Considera el siguiente código:

import React from 'react'

const createArray = (length) => {
  let i = length
  const arr = []
  while (i--) {
    arr[i] = 0
  }

  return arr
}

const expensiveCalc = (myArray) => {
  console.log('expensiveCalc executed')
  let c = 0
  for (let i = 0; i < myArray.length; i++) {
    for (let j = 0; j < myArray.length; j++) {
      c = c + 1
    }
  }

  return c
}

export const Loop = ({ arrayLength }) => {
  const result = expensiveCalc(createArray(arrayLength))

  return <p>Iterations: {result.toLocaleString()}</p>
}

En la función expensiveCalc estamos haciendo un ciclo for dentro de otro for, algo que se prefiere evitar dentro de lo posible porque es una operación de complejidad N al cuadrado.

Pero dado este ejemplo, una manera de evitar que el componente Loop re ejecute el mismo cálculo en cada re render, es con useMemo.

export const Loop = ({ arrayLength }) => {
  const result = useMemo(() => expensiveCalc(createArray(arrayLength)), [])

  return <p>Iterations: {result.toLocaleString()}</p>
}

¿Para qué sirve useRef?

Para poder crear referencias a valores dentro de un componente que pueden ser elementos del DOM o variables primitivas o estructurales de JS, que al modificarlos, no ejecutarán un re render como lo haría una variable de estado.

¿Qué usos puedes darle a useRef?

Considera el siguiente ejemplo:

import { useRef } from 'React'

const Form = () => {
  const inputEl = useRef(null)

  return (
    <p>
      Name:
      <input type="text" ref={inputEl} />
    </p>
  )
}

Puedes hacer un autofocus o acceder de manera impetariva al value de ese input como lo harías con JS vanilla.

React Senior Interview Questions

En una entrevista de React Senior Developer hay preguntas Avanzadas que pueden involucrar los temas como:

Diseño y principios de Software.
Patrones de diseño.
Algoritmos y estructura de datos.
Performance de una aplicación.
Arquitectura de software.

También se evalúan mucho tus soft skills o habilidades suaves durante la entrevista: tu capacidad de comunicación, inteligencia emocional (cómo manejas cuando te pones nervioso o te recuperas de un error), etc.

Por cierto, Si quieres saber más a detalle sobre las diferencias de habilidades entre un Junior y un Senior en React, te recomiendo este vídeo:

Ahora sí, pasemos a las preguntas y respuestas de una entrevista de React JS Senior.

¿Qué es Redux en React JS?

Es una biblioteca que te facilita implementar la arquitectura Flux en React JS por medio HOC o custom hooks.

¿Por qué Redux es usado en React JS?

Porque en apps grandes facilita el state management global, es decir, delegar a Redux la responsabilidad del estado global de la app como única fuente de la verdad.

¿Qué es Dispatch en React Redux?

Es una utilidad que nos permite desencadenar actualizaciones del estado global por medio de actions.

¿Qué es Thunk en React Redux?

Es una utilidad independiente de Redux que nos permite ejecutar actions asíncronos de manera más eficiente.

¿Qué es el Virtual DOM?

Es una copia virtual del DOM que es guardada por JavaScript y es usado para que React pueda actualizar el DOM real con un buen performance.

¿Qué son los Syntethic Events en React?

Son un "wrapper" o abstracción que engloba el comportamiento de los eventos de los diferentes navegadores y sirve para tener compatibilidad con ellos.

¿Cómo aplicas validaciones a los Props?

Con PropTypes o TypeScript.

¿Qué son los portales en React?

Son parte de la API de React y permiten hacer render de un componente hijo por fuera de la jerarquía del árbol de componentes en el que está su padre.

¿Qué es Context API?

Es parte del API nativo de React JS y permite crear una comunicación entre un árbol de componentes sin necesidad de pasar props.

¿Cómo manejas errores de código?

Puedes usar el ciclo componentDidCatch en un componente tipo clase (en un futuro podrás usarlo con hooks).

¿Una app de React está tardando en cargar, ¿Cómo investigas el problema?

Se puede revisar desde los archivos CSS y JS que se cargan en el navegador, los requests a un servicio, hasta el performance de los componentes. Es un tema que puede ser un post idenpendiente.

¿Qué es memoization y Cómo se usa en React?

Es una técnica de performance que nos permite almacenar en memoria (tipo caché) funciones, resultados de cálculos complejos o componentes para evitar hacer re renders innecesarios. Se puede usar con useMemo, useCallback y otras estrategias.

Puedes ver más sobre el hook useMemo en este link.

¿Qué es Lazy Loading en React?

Es una manera de cargar el código de un componente hasta cuando va a ser utilizado, esto con fines de mejora de performance.

¿Qué es Code Splitting?

Es una técnica de performance que consiste en separar el código transpilado de la app y entregarlo al cliente hasta cuando lo va realmente a necesitar usar.

¿Cómo combinarías dos proyectos independientes de React para que funcionen en una misma app?

Podrías incluir uno dentro de otro creando un proyecto como módulo de npm que sea instalable tipo npm i my-proyect o usar microfrontend.

¿Qué es Microfrontend?

Es un tipo de arquitectura en el que separas una app frontend grande en sub apps independientes. Es el equivalente al micro services en el BE.

¿Qué son los Design Principles"?

Los principios de software son una guía o propuesta que nos ayudan a crear software con mayor calidad. Por ejemplo: SOLID, DRY, YAGNI, KISS, etc.

¿Qué es SOLID y cómo lo aplicas en React JS?

Los principios SOLID son un 5 principios de diseño (Single responsibility, Open - close, Liskov substitution, Interface segregation, Dependency injection y Sí puedes aplicarlos en React.

Si quieres profundizar más, te recomiendo este tutorial de los Principios SOLID en React JS

¿Se pueden aplicar patrones de diseño en React JS?

Puedes aplicar patrones de diseño tradicionales en JavaScript vanilla, y en React JS puedes aplicar patrones que son propios (no los tradicionales). Por ejemplo: HOC, Render Props o Custom Hooks.

Si quieres ver ejemplos de patrones, te recomiendo este curso que publiqué en el canal de YouTube de Developero.

¿Qué es el principio DRY?

"Don't Repeat Yourself, que nos sugiere evitar la duplicidad".

¿Qué es Render Props en React?

Es un patrón de React JS que nos permite invertir la responsabilidad del render por medio de props, que son funciones y comúnmente se llaman "render", o por medio del children.

¿Qué es un HOC y para qué sirve?

Es un patrón en React JS usado para reutilizar lógica. Es una función que recibe por parámetro un componente y retorna un componente nuevo enriquecido con la lógica deseada.

¿Qué es un Custom Hook y para qué sirve?

Es un patrón en React JS usado para crear hooks propios y así reutilizar lógica. Pueden usar otros hooks y sólo pueden ser usados en componentes funcionales.

¿Qué es Props Drilling y cómo lo resuelves en React?

Es un anti patrón que consiste en pasar props en un árbol de componentes de manera innecesaria. Lo puedes resolver con composición o con manejo de estado global (Redux o Context).

¿Cómo haces pruebas automatizadas en el FE con React?

Puedes usar herramientas de testing como Jest y React Testing Library, y puedes hacer unit, integration y E2E testing.

¿Qué es TDD?

Test Driven Development es una técnica de desarrollo que consiste en ciclos de desarrollo en los que haces primero un test que falle, luego hacer lo mínimo para que pase y al final, un refactor.

¿Qué es un Mock de Jest?

Un mock en Jest es una función que funciona como un stub y spy a la vez, y es usado para hacer unit testing cuando hay dependencias externas.

¿Cómo probarías un componente que consume una API?

Podría hacer un mock de axios o fetch para un unit test, o usar Mock Service Worker para un integration test.

¿Qué consideras que sería un "buen test" en una app de React?

Considero que un buen test es aquél que prueba el comportamiento del usuario en vez de detalles de implementación y que va ligado a criterios de aceptación.

Más sobre React JS Interviews

Si quieres saber más sobre entrevistas en React JS, te recomiendo que veas la siguiente simulación para una entrevista de "system design" que hice a un miembro de la comunidad.

Más recursos sobre React JS

Si quieres aprender más sobre React JS, te recomiendo que veas los siguientes recursos:

React js interview questions