gem-hunter
Language: Astro
Preguntas típicas sobre React para entrevistas de trabajo ⚛️
De cero a experto. Con respuestas detalladas en Español 🇪🇸
Deja tu ⭐ si te gusta el proyecto.
Streams de programación en Twitch: twitch.tv/midudev
Comunidad de desarrollo en Discord: discord.gg/midudev
children en React?class?useState?useReducer?useEffect?useEffectuseEffectuseId?useEffect puede tener un componente?useEffect correctamenteuseEffect y useLayoutEffect?if en el renderizado de un componente?index como key en un listado de React?useMemo?useMemo para optimizar nuestros componentes?useCallback?useCallback para optimizar nuestros componentes?useCallback y useMemo?useRef?useLayoutEffect?
StrictMode en React?SyntheticEvent en React?flushSync en React?useTransition y cuándo deberías usarlo?useActionState?useOptimistic?useFormStatus y qué aporta junto a las Server Actions?useFormState y cuándo conviene usarlo?action y el atributo formAction en React/Next.js?useSyncExternalStore?React.memo y cuándo es útil?ReactDOM.render, createRoot y hydrateRoot?Suspense en React y para qué se usa?React.lazy y cómo se combina con Suspense?startTransition y en qué se diferencia de actualizar el estado de forma normal?forwardRef?ViewTransition en React?addTransitionType?browser de React DOM?useImperativeHandle?cloneElement de React?StrictMode renderiza dos veces la aplicación?useEffect en React?useDebugValue?Profiler en React?renderToStaticNodeStream() y renderToPipeableStream()?useDeferredValue?renderToReadableStream()?use en React y para qué se utiliza?useInsertionEffect?useMemo, useCallback, useTransition y useDeferredValue para optimizar el rendimiento?React es una biblioteca de JavaScript de código abierto para construir interfaces de usuario. Está basada en la componetización de la UI: la interfaz se divide en componentes independientes que pueden tener estado local y recibir datos por props. Cuando cambian los datos relevantes de un componente, React vuelve a renderizar la interfaz.
Esto hace que React sea una herramienta muy útil para construir interfaces complejas, ya que permite dividir la interfaz en piezas más pequeñas y reutilizables.
Fue creada en 2011 por Jordan Walke, un ingeniero de software que trabajaba en Facebook y que quería simplificar la forma de crear interfaces de usuario complejas.
Es una biblioteca muy popular y es usada por muchas empresas como Facebook, Netflix, Airbnb, Twitter, Instagram, etc.
Enlaces de interés:
Las características principales de React son:
Componentes: React está basado en la componetización de la UI. La interfaz se divide en componentes independientes, que contienen su propio estado. Cuando el estado de un componente cambia, React vuelve a renderizar la interfaz.
Virtual DOM: React usa un DOM virtual para renderizar los componentes. El DOM virtual es una representación en memoria del DOM real. Cuando el estado de un componente cambia, React vuelve a renderizar la interfaz. En lugar de modificar el DOM real, React modifica el DOM virtual y, a continuación, compara el DOM virtual con el DOM real. De esta forma, React sabe qué cambios se deben aplicar al DOM real.
Declarativo: React es declarativo, lo que significa que no se especifica cómo se debe realizar una tarea, sino qué se debe realizar. Esto hace que el código sea más fácil de entender y de mantener.
Unidireccional: React es unidireccional, lo que significa que los datos fluyen en una sola dirección. Los datos fluyen de los componentes padres a los componentes hijos.
Universal: React se puede ejecutar tanto en el cliente como en el servidor. Además, puedes usar React Native para crear aplicaciones nativas para Android e iOS.
Que React sea declarativo significa que describimos el resultado que queremos en la interfaz para un estado concreto, en vez de programar manualmente cada paso para manipular el DOM.
Es decir: declaramos el "qué" y React se ocupa del "cómo".
Esto aporta ventajas importantes:
Un ejemplo entre declarativo e imperativo:
// Declarativo const element = <h1>Hello, world</h1> // Imperativo const element = document.createElement('h1') element.innerHTML = 'Hello, world'
Un componente es la unidad fundamental de construcción en React. Es una pieza de interfaz autónoma y reutilizable que encapsula su estructura (JSX), su comportamiento (eventos y lógica), y en muchos casos también su estado.
Pensar en componentes es pensar en términos de composición: en lugar de construir una pantalla como un bloque monolítico, la dividimos en partes pequeñas y bien definidas (por ejemplo: Header, Sidebar, UserCard, Button). Esta forma de trabajar hace que la aplicación sea más mantenible, escalable y fácil de testear.
Un componente puede:
En React moderno, los componentes se escriben principalmente como funciones. Históricamente también se han usado clases, y es importante conocerlas para leer código legado, pero hoy el enfoque recomendado es funcional junto a hooks.
React usa JSX para declarar qué debe renderizar. JSX es una extensión de JavaScript que permite escribir un código más cercano visualmente a HTML, que mejora la legibilidad del código y hace que sea más fácil de entender.
Sin JSX, deberíamos usar React.createElement para crear los elementos de la interfaz manualmente de esta forma:
import { createElement } from 'react' function Hello() { // un componente es una función! 👀 return React.createElement( 'h1', // elemento a renderizar null, // atributos del elemento 'Hola Mundo 👋🌍!' // contenido del elemento ) }
Esto es muy tedioso y poco legible. Por eso, React usa JSX para declarar qué debe renderizar. Por eso usamos JSX de esta forma:
function Hello() { return <h1>Hola Mundo 👋🌍!</h1> }
Ambos códigos son equivalentes.
El JSX se transforma en código JavaScript compatible en el navegador usando un transpilador o compilador. El más famoso es a día de hoy Babel, que utiliza una serie de plugins para ser compatible con la transformación, pero existen otros como SWC.
Puedes ver cómo se transforma el JSX en el playground de código de Babel.
Hay casos especiales en los que un transpilador no es necesario. Por ejemplo, Deno tiene soporte nativo para la sintaxis JSX y no es necesario transformar el código para hacerlo compatible.
Un componente es una función o clase que recibe props y devuelve un elemento. Un elemento es un objeto que representa un nodo del DOM o una instancia de un componente de React.
// Elemento que representa un nodo del DOM { type: 'button', props: { className: 'button button-blue', children: { type: 'b', props: { children: 'OK!' } } } } // Elemento que representa una instancia de un componente { type: Button, props: { color: 'blue', children: 'OK!' } }
En React, un componente es una función (o, de forma histórica, una clase) que describe una parte de la interfaz.
Hoy en día, el enfoque recomendado es crear componentes funcionales:
function HelloWorld() { return <h1>Hello World!</h1> }
También puedes encontrarte componentes de clase en código legado:
import { Component } from 'react' class HelloWorld extends Component { render() { return <h1>Hello World!</h1> } }
Reglas básicas al crear componentes:
Como criterio de arquitectura, cuanto más pequeños y específicos sean tus componentes, más fácil será mantener y escalar la aplicación.
Las props son las propiedades de un componente. Son datos que se pasan de un componente a otro. Por ejemplo, si tienes un componente Button que muestra un botón, puedes pasarle una prop text para que el botón muestre ese texto:
function Button(props) { return <button>{props.text}</button> }
Podríamos entender que el componente Button es un botón genérico, y que la prop text es el texto que se muestra en el botón. Así estamos creando un componente reutilizable.
Debe considerarse además que al usar cualquier expresión JavaScript dentro de JSX debe envolverlos con {}, en este caso el objeto props, de otra forma JSX lo considerará como texto plano.
Para usarlo, indicamos el nombre del componente y le pasamos las props que queremos:
<Button text="Haz clic aquí" /> <Button text="Seguir a @midudev" />
Las props son una forma de parametrizar nuestros componentes igual que hacemos con las funciones. Podemos pasarle cualquier tipo de dato a un componente, incluso otros componentes.
La prop children es una prop especial que se pasa a los componentes. Es un objeto que contiene los elementos que envuelve un componente.
Por ejemplo, si tenemos un componente Card que muestra una tarjeta con un título y un contenido, podemos usar la prop children para mostrar el contenido:
function Card(props) { return ( <div className='card'> <h2>{props.title}</h2> <div>{props.children}</div> </div> ) }
Y luego podemos usarlo de la siguiente forma:
<Card title='Título de la tarjeta'> <p>Contenido de la tarjeta</p> </Card>
En este caso, la prop children contiene el elemento <p>Contenido de la tarjeta</p>.
Conocer y saber usar la prop children es muy importante para crear componentes reutilizables en React.
Aunque ambos afectan al renderizado, cumplen funciones distintas:
Una regla práctica para recordarlo:
Entender esta diferencia es fundamental para diseñar componentes predecibles y mantener un flujo de datos unidireccional.
Sí, se puede inicializar el estado con el valor de una prop. Pero hay que tener en cuenta que, si la prop cambia, el estado no se actualizará automáticamente. Esto es porque el estado se inicializa una vez, cuando el componente se monta por primera vez.
Por ejemplo, con componentes funcionales:
const Counter = () => { const [count, setCount] = useState(0) return ( <div> <Count count={count} /> <button onClick={() => setCount(count + 1)}>Aumentar</button> </div> ) } const Count = ({ count }) => { const [number, setNumber] = useState(count) return <p>{number}</p> }
En este caso, el componente Count inicializa su estado con el valor de la prop count. Pero si cambia el valor de la prop count, el estado no se actualizará automáticamente. Por lo que al hacer click, siempre veremos el número 0 en pantalla.
En este ejemplo, lo mejor sería simplemente usar la prop count en el componente Count y así siempre se volvería a renderizar.
Es una buena práctica evitar al máximo los estados de nuestros componentes y, siempre que se pueda, simplemente calcular el valor a mostrar a partir de las props.
En el caso que necesites inicializar un estado con una prop, es una buena práctica añadir el prefijo de initial a la prop para indicar que es el valor inicial del estado y que luego no lo usaremos más:
const Input = ({ initialValue }) => { const [value, setValue] = useState(initialValue) return <input value={value} onChange={e => setValue(e.target.value)} /> }
Es un error muy común pensar que la prop actualizará el estado, así que tenlo en cuenta.
El renderizado condicional es la forma de mostrar un componente u otro dependiendo de una condición.
Para hacer renderizado condicional en React usamos el operador ternario:
function Button({ text }) { return text ? <button>{text}</button> : null }
En este caso, si la prop text existe, se renderiza el botón. Si no existe, no se renderiza nada.
Es común encontrar implementaciones del renderizado condicional con el operador &&, del tipo:
function List({ listArray }) { return listArray?.length && listArray.map(item => item) }
Parece que tiene sentido... si el length es positivo (mayor a cero) pintamos el map. !Pues no! ❌ Cuidado, si tiene length de cero ya que se pintará en el navegador un 0.
Es preferible utilizar el operador ternario. Kent C. Dodds tiene un artículo interesante hablando del tema. Use ternaries rather than && in JSX
Nota: aunque el enunciado hable de "componente", la prop className se aplica sobre los elementos JSX/HTML que el componente renderiza.
En React usamos la prop className para definir el valor del atributo class del HTML:
function Button({ text }) { return <button className='button'>{text}</button> }
Es decir, las clases que pones en className son clases HTML normales (pueden usarse para CSS, tests, selectores, utilidades, etc.). En JSX no se usa class porque es una palabra reservada en JavaScript, por eso React utiliza className.
Nota: al igual que con className, el estilo en línea se asigna a elementos JSX/HTML renderizados por el componente.
Para aplicar estilos CSS en línea a un componente en React usamos la prop style. La diferencia de cómo lo haríamos con HTML, es que en React los estilos se pasan como un objeto y no como una cadena de texto (esto puede verse más claro con los dobles corchetes, los primeros para indicar que es una expresión JavaScript, y los segundos para crear el objeto):
function Button({ text }) { return <button style={{ color: 'red', borderRadius: '2px' }}>{text}</button> }
Fíjate que, además, los nombres de las propiedades CSS están en camelCase.
En la práctica, esa condición termina afectando a props de estilo (style, className) sobre los elementos renderizados por el componente.
Puedes aplicar estilos de forma condicional a un componente en React usando la prop style y un operador ternario:
function Button({ text, primary }) { return <button style={{ color: primary ? 'red' : 'blue' }}>{text}</button> }
En el caso anterior, si la prop primary es true, el botón tendrá el color rojo. Si no, tendrá el color azul.
También puedes seguir la misma mecánica usando clases. En este caso, usamos el operador ternario para decidir si añadir o no la clase:
function Button({ text, primary }) { return <button className={primary ? 'button-primary' : ''}>{text}</button> }
También podemos usar bibliotecas como classnames:
import classnames from 'classnames' function Button({ text, primary }) { return <button className={classnames('button', { primary })}>{text}</button> }
En este caso, si la prop primary es true, se añadirá la clase primary al botón. Si no, no se añadirá. En cambio la clase button siempre se añadirá.
El renderizado de listas es la forma de iterar un array de elementos y renderizar elementos de React para cada uno de ellos.
Para hacer renderizado de listas en React usamos el método map de los arrays:
function List({ items }) { return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ) }
En este caso, se renderiza una lista de elementos usando el componente List. El componente List recibe una prop items que es un array de objetos del tipo [{ id: 1, name: "John Doe" }]. El componente List renderiza un elemento li por cada elemento del array.
El elemento li tiene una prop key que es un identificador único para cada elemento. Esto es necesario para que React pueda identificar cada elemento de la lista y actualizarlo de forma eficiente. Más adelante hay una explicación más detallada sobre esto.
Si vas a escribir un comentario fuera del renderizado de un componente, puedes usar la sintaxis de comentarios de JavaScript sin problemas:
function Button({ text }) { // Esto es un comentario /* Esto es un comentario de varias líneas */ return <button>{text}</button> }
Si vas a escribir un comentario dentro del renderizado de un componente, debes envolver el comentario en llaves y usar siempre la sintaxis de comentarios de bloque:
function Button({ text }) { return ( <button> {/* Esto es un comentario en el render */} {text} </button> ) }
De nuevo, estrictamente hablando, el evento se conecta en el elemento JSX renderizado (button, input, form, etc.), aunque lo configuremos desde el componente.
En React, los eventos se registran con props que siguen la convención on + nombre del evento en camelCase (onClick, onChange, onSubmit, etc.).
La clave es pasar una función como manejador del evento, no ejecutar la función durante el render.
function Button({ text, onClick }) { return <button onClick={onClick}>{text}</button> }
En este caso, Button recibe una prop onClick y delega en ella su comportamiento al hacer clic. Este patrón permite crear componentes más reutilizables y desacoplados.
Si necesitas añadir lógica intermedia (tracking, validaciones, etc.), puedes encapsularla en una función interna:
function Button({ text, onClick }) { const handleClick = event => { // lógica previa onClick(event) } return <button onClick={handleClick}>{text}</button> }
Para pasar un parámetro a una función que maneja un evento en React podemos usar una función anónima:
function Button({ id, text, onClick }) { return <button onClick={() => onClick(id)}>{text}</button> }
Cuando el usuario hace clic en el botón, se ejecuta la función onClick pasándole como parámetro el valor de la prop id.
También puedes crear una función que ejecuta la función onClick pasándole el valor de la prop id:
function Button({ id, text, onClick }) { const handleClick = event => { // handleClick recibe el evento original onClick(id) } return <button onClick={handleClick}>{text}</button> }
El estado es un objeto que contiene datos que pueden cambiar en el tiempo. En React, el estado se usa para controlar los cambios en la interfaz.
Para que entiendas el concepto, piensa en el interruptor de una habitación. Estos interruptores suelen tener dos estados: encendido y apagado. Cuando accionamos el interruptor y lo ponemos en on entonces la luz se enciende y cuando lo ponemos en off la luz se apaga.
Este mismo concepto se puede aplicar a la interfaz de usuario. Por ejemplo, el botón Me Gusta de Facebook tendría el estado de meGusta a true cuando el usuario le ha dado a Me Gusta y a false cuando no lo ha hecho.
No solo podemos tener en el estado valores booleanos, también podemos tener objetos, arrays, números, etc.
Por ejemplo, si tienes un componente Counter que muestra un contador, puedes usar el estado para controlar el valor del contador.
Para crear un estado en React usamos el hook useState:
import { useState } from 'react' function Counter() { const [count, setCount] = useState(0) return ( <div> <p>Contador: {count}</p> <button onClick={() => setCount(count + 1)}>Aumentar</button> </div> ) }
Al usar el hook useState este devolverá un array de dos posiciones:
Suele usarse desestructuración para facilitar la lectura y ahorrarnos algunas líneas de código. Por otro lado, al pasarle un dato como parámetro al useState le estamos indicando su estado inicial.
Con un componente de clase, la creación del estado sería así:
import { Component } from 'react' class Counter extends Component { constructor(props) { super(props) this.state = { count: 0 } } render() { return ( <div> <p>Contador: {this.state.count}</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Aumentar </button> </div> ) } }
Los Hooks son funciones especiales de React que permiten usar estado, efectos y otras capacidades del framework dentro de componentes funcionales.
Antes de su aparición, estas capacidades se asociaban sobre todo a componentes de clase. Con hooks, el modelo funcional pasó a ser la opción principal.
Algunos hooks fundamentales son:
useState: para estado local.useEffect: para sincronizar efectos secundarios.useMemo y useCallback: para optimización de cálculos y referencias.useRef: para referencias mutables o acceso al DOM.Además, React permite crear custom hooks, que son una forma excelente de reutilizar lógica con estado entre componentes sin duplicar código.
El hook useState es utilizado para crear variables de estado, quiere decir que su valor es dinámico, que este puede cambiar en el tiempo y eso requiere una re-renderización del componente d