React Interview Book

Question 1

¿Qué es JSX y cómo funciona en JavaScript?

Answer 1

• JSX es una extensión de sintaxis para JavaScript basada en ES6, que permite escribir código similar a HTML dentro de JavaScript, sin necesidad de métodos como createElement() o appendChild().
• Es necesario usar un compilador como Babel para transformar JSX en JavaScript regular porque los navegadores no pueden entender JSX directamente.

Ventajas de JSX:
1. Facilita la lectura y comprensión de la estructura del componente.
2. Ayuda visual para escribir código de interfaz.
3. Permite crear componentes reutilizables.
4. Muestra errores y advertencias útiles en React.
5. Optimiza el rendimiento durante la traducción a JavaScript.

Esto desglosa la información en conceptos clave para que sea más fácil de recordar y estudiar.

Question 2

¿Qué son los componentes puros en React y cómo optimizan el rendimiento?

Answer 2

Respuesta:

• Los componentes puros renderizan la misma salida siempre que los props y el estado no cambien.
• En componentes de función, se usa React.memo() para evitar re-renderizados innecesarios mediante comparaciones superficiales de props y estado.

Ejemplo:
Un componente hijo envuelto en React.memo() no se re-renderiza si recibe los mismos props.

Beneficio: Ayuda a mejorar el rendimiento al evitar renderizados innecesarios y mantener la eficiencia de la aplicación.

Question 3

Pregunta: ¿Qué es un componente de orden superior (HOC) en React?

Answer 3

• Un HOC es una función que toma un componente y devuelve un nuevo componente.
• Los HOCs permiten reutilizar lógica entre componentes, compartiendo props y estado.
• No forman parte de la API de React, pero son una técnica avanzada para mejorar la modularidad.

Ejemplo:

const withHigherOrderComponent = (OriginalComponent) => (props) =>
  <OriginalComponent {...props} />;

Uso común: Librerías como Redux (con connect) y Relay utilizan HOCs para gestionar la lógica de sus componentes.

Question 4

¿Qué es el estado (state) en React?

Answer 4

Pregunta: ¿Qué es el estado (state) en React?

Respuesta:

• El estado es un objeto incorporado en JavaScript que almacena valores de propiedades pertenecientes a un componente. Es privado y completamente controlado por el componente.
• Cada vez que el estado cambia, el componente se vuelve a renderizar.

Ejemplo:

```js
import React, { useState } from “react”;

function User() {
const [message, setMessage] = useState(“Welcome to React world”);
return (
<>
<h1>{message}</h1>
</>
);
}
~~~

En este código, se utiliza el hook useState para añadir estado al componente User. useState devuelve un array con el estado actual y una función para actualizarlo.

Question 5

¿Cuáles son las principales diferencias entre props y state en React?

Answer 5

• Props: Son de solo lectura e inmutables. Se pasan del componente padre al hijo y pueden ser accedidos por los componentes hijos. Se utilizan para la comunicación entre componentes y permiten la reutilización de componentes.
• State: Es mutable y puede cambiar de forma asíncrona. Es gestionado por el propio componente y no puede ser accedido por los componentes hijos. Se utiliza para renderizar cambios dinámicos y no permite la reutilización de componentes.

Nota: A diferencia de las props, el estado puede actualizarse de diversas maneras, lo que permite manejar cambios en la interfaz de usuario.

Question 6

¿Cómo agrupa React múltiples actualizaciones de estado?
How does React batch multiple state updates?

Answer 6

React optimiza el rendimiento de la aplicación evitando que los componentes se vuelvan a renderizar con cada actualización de estado. Este proceso, conocido como batching, permite que múltiples actualizaciones de estado se agrupan dentro de los manejadores de eventos utilizando hooks integrados.

• React 17: Soporta el batching solo para eventos del navegador.
• React 18: Introduce un batching mejorado llamado automatic batching, que permite agrupar actualizaciones de estado desde cualquier ubicación, no solo desde eventos del navegador. Esto incluye manejadores de eventos nativos, operaciones asíncronas, timeouts e intervalos.

Ejemplo de automatic batching:

```js
import { useState } from ‘react’;

export default function MultiState() {
const [count, setCount] = useState(0);
const [message, setMessage] = useState(‘Batching’);
console.log(‘Application re-rendered’);

const handleAsyncFetch = () => {
fetch(‘https://jsonplaceholder.typicode.com/todos/1’).then(() => {
// Se activa solo una re-renderización debido al automatic batching
setCount(count + 1);
setMessage(‘Automatic batching’);
});
};

return (
<>
<h1>{count}</h1>
<button onClick={handleAsyncFetch}>Click Me!</button>
</>
);
}
~~~

En este ejemplo, aunque se actualizan dos variables de estado, React agrupará automáticamente estas actualizaciones, lo que significa que el componente solo se volverá a renderizar una vez.

Question 7

¿Se puede prevenir el batching automático en React?

Answer 7

Sí, se puede prevenir el automatic batching en React utilizando la función flushSync de ReactDOM. Aunque el batching automático optimiza el rendimiento de renderizado, hay situaciones en las que es necesario re-renderizar el componente para cada actualización de estado o cuando una actualización de estado depende del valor de otra.

Uso de flushSync:
Esta función es útil cuando necesitas aplicar actualizaciones inmediatamente al DOM, especialmente al integrar con código de terceros, como APIs del navegador y bibliotecas de UI.

Ejemplo:
En una aplicación simple de lista de tareas, si deseas actualizar la posición de desplazamiento después de agregar una nueva tarea, puedes usar flushSync para asegurarte de que el estado más reciente se actualice de inmediato:

```js
const handleAddTodo = (todoName) => {
flushSync(() => {
setTodos([…todos, { id: uuid(), task: todoName }]);
});
todoListRef.current.scrollTop = todoListRef.current.scrollHeight;
};
~~~

Nota: El uso de flushSync no es común y puede afectar negativamente el rendimiento de la aplicación si se usa con frecuencia, por lo que se debe tener cuidado al implementarlo.

Question 8

¿Cómo actualizar objetos dentro del estado en React?

Answer 8

No debes actualizar directamente el objeto de estado de React. En su lugar, debes crear un nuevo objeto o hacer una copia del objeto existente y luego establecer el estado con el nuevo objeto.
ASI NO:

```js
function WeatherReport() {
const [weather, setWeather] = useState({
temperature: 26,
city: “Singapore”,
});

const handleWeatherChange = (e) => {
if (e.target.name === “temperature”) {
weather.temperature = e.target.value; // Esto no funcionará
}
};
~~~

ASI:

```js
const handleWeatherChange = (e) => {
setWeather({
…weather,
[e.target.name]: e.target.value
});
};
~~~

Question 9

¿Cómo actualizar objetos de estado anidados en React?

Answer 9

Actualizar objetos de estado en el nivel superior es sencillo con la sintaxis de propagación (spread syntax). Sin embargo, al tratar con objetos de estado anidados, debes asegurarte de copiar correctamente todos los niveles del objeto que deseas actualizar.

Para actualizar un objeto anidado junto con un objeto de nivel superior, puedes usar la sintaxis de propagación en una única llamada de función de actualización de estado. Por ejemplo, si tienes un estado de usuario que incluye una dirección, puedes actualizar un campo específico, como el código postal, de la siguiente manera:

```js
setUser({
…user,
address: {
…user.address,
postalCode: 75015
}
});
~~~

En este código:

• ...user crea una copia del objeto de usuario existente.
• address: { ...user.address, postalCode: 75015 } crea una nueva copia del objeto de dirección, actualizando solo el postalCode.

Este método asegura que no se pierdan las propiedades existentes en el objeto anidado y permite una actualización eficaz del estado.

Question 10

¿Qué es la prop key y cuál es su propósito en React?

Answer 10

La prop key es un atributo especial que debes incluir al crear una lista de elementos en un componente de React. Su función principal es ayudar a React a identificar qué elementos han cambiado, sido añadidos o eliminados en la lista.
Si no se suministra una prop key, la lista puede renderizarse correctamente en el navegador, pero se generará un mensaje de advertencia en la consola
Se recomienda utilizar un valor de ID único del conjunto de datos como prop key. Este valor puede ser una cadena o un número. Al hacerlo, mejoras el rendimiento de las actualizaciones de la interfaz y evitas posibles problemas de renderización.

Question 11

¿Cómo se diferencia el manejo de eventos en React del manejo de eventos en HTML?

Answer 11

1. Convención de nombres:
   
   • En HTML, los eventos se escriben en minúsculas (e.g., onclick).
   • En React, se utilizan camelCase (e.g., onClick).
2. Evitando el comportamiento predeterminado:
   
   • En HTML, se puede evitar el comportamiento predeterminado devolviendo false en el controlador.
   • En React, se usa event.preventDefault() para lograrlo.
3. Invocando funciones:
   
   • En HTML, se pueden usar paréntesis al invocar funciones o addEventListener().
   • En React, se especifica el nombre del método entre llaves {} (e.g., onClick={handleSignUp}).

Estas diferencias son clave para entender cómo funcionan los eventos en React en comparación con HTML.

Question 12

¿Qué es el DOM virtual?

Answer 12

El DOM virtual es una representación ligera en memoria del DOM real. React lo utiliza para minimizar las operaciones del DOM real al re-renderizar la interfaz de usuario, lo que mejora el rendimiento. La sincronización entre el DOM virtual y el real ocurre mediante el proceso de reconciliación, gestionado por la librería ReactDOM, y se ejecuta entre la llamada a la función de renderizado y la visualización de los elementos en pantalla.

Question 13

¿Cómo funciona el DOM Virtual?

Answer 13

React y Vue.js utilizan el DOM virtual para abstraer las operaciones manuales del DOM y facilitar el desarrollo. A continuación, se describe el funcionamiento en 4 pasos con un ejemplo simple de un formulario de búsqueda de ciudades.

Ejemplo: Formulario de Búsqueda de Ciudades
```javascript
function CitySearch() {
return (
<div>
<h2>Find city:</h2>
<form>
<span>City:</span>
<input onChange={handleCitySearch} />
</form>
</div>
);
}
~~~

Pasos del DOM Virtual

1. Creación inicial del DOM Virtual
   Al renderizar la aplicación por primera vez, React crea una representación virtual del DOM y la almacena en memoria.
   🔹 No se afecta la UI en este punto.
2. Actualización del DOM Virtual
   Cuando cambia el estado de la aplicación (por ejemplo, al escribir en el campo de texto), React crea un nuevo DOM virtual.
   🔹 No se realiza ninguna modificación visual en la interfaz todavía.
3. Proceso de reconciliación
   React compara el nuevo DOM virtual con la versión anterior usando un algoritmo de diferencia (diffing).
   🔹 Este proceso es llamado reconciliación.
4. Actualización del DOM Real
   Tras identificar los cambios, React actualiza las partes correspondientes del DOM real utilizando la librería ReactDOM.
   🔹 Solo se aplican las modificaciones necesarias, evitando recargas completas.

Este mecanismo optimiza el rendimiento, permitiendo actualizaciones rápidas y eficientes en la interfaz sin necesidad de redibujar toda la página.

Question 14

¿Cuáles son las ventajas del flujo de datos unidireccional en React?

Answer 14

El flujo de datos unidireccional ofrece varios beneficios importantes:

Fuente única de verdad: Provee una única referencia para los datos, lo que facilita la coherencia.
Depuración sencilla: Los desarrolladores saben de dónde vienen los datos y hacia dónde van, facilitando la detección de errores.
Menos propenso a errores: Al fluir en una sola dirección, el programa se vuelve más estable y fácil de controlar.
Eficiencia: Se evita el consumo innecesario de recursos al mantener límites claros en el flujo de datos.
Nota: Aunque el flujo de datos y los conceptos de estado y props ayudan a gestionar la interfaz, en ocasiones será necesario acceder directamente a elementos del DOM. Usar enfoques como document.getElementById puede volverse engorroso, por lo que más adelante se presentarán alternativas más eficientes.

Question 14

¿Puedes describir el flujo de datos unidireccional en React?

Answer 14

El flujo de datos unidireccional (o one-way data binding) significa que los datos fluyen en una sola dirección entre las diferentes partes de una aplicación. Esta técnica ya es común en la programación reactiva funcional.

En React, los datos se transmiten desde el componente padre al hijo mediante props, pero no al revés. Los componentes hijos no pueden actualizar directamente los datos que reciben del padre. Esta restricción evita el uso de un flujo bidireccional y fomenta una arquitectura de datos clara.

Actualización de datos: La única forma en que el hijo puede influir en el estado del componente padre es disparando eventos.
Nota: A diferencia de React, Vue.js permite un flujo bidireccional de datos (two-way data binding) entre los componentes.

Question 14

¿Qué son las refs en React y cómo se crean?

Answer 14

Respuesta:
Las refs (abreviatura de “referencias”) permiten acceder a elementos del DOM o componentes React creados durante la renderización. Las refs son objetos JavaScript con una propiedad current que apunta al nodo del DOM correspondiente.

Cómo crear refs
1. Hook useRef: Se usa en componentes funcionales.
2. Ejemplo de uso (enfocar un input al cargar):
```javascript
import { useRef, useEffect } from ‘react’;

export default function SignUpForm() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return (
<>
<input type=”email” ref={inputRef} />
<button>Verify Email</button>
</>
);
}
```
3. createRef: Se utiliza en componentes de clase para crear refs.

Question 15

¿Cuál es el propósito principal de las refs en React?

Answer 15

Respuesta:
El propósito principal de las refs es modificar un componente hijo de manera imperativa, fuera del flujo unidireccional de datos.

Casos comunes de uso:
- Control de UI:
- Enfocar un input, seleccionar texto o controlar la reproducción de audio.
- Ejemplo:

javascript
    const playAudio = () => audioRef.current.play();
    const pauseAudio = () => audioRef.current.pause();
   

- Animaciones imperativas:
- Animar elementos o cambiar estilos según eventos (como scroll).
- Ejemplo:

javascript
    const block = blockRef.current;
    const { y } = block.getBoundingClientRect();
    setBackground(y <= 0 ? 'white' : 'black');
   

- Integración con bibliotecas externas:
- Conectar plugins como DataTable.js o select2 sin reescribirlos.

Nota: Es recomendable evitar refs si es posible implementar la tarea de manera declarativa.

Question 16

prop drilling