La mayoría de los productos de IA todavía coloca el modelo dentro de una ventana de chat fija. Eso funciona para responder preguntas, pero se queda corto en flujos de reservas, listas de soporte o paneles operativos que necesitan tarjetas, formularios, tablas y acciones.

La UI generativa permite que el modelo ayude a componer la interfaz. La versión útil no genera píxeles sin control ni React que nadie revisó. Selecciona componentes y acciones de un catálogo que tu equipo ya mantiene.

En este artículo veremos json-render de Vercel Labs, la combinación experimental con jev, el papel de AI Gateway y una pequeña demo interactiva.

Por qué jev está llamando la atención en Vercel AI Gateway

Vercel informó que Jev fue el modelo adoptado más rápido en la historia de AI Gateway. Durante el primer día, TypeSafe AI llegó aproximadamente al 13 % de los equipos, cerca de 2 veces la familia GPT-5.6 y 6 veces Fable 5.1.

Jev es gratis en Vercel AI Gateway hasta el 25 de septiembre, una buena oportunidad para probar typesafe-ai/jev con composiciones reales.

La adopción no equivale a estar listo para producción. Sí demuestra que existe demanda por modelos capaces de tomar decisiones estructuradas, no solo de escribir textos largos.

Chat fijo frente a UI generativa

Chat fijo:      solicitud -> texto del LLM -> burbuja de chat
UI generativa:  solicitud -> elegir composición -> renderizar componentes aprobados

La aplicación sigue siendo dueña de los componentes, el acceso a datos, los manejadores, la validación y los permisos. El catálogo le da al modelo espacio para componer sin entregarle el control del producto.

Qué aporta json-render

json-render es un framework de UI generativa de Vercel Labs:

1. Defines un catálogo con componentes, acciones y propiedades de Zod.
2. El modelo genera una especificación JSON limitada a ese catálogo.
3. Tus componentes reales de React, o React Native, la renderizan.
4. SpecStream puede enviar parches JSONL para que la interfaz aparezca de forma progresiva.

El catálogo es un límite del producto. La creatividad permanece dentro del sistema de diseño.

Por qué las UI que generan árboles token a token pueden ser lentas

Una salida estructurada clásica le pide a un modelo grande que escriba un árbol JSON completo token a token. En una UI, ese árbol puede ser ancho y profundo, lo que retrasa la primera renderización útil.

El experimento público de Chris Tate combinó json-render con jev de TypeSafe AI, un modelo de decisiones estructuradas, mediante experimental_composeSpec y experimental_createEvaluator.

Cliente -> tu API (servidor) -> AI Gateway (typesafe-ai/jev) -> Spec -> React

import { experimental_createEvaluator } from "@json-render/core";

const evaluate = experimental_createEvaluator({
  apiKey: process.env.AI_GATEWAY_API_KEY!,
  model: "typesafe-ai/jev",
});

En este artículo, revelaré de manera clara y simplificada cómo React Hooks puede hacer magia en tus proyectos, tal como me hubiera gustado aprender cuando los descubrí.

🪝 Hooks: La magia de React

En React, los hooks son utilidades que nos permiten ejecutar código arbitrario en nuestros componentes basados en acciones específicas. Los hooks proporcionan una forma de reutilizar la lógica de estado y efectos secundarios en componentes funcionales de manera más simple y declarativa.

🚨 Importante: Esta guía utiliza fragmentos de código TypeScript para ilustrar los conceptos. Si no estás familiarizado con TypeScript, siéntete libre de ignorar la escritura de tipos en los ejemplos.

🌱 Hooks Básicos

Esta guía de referencia discutirá todos los hooks disponibles nativamente en React, pero primero, comencemos con los hooks básicos de React: useState, useEffect y useContext.

⚡ useState

Es un hook que permite a los componentes funcionales gestionar y mantener su estado interno. Puedes usarlo para declarar variables de estado y acceder a ellas en tus componentes funcionales.

La firma para el hook useState es la siguiente:

const [state, setState] = useState(initialState)

Aquí, state y setState se refieren al valor del estado y a la función de actualización devuelta al invocar useState con algún initialState.

Es importante tener en cuenta que cuando tu componente se renderiza por primera vez e invoca useState, el initialState es el estado devuelto por useState.

Además, para actualizar el estado, la función de actualización del estado setState debe invocarse con un nuevo valor de estado, como se muestra a continuación:

setState(newValue)

Al hacer esto, se encola un nuevo renderizado del componente. useState garantiza que el valor del state siempre será el más reciente después de aplicar actualizaciones.

Ejemplo de uso de useState en un componente React acerca de la tarjeta de seguimiento de X:

export function XFollowCard({ fullName, username, initialFollowing }: Props) {
  const [following, setFollowing] = useState(initialFollowing) // <-- Definición

  const text = following ? 'Siguiendo' : 'Seguir'

  const buttonClassName = following
    ? 'tw-followCard-button is-following'
    : 'tw-followCard-button'

  const handleClick = () => {
    setFollowing(!following) // Cambiando el estado
  }

  return (
    <article className='tw-followCard'>
      <header className='tw-followCard-header'>
        <img
          className='tw-followCard-avatar'
          alt='user avatar'
          src={`https://unavatar.io/${username}`}
        />
        <div className='tw-followCard-info'>
          <strong>{fullName}</strong>
          <span className='tw-followCard-infoUserName'>@{username}</span>
        </div>
      </header>

      <aside>
        <button className={buttonClassName} onClick={handleClick}>
          <span className='tw-followCard-text'>{text}</span>
          <span className='tw-followCard-stopFollow'>Dejar de seguir</span>
        </button>
      </aside>
    </article>
  )
}

🎬 useEffect

Es un hook de React que permite realizar efectos secundarios en componentes funcionales. Puedes usarlo para ejecutar código en respuesta a cambios en el componente, como hacer solicitudes a API, suscribirte a eventos o actualizar el DOM. useEffect recibe una función como argumento y la ejecuta después de que el componente se renderiza o cuando ciertas dependencias cambian.

La firma básica de useEffect es la siguiente:

useEffect(() => {
  //...
})

Ejemplo de uso de useEffect en un componente React:

const CAT_IMAGE_URL_PREFIX = 'https://cataas.com'

export function useCatImage({ fact }: { fact: string }) {
  const [imageUrl, setImageUrl] = useState()

  useEffect(() => {
    if (!fact) return

    const firstThreeWords = fact.split(' ', 3).join(' ')

    fetch(
      `${CAT_IMAGE_URL_PREFIX}/cat/says/${firstThreeWords}?size=50&color=red&json=true`
    )
      .then((res) => res.json())
      .then((response) => {
        const { url } = response
        setImageUrl(url)
      })
  }, [fact])

  return { imageUrl: `${CAT_IMAGE_URL_PREFIX}${imageUrl}` }
}

🧹 Limpiando un efecto

Algun código imperativo necesita ser limpiado para prevenir fugas de memoria. Por ejemplo, las suscripciones deben ser limpiadas, los temporizadores deben ser invalidados, etc. Para hacer esto, se retorna una función desde el callback pasado a useEffect:

useEffect(() => {
  const subscription = props.apiSubscription()

  return () => {
    // limpiar la suscripción
    subscription.unsubscribeApi()
  }
})

Se garantiza que la función de limpieza se invoque antes de que el componente sea eliminado de la interfaz de usuario.

⚠️ Evitar bucles infinitos

Cuando se utiliza useEffect en React, es crucial evitar bucles infinitos que pueden surgir de configuraciones incorrectas del efecto. Un error común es modificar el estado dentro del cuerpo del efecto de una manera que desencadene renderizaciones infinitas.

Causa común de bucles infinitos: Modificación directa del estado

useEffect(() => {
  // Incorrecto: Modificar el estado dentro del cuerpo del efecto
  setCounter(counter + 1)
}, [counter])

Este ejemplo provoca un bucle infinito al actualizar el estado dentro del efecto, desencadenando nuevas renderizaciones y reejecutando el efecto.

✅ Solución

useEffect(() => {
  // Correcto: Usa el callback the setCount para actualizar el estado basándo en el estado anterior.
  // Esto asegura que la actualización del estado no desencadene un bucle infinito.
  setCount(prevCount => prevCount + 1)
}, [count])

Evita bucles infinitos asegurándote de que las dependencias en el array de dependencias del useEffect son estables y no cambian dentro del cuerpo del efecto. En este caso, al utilizar el callback de setCount para actualizar el estado basándose en el estado anterior, evitamos el bucle infinito.

🤝 useContext

El problema que resuelve useContext radica en la necesidad de pasar datos a través de la jerarquía de componentes sin recurrir al prop drilling, que es cuando se pasan props manualmente a través de varios niveles de componentes. Este enfoque puede volverse engorroso e impráctico a medida que la aplicación crece, ya que cada componente intermedio tiene que transmitir las props, generando un código menos limpio y propenso a errores.

❌ Prop Drilling: El Desafío

Imagina un escenario en el que tenemos un ComponentA que necesita pasar datos a ComponentD. El prop drilling tradicional implicaría pasar las props a través de todos los componentes intermedios, incluso si ComponentB y ComponentC no necesitan esos datos.

// ComponentA.tsx
const ComponentA = ({ dataForD }: Props) => {
  return <ComponentB dataForD={dataForD} />
}

// ComponentB.tsx
const ComponentB = ({ dataForD }: Props) => {
  return <ComponentC dataForD={dataForD} />
}

// ComponentC.tsx
const ComponentC = ({ dataForD }: Props) => {
  return <ComponentD dataForD={dataForD} />
}

// ComponentD.tsx
const ComponentD = ({ dataForD }: Props) => {
  // Todo para usar el dataForD aquí
}

Este proceso, conocido como prop drilling, puede volverse inmanejable y complicado a medida que se agregan más componentes a la jerarquía.

✅ Solución: ¡useContext al Rescate!

useContext simplifica en gran medida esta tarea al permitirnos crear y consumir un contexto sin pasar manualmente las props a través de cada componente. Primero, creamos un contexto usando createContext:

// ThemeContext.ts
import { createContext } from 'react'
export const ThemeContext = createContext()

Luego, usamos el componente Provider para envolver nuestro árbol de componentes con el valor deseado:

// App.tsx
import React from 'react'
import { ThemeContext } from './ThemeContext'

const App = () => {
  return (
    <ThemeContext.Provider value='dark'>
      {/* Componentes anidados aquí */}
    </ThemeContext.Provider>
  )
}

Finalmente, en cualquier componente dentro de este contexto, podemos usar useContext para acceder a los datos sin pasar manualmente las props:

// Button.tsx
import React, { useContext } from 'react'
import { ThemeContext } from './ThemeContext'

export const Button = () => {
  const theme = useContext(ThemeContext)
  return <button className={theme}>Haz clic aquí</button>
}

Ten en cuenta que el valor pasado a useContext debe ser el objeto de contexto, es decir, el valor devuelto al invocar React.createContext, no ContextObject.Provider o ContextObject.Consumer.

Esta solución evita el engorroso prop drilling y proporciona una forma más limpia y eficiente de compartir datos entre componentes en una aplicación de React. useContext hace que la gestión de datos sea más elegante y fácil de mantener.

¡Adiós, prop drilling! 👋

🌟 Hooks Adicionales

Los siguientes hooks son variantes de los hooks básicos discutidos en las secciones anteriores. Si eres nuevo en los hooks, no te molestes en aprender estos por ahora. Solo son necesarios para casos específicos.

📌 useRef

useRef en React es un hook que facilita la creación de referencias mutables. A diferencia de useState, useRef no desencadena la actualización de componentes cuando su valor cambia, convirtiéndolo en una herramienta poderosa para almacenar datos que no afectan directamente la interfaz de usuario.

Así es como se utiliza el hook useRef:

import { useRef } from 'react'

const MyComponent = () => {
  const myRef = useRef(initialValue)
  // ...
}

🥷🏻 Desafío

El problema que resuelve useRef se hace evidente cuando necesitamos actualizar valores sin activar una actualización visual del componente. Para ilustrar esto, consideremos un escenario de búsqueda de películas:

export function useMovies({ search }: { search: string }) {
  const [movies, setMovies] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  const getMovies = async () => {
    // ❌ Esto es una mala práctica porque estamos obteniendo
    // las películas y volviendo a renderizar el componente
    // incluso si la búsqueda es la misma que la anterior.

    try {
      setLoading(true)
      setError(null)
      const newMovies = await searchMovies({ search })
      setMovies(newMovies)
    } catch (error: any) {
      setError(error.message)
    } finally {
      setLoading(false)
    }
  }

  return { movies, getMovies, loading, error }
}

En este caso, usar useState para el término de búsqueda provoca renderizaciones innecesarias cada vez que cambia el término de búsqueda. Aquí es donde useRef se convierte en una solución eficiente al permitirnos actualizar search sin afectar la interfaz de usuario:

export function useMovies({ search }: { search: string }) {
  const [movies, setMovies] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const previousSearch = useRef(search) // <-- Define una ref

  const getMovies = async () => {
    // ✅ Si la búsqueda actual es igual a la anterior, retorna
    if (previousSearch.current === search) return

    try {
      setLoading(true)
      setError(null)
      previousSearch.current = search
      const newMovies = await searchMovies({ search })
      setMovies(newMovies)
    } catch (error: any) {
      setError(error.message)
    } finally {
      setLoading(false)
    }
  }

  return { movies, getMovies, loading, error }
}

Con esta implementación, useRef ayuda a gestionar el valor de search sin causar actualizaciones visuales no deseadas, mejorando la eficiencia y la experiencia del usuario.

🧠 useMemo

El hook useMemo en React es una herramienta poderosa para optimizar el rendimiento al memorizar el resultado de una función. Su propósito principal es evitar cálculos innecesarios, reutilizando el valor calculado anteriormente si las dependencias no han cambiado.

Así es como se utiliza el hook useMemo:

const readTime = useMemo(() => {
  const wordsPerMinute = 200
  const words = text.trim().split(/\s+/).length
  const value = Math.ceil(words / wordsPerMinute)
  return `${value} min de lectura`
}, [text]) // solo recalcular si cambia el texto

El problema que aborda useMemo se hace evidente cuando necesitamos realizar cálculos costosos en un componente, pero esos cálculos no son necesarios cada vez que el componente se renderiza. Tomemos el ejemplo del componente Counter:

export function Counter({ count }: { count: number }) {
  const double = count * 2 // Costoso cálculo realizado en cada renderización

  return (
    <div>
      <p>Contador: {count}</p>
      <p>Doble: {double}</p>
    </div>
  )
}

En este caso, el valor doble se recalcula en cada renderización, incluso si count no ha cambiado. useMemo resuelve esto al memorizar el resultado del cálculo solo cuando las dependencias, en este caso, la propiedad count, han cambiado:

import { useMemo } from 'react'

export function Counter({ count }: { count: number }) {
  const double = useMemo(() => count * 2, [count])

  return (
    <div>
      <p>Contador: {count}</p>
      <p>Doble: {double}</p>
    </div>
  )
}

Con useMemo, si la propiedad count no ha cambiado, se evita el recálculo del doble y se reutiliza el valor calculado anteriormente. Esto mejora significativamente la eficiencia del componente, especialmente en situaciones donde los cálculos son más intensivos en recursos.

♻️ useCallback

El hook useCallback en React proporciona una forma de memorizar funciones. La principal ventaja es evitar la creación de nuevas funciones en cada renderización, devolviendo la función memorizada previamente si las dependencias no han cambiado.

Así es como se utiliza el hook useCallback:

const callbackMemorizado = useCallback(callback, arrayDependencia)

El problema que aborda useCallback se hace evidente cuando necesitamos pasar funciones a componentes hijos y queremos evitar la creación de nuevas instancias de esas funciones en cada renderización. Tomemos el ejemplo del componente Counter:

function Counter({ count, onIncrement }: Props) {
  const handleIncrement = () => {
    onIncrement(count)
  }

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={handleIncrement}>Incrementar</button>
    </div>
  )
}

En este caso, handleIncrement se recrea en cada renderización, lo cual no es eficiente, especialmente si onIncrement y count no han cambiado. useCallback aborda esto al memorizar la función solo cuando cambian las dependencias:

import { useCallback } from 'react'

export function Counter({ count, onIncrement }: Props) {
  const handleIncrement = useCallback(() => {
    onIncrement(count)
  }, [count, onIncrement

]) // solo recrear si count u onIncrement cambian

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={handleIncrement}>Incrementar</button>
    </div>
  )
}

Con useCallback, si count o onIncrement no han cambiado, se evita la creación de una nueva función y se reutiliza la función calculada previamente. Esto mejora la eficiencia y contribuye a un rendimiento del componente más óptimo.

🏷️ useId

useId es un hook de React diseñado para generar identificadores únicos, ideales para asignarlos a atributos de etiquetas HTML. Esta práctica resulta especialmente útil para mejorar la accesibilidad al establecer relaciones específicas entre elementos.

Así es como se utiliza el hook useId:

const passwordHintId = useId()

A continuación, el ID generado se utiliza en diferentes atributos:

<>
  <input type='password' aria-describedby={passwordHintId} />
  <p id={passwordHintId}>
</>

El problema que aborda useId surge cuando necesitamos asignar identificadores únicos a elementos HTML, especialmente en situaciones en las que un componente puede aparecer múltiples veces en la pantalla. Tomemos el ejemplo del componente PasswordField:

import { useId } from 'react'

export function PasswordField() {
  const passwordHintId = useId()

  return (
    <>
      <label>
        Contraseña:
        <input type='password' aria-describedby={passwordHintId} />
      </label>
      <p id={passwordHintId}>
        La contraseña debe tener 18 caracteres y contener caracteres especiales.
      </p>
    </>
  )
}

En este caso, useId se utiliza para generar un ID único (passwordHintId) que se asigna tanto al atributo aria-describedby del input como al id del párrafo. Esto asegura que aunque PasswordField aparezca varias veces en la pantalla, los IDs generados no entrarán en conflicto.

export default function App() {
  return (
    <>
      <h2>Elegir contraseña</h2>
      <PasswordField />
      <h2>Confirmar contraseña</h2>
      <PasswordField />
    </>
  )
}

En el componente App, donde se usa PasswordField dos veces, useId asegura que los identificadores generados automáticamente eviten duplicados y proporcionen una solución robusta para asignar IDs únicos en contextos repetidos. Esto contribuye a mejorar la accesibilidad y consistencia en la aplicación.

🕹️ useReducer

useReducer es un hook de React diseñado para gestionar el estado de un componente mediante un enfoque basado en acciones y reducciones, similar al patrón utilizado en Redux. Este hook se prefiere sobre useState cuando el estado de un componente es más complejo o cuando las actualizaciones de estado dependen del estado anterior o de acciones previas.

useReducer toma dos argumentos: una función de reducción y el estado inicial. La función de reducción recibe dos argumentos: el estado actual y una acción que describe cómo debería cambiar el estado. La función de reducción devuelve el nuevo estado.

Así es como se utiliza el hook useReducer:

const [state, dispatch] = useReducer(reducer, argumentoInicial, init)

El problema que aborda useReducer surge cuando el estado de un componente se vuelve más complejo y las actualizaciones de estado dependen de múltiples factores o acciones. Tomemos el ejemplo del componente Counter:

import { useState } from 'react'

export const Counter = () => {
  const [count, setCount] = useState(0)

  const handleIncrement = () => {
    setCount(count + 1)
  }

  const handleDecrement = () => {
    setCount(count - 1)
  }

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={handleIncrement}>Incrementar</button>
      <button onClick={handleDecrement}>Decrementar</button>
    </div>
  )
}

En este ejemplo, usamos useState para gestionar el estado del contador. Si bien esto puede funcionar para casos simples, a medida que la lógica del estado se vuelve más compleja o depende de acciones previas, el código puede volverse más difícil de mantener. useReducer proporciona una estructura más organizada y una solución más escalable para manejar estados y acciones complejas en situaciones donde el código podría volverse confuso usando solo useState. Abordaríamos este problema con useReducer de la siguiente manera:

// Define la función de reducción
const counterReducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'incrementar':
      return { count: state.count + 1 }
    case 'decrementar':
      return { count: state.count - 1 }
    default:
      return state
  }
}

export const Counter = () => {
  // Usa useReducer para gestionar el estado del contador
  const [state, dispatch] = useReducer(counterReducer, { count: 0 })

  return (
    <div>
      <p>Contador: {state.count}</p>
      <button onClick={() => dispatch({ type: 'incrementar' })}>Incrementar</button>
      <button onClick={() => dispatch({ type: 'decrementar' })}>Decrementar</button>
    </div>
  )
}

✨ useImperativeHandle

useImperativeHandle en React es una herramienta útil cuando necesitas controlar y personalizar la interfaz externa de un componente funcional, especialmente al trabajar con refs. Imagina el desafío al que te enfrentarías sin este gancho.

🤔 Desafío Sin useImperativeHandle:

Supongamos que tenemos un componente funcional llamado FancyInput que encapsula un campo de texto. Queremos que el componente padre acceda y manipule el valor del campo directamente y también active el enfoque en ese campo. Sin useImperativeHandle, podríamos terminar con un código menos eficiente y propenso a errores.

export const FancyInput = () => {
  const inputRef = useRef<HTMLInputElement>(null)

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }

  return (
    <div>
      <input ref={inputRef} />
      {/* Desafío: ¿Cómo exponer el método `focusInput` al componente padre? */}
    </div>
  )
}

En este escenario, exponer el método focusInput al componente padre sería una tarea desafiante e inelegante. Aquí es donde entra en juego useImperativeHandle.

✅ Solución con useImperativeHandle:

export const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null)

  // Usa useImperativeHandle para personalizar la interfaz externa
  useImperativeHandle(ref, () => ({
    focus: () => {
      if (inputRef.current) {
        inputRef.current.focus()
      }
    },
    getValue: () => {
      return inputRef.current ? inputRef.current.value : ''
    },
  }))

  return (
    <div>
      <input ref={inputRef} />
    </div>
  )
})

Con useImperativeHandle, ahora podemos exponer selectivamente las funciones que queremos que el componente padre utilice. Esta solución mejora la claridad del código y proporciona una interfaz externa más eficiente y controlada.

🧩 useLayoutEffect

useLayoutEffect en React es un gancho potente que te permite realizar operaciones síncronas después de que se hayan completado todas las mutaciones en el DOM, pero antes de que el navegador repinte la pantalla. Imagina el desafío al que te enfrentarías sin este gancho.

🤔 Desafío Sin useLayoutEffect:

Imagina un escenario en el que queremos medir las dimensiones de un elemento DOM y, basándonos en esas dimensiones, realizar ciertas acciones en nuestro componente funcional ResizableBox. Sin useLayoutEffect, podríamos tener problemas al realizar estas mediciones de manera asíncrona.

export const ResizableBox = () => {
  const boxRef = useRef<HTMLDivElement>(null)
  const [boxWidth, setBoxWidth] = useState(0)

  useEffect(() => {
    // Desafío: ¿Cómo medir las dimensiones de boxRef de manera síncrona?
    // Las mediciones pueden no estar disponibles de inmediato.
    // Esto puede causar problemas si dependemos de las dimensiones para realizar acciones.
  }, [])

  return <div ref={boxRef}>{/* Contenido de la caja redimensionable */}</div>
}

En este escenario, realizar mediciones síncronas de las dimensiones de boxRef es desafiante con useEffect porque las mediciones pueden no estar disponibles de inmediato. Aquí es donde entra en juego useLayoutEffect.

✅ Solución con useLayoutEffect:

export const ResizableBox = () => {
  const boxRef = useRef<HTMLDivElement>(null)
  const [boxWidth, setBoxWidth] = useState(0)

  useLayoutEffect(() => {
    // Usa useLayoutEffect para medir las dimensiones de boxRef de manera síncrona
    if (boxRef.current) {
      setBoxWidth(boxRef.current.offsetWidth)
    }
  }, [])

  return <div ref={boxRef}>{/* Contenido de la caja redimensionable */}</div>
}

Con useLayoutEffect, podemos realizar mediciones síncronas después de que el navegador haya completado todas las mutaciones en el DOM pero antes de repintar la pantalla. Esto asegura que las mediciones estén disponibles de inmediato y evita problemas potenciales relacionados con la asincronía.

🐞 useDebugValue

useDebugValue en React es un gancho especializado diseñado para mejorar la experiencia de depuración al proporcionar información adicional sobre el estado de un componente. Su principal utilidad es facilitar la identificación de componentes en las herramientas de desarrollo del navegador.

La firma básica para useDebugValue es la siguiente:

useDebugValue(value)

Al depurar una aplicación de React, es común enfrentarse al desafío de identificar rápidamente el componente de interés dentro de las herramientas de desarrollo del navegador. Sin useDebugValue, la información sobre un componente puede ser limitada y no específica.

Así es cómo se usa el gancho useDebugValue:

1. Agregar un Nombre Descriptivo:

import { useDebugValue } from 'react'

const useCustomHook = () => {
  const state =
    /* lógica del gancho */

    // Proporcionar un nombre descriptivo para facilitar la identificación en las herramientas de desarrollo
    useDebugValue('Custom Hook')

  return state
}

2. Mostrar Contenido de un Array:

import { useDebugValue } from 'react'

const useArrayHook = (array: string[]) => {
  // lógica del gancho

  // Mostrar el contenido del array en las herramientas de desarrollo
  useDebugValue(array.join(', '))

  return /* resultado */
}

3. Utilizar Información del Estado:

import { useState, useDebugValue } from 'react'

const useCounter = () => {
  const [count, setCount] = useState(0)

  // Utilizar el valor del contador como información en las herramientas de desarrollo
  useDebugValue(`Contador: ${count}`)

  return [count, setCount]
}

Al usar useDebugValue, puedes personalizar la información que se muestra sobre tu gancho o componente en las herramientas de desarrollo, facilitando su identificación y depuración durante el desarrollo.

🚀 Conclusión

En esta exploración de React Hooks, desde los conceptos más básicos hasta los más avanzados, confío en que hayas descubierto el fascinante mundo que estos ganchos ofrecen para simplificar y potenciar tus desarrollos en React. ¡Feliz codificación! ✨

🔗 Referencias

• https://react.dev/reference/react
• https://www.youtube.com/@midulive

🌐 Recursos Adicionales

• Documentación de React Hooks: Una versión fácil de leer

En esta publicación, te mostraré cómo mejorar tus mensajes de commit en Git utilizando las mejores prácticas de la industria, con el objetivo de asegurar un historial de Git claro y fácilmente legible para tus proyectos.

🧠 Comprendiendo los Commits en Git

Un commit en Git captura un conjunto de cambios almacenados en la historia de un proyecto, representando una unidad lógica de trabajo. Los commits son fundamentales para el control de versiones, fomentando la colaboración efectiva entre desarrolladores, organizando registros de actualizaciones y facilitando el retorno a versiones anteriores.

Estructura del Commit

Básico: git commit -m <mensaje>

Detallado: git commit -m <título> -m <descripción>

$ git add .
$ git commit -m "Implement user sign-in feature"

🚨 Importante: Este artículo asume que ya comprendes el flujo básico de trabajo con Git. Si no es así, te sugiero leer el Manual de Git.

🌟 La Importancia de Mensajes de Commit Bien Elaborados

Los commits no son solo instantáneas de cambios de código; sirven como una hoja de ruta para la historia de tu proyecto. Un mensaje de commit mal escrito puede causar confusión, haciendo que sea difícil entender el contexto de los cambios. Exploraremos por qué la elaboración de mensajes de commit significativos es importante.

Échale un vistazo a una mala implementación de los mensajes de commit

Fuente: xkcd.com

Piensa en tus mensajes de commit como cartas para tu yo futuro o colaboradores. Al invertir tiempo en escribir mensajes informativos, creas un rastro de documentación que puede ahorrar horas de solución de problemas y mejorar el mantenimiento del proyecto, especialmente en proyectos a gran escala.

🤔 Por qué Importa la Calidad del Mensaje de Commit

Te desafío a revisar viejos mensajes de commit en tus proyectos usando git log. Puedes encontrarte con mensajes poco claros que brindan poca información sobre los cambios realizados. Sin una documentación adecuada, podrías encontrarte pensando en el propósito de ciertas líneas de código.

Al adherirse a buenas prácticas de commit, aseguras el futuro de tu trabajo. Los mensajes claros se convierten en un activo valioso durante los esfuerzos colaborativos, fomentando una mejor comunicación dentro de los equipos de ingeniería.

🎬 6 Reglas para Elaborar Mensajes de Commit Excepcionales

Hay 6 reglas simples que ayudarán a mantener consistencia, claridad y eficacia en tus mensajes de commit, mejorando la comunicación dentro del equipo de desarrollo y facilitando el seguimiento del historial de código. Estas reglas son:

1. Usa el Modo Imperativo en la Línea del Asunto

Al redactar un mensaje de commit, usa el modo imperativo en la línea del asunto para transmitir la acción realizada. Por ejemplo, en lugar de decir "Añadida funcionalidad", usa "Añadir funcionalidad" o "Corregir error" en lugar de "Corregido error". Esto proporciona una instrucción clara sobre el cambio de estado previsto.

Para crear commits reflexivos, considera lo siguiente:

• ¿Por qué he realizado estos cambios?
• ¿Qué efecto han tenido mis cambios?
• ¿Por qué se necesitaba el cambio?
• ¿A qué se refieren los cambios?

La respuesta podría ser algo así:

- Añadir la nueva página de inicio de sesión
- Corregir un problema con el feed del blog
- Cambiar la familia de fuentes principal a Inter
- Eliminar un artículo al azar

2. Evita Puntos y Puntos Suspensivos en los Mensajes de Commit

Evita el uso de puntuación innecesaria en los mensajes de commit. La primera línea de un commit sirve como título y no debe terminar con un punto. Además, se deben evitar los puntos suspensivos para obtener instrucciones claras y concisas.

git commit -m "Add the new login page." # ❌
git commit -m "Add the new login page..." # ❌
git commit -m "Add the new login page" # ✅

3. Mantén la Línea del Asunto por Debajo de 50 Caracteres

Sé breve y directo al punto. Si tu mensaje de commit es demasiado extenso, considera dividirlo en varios commits. Asegúrate de que la línea del asunto refleje con precisión los cambios realizados.

git commit -m "Add the article 'How to install Bun on Windows' and update the blog's description in the home page" # ❌
git commit -m "Add the article 'How to install Bun on Windows'" # ✅
git commit -m "Update the blog's description in the home page" # ✅

4. Proporciona Contexto Necesario en el Cuerpo del Commit

Cuando se requiere contexto adicional, utiliza el cuerpo del commit en lugar de saturar la línea del asunto. Esto se puede lograr usando git commit sin la bandera -m.

# Ejemplo
git commit fix: prevent racing of requests

Introduce a request id and a reference to latest request. Dismiss
incoming responses other than from latest request.

Remove timeouts which were used to mitigate the racing issue but are
obsolete now.

Recuerda que la primera línea del mensaje del commit sirve como título, mientras que las líneas siguientes forman el cuerpo y deben adherirse a las reglas estándar de puntuación.

5. Usa Prefijos para Commits Semánticos

A medida que tu proyecto crece, mantener un historial legible se vuelve crucial. Para lograr esto, puedes agregar un prefijo para dar más significado a los commits que realizas. Esto se llama commits semánticos y se hace de la siguiente manera:

<tipo>[ámbito opcional]: <descripción>

[cuerpo opcional]

[pie(s) opcional(es)]

# Ejemplo:
fix: resolve login authentication bug
^-^  ^------------------------------^
│     │
│     └--> # Descripción de los cambios
│
└──------> # Tipo de cambio

[cuerpo opcional]
- Improved authentication logic to handle edge cases.
- Updated relevant unit tests.

[pie(s) opcional(es)]
Reviewed-by: X
Refs: #123

En monorepositorios con múltiples paquetes, también puedes agregar información sobre el paquete afectado por el commit. Esto se conoce como ámbito y se vería así:

feat(backend): add a new table for the likes
fix(web): update the main font family to Inter

El tipo de commit puede incluir lo siguiente:

• feat – se introduce una nueva funcionalidad con los cambios
• fix – se ha corregido un error
• chore – cambios que no están relacionados con una corrección o funcionalidad y no modifican archivos de código fuente o de prueba (por ejemplo, actualizaciones de dependencias)
• refactor – código refactorizado que no soluciona un error ni agrega una funcionalidad
• docs – actualizaciones de la documentación como el README u otros archivos markdown
• style – cambios que no afectan el significado del código, probablemente relacionados con el formato del código como espacios en blanco, falta de punto y coma, etc.
• test – inclusión de pruebas nuevas o corrección de pruebas anteriores
• perf – mejoras de rendimiento
• ci – relacionado con la integración continua
• build – cambios que afectan al sistema de construcción o a dependencias externas
• revert – revierte un commit anterior

La línea del asunto del tipo de commit debe estar en minúsculas con un límite de caracteres para fomentar descripciones concisas.

El cuerpo opcional del commit debe usarse para proporcionar más detalles que no pueden ajustarse a las limitaciones de caracteres de la descripción de la línea del asunto.

También es un buen lugar para utilizar BREAKING CHANGE: <descripción> para señalar la razón de un cambio incompatible dentro del commit.

6. Considera Usar Utilidades de Commit

Mejora tu flujo de trabajo de commit incorporando herramientas como husky para ejecutar scripts antes de acciones específicas de Git y commitlint para asegurar que los commits sigan una convención elegida. Estas utilidades contribuyen a un proceso de commit más eficiente y estandarizado.

npm install husky -D
npx husky install
npm set-script prepare "husky install"
npm run prepare
npx husky add .husky/pre-push "npm test"
git add .husky/pre-push

git commit -m "Keep calm and commit"
git push -u origin master *# tests run before the push

Con commitlint, puedes hacer cumplir commits semánticos y legibles que sigan convenciones predefinidas.

# 1. Instalar commitlint cli y configuración convencional

# Para Mac y Linux:
npm install --save-dev @commitlint/{config-conventional,cli}
# Para Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# 2. Agregar gancho para verificar el mensaje de commit
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

Estas herramientas, combinadas con prácticas como conventional-changelog y commitizen, contribuyen a un flujo de trabajo de commit eficiente y estandarizado, mejorando en última instancia la mantenibilidad y la colaboración del proyecto.

Al incorporar estas reglas y herramientas en tu flujo de trabajo de Git, contribuirás a un historial de proyecto más legible y organizado, facilitando que tú y tus colaboradores naveguen y comprendan los cambios realizados a lo largo del tiempo. ¡Felices commits! 🚀

🌐 Recursos Adicionales

• Commits Convencionales
• Versionado Semántico
• freeCodeCamp.org

En este artículo, explicaré cómo instalar y gestionar múltiples versiones de Node.js con Node Version Manager (NVM) en Windows, Linux y Mac, y cambiar fácilmente entre ellas con un solo comando.

🤔 ¿Qué es NVM?

Node Version Manager (NVM), como su nombre indica, es una herramienta para gestionar versiones de Node en tu dispositivo.

Diferentes proyectos en tu dispositivo pueden estar utilizando diferentes versiones de Node. Usar solo una versión (la instalada por npm) para estos proyectos puede no proporcionarte resultados de ejecución precisos.

Por ejemplo, si utilizas una versión de Node como 18.0.0 para un proyecto que usa 20.0.0, puedes obtener algunos errores. Y si actualizas la versión de Node a 20.0.0 con npm y la usas para un proyecto que usa 18.0.0, es posible que no obtengas la experiencia esperada.

De hecho, lo más probable es que recibas una advertencia que dice:

This project requires Node version X

En lugar de utilizar npm para instalar y desinstalar versiones de Node para tus diferentes proyectos, puedes usar nvm, que te ayuda a gestionar eficazmente las versiones de Node para cada proyecto.

NVM te permite instalar diferentes versiones de Node y cambiar entre estas versiones dependiendo del proyecto en el que estés trabajando a través de la línea de comandos.

🚨 Importante: Esta guía asume que no tienes una instalación previa de Node.js. Si la tienes, podría causar problemas y conflictos. Antes de continuar, asegúrate de haber desinstalado cualquier instalación previa de Node.js y npm.

🐧 ¿Cómo instalar NVM en Mac, Linux o Windows WSL?

Este sería el método recomendado si tu sistema operativo se basa en UNIX (como Mac, Linux o Windows WSL), ya que ofrece varias ventajas, como manejar diferentes versiones de Node simultáneamente.

1. Ejecuta el instalador de nvm

Para instalar y actualizar nvm, debes ejecutar el script de instalación. Puedes descargar y ejecutar el código desde la terminal usando el siguiente comando:

curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh> | bash

# o

wget -qO- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh> | bash

Puedes usar curl o bash dependiendo del comando disponible en tu dispositivo.

Este script clonará el repositorio de nvm en el directorio ~/.nvm e intentará agregar las líneas de ejecución dependiendo del idioma de tu terminal (~/.bash_profile, ~/.zshrc, ~/.profile o ~/.bashrc).

2. Actualiza la configuración de tu perfil

En caso de que no haya sido posible por alguna razón, es posible que te pida agregar manualmente las líneas de código. Esto solo es necesario si no se pudo hacer automáticamente. Las líneas a agregar serían estas:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \\\\. "$NVM_DIR/nvm.sh"

Después de hacer esto, es posible que necesites reiniciar la terminal o abrir una nueva pestaña para usar el comando nvm.

Este comando anterior carga nvm para su uso.

3. Recarga la configuración de la shell

Con tu configuración de perfil actualizada, ahora recargarás la configuración de tu terminal para usar:

source ~/.bashrc

Con este comando ejecutado, nvm está listo para que lo uses. Puedes confirmar que nvm está instalado correctamente ejecutando:

nvm -v

Esto debería mostrar la versión de nvm instalada.

🪟 ¿Cómo instalar NVM en Windows?

nvm-windows, aunque comparte el nombre con nvm, no es de los mismos creadores y, por lo tanto, tiene algunas diferencias. Y entre esas diferencias está, por supuesto, la forma de instalarlo. Para nvm-windows, sigue estos pasos:

1. Ve a la sección de lanzamientos de nvm-windows.
2. Descarga y ejecuta el archivo nvm-setup.exe de la última versión disponible.
3. Ejecuta el archivo nvm-setup.exe.
4. Sigue los pasos de instalación guiada y elige la configuración deseada.
5. Una vez completado, abre una terminal de PowerShell y ejecuta:

Cuando hayas terminado, puedes confirmar que nvm se ha instalado ejecutando:

nvm -v

Si nvm se instaló correctamente, este comando te mostrará la versión de nvm instalada.

Y con esto, estamos listos para trabajar con nvm-windows. Si encuentras algún problema, puedes consultar la sección de Problemas Comunes del repositorio para ver si tu problema tiene solución.

🕹️ ¿Cómo funciona NVM?

Con nvm instalado, ahora puedes instalar, desinstalar y cambiar entre diferentes versiones de Node en tu dispositivo Windows, Linux o Mac.

Puedes instalar versiones de Node de esta manera:

nvm install --lts

Esto instalará la versión de soporte a largo plazo de Node. Actualmente, es la versión 20, pero en el futuro será la 22 y así sucesivamente.

LTS o soporte a largo plazo significa que es una versión que recibirá soporte durante un período más largo que otras versiones. Generalmente, es hasta 30 meses de

soporte para errores críticos. Si vas a usar Node en producción, es mejor usar solo versiones LTS.

Si prefieres, también puedes instalar una versión específica indicando el número de versión principal o directamente la versión exacta:

nvm install 21 # esto instalará la última versión 21 de Node.js
nvm install 12.6.0 # esto instalará exactamente la versión 21.6.0

🚀 Uso de una Versión de Node.js Con NVM

A veces, puedes tener más de una versión instalada de Node.js en tu usuario. Para ver todas las versiones de Node.js que tienes instaladas, puedes usar el comando nvm ls. Para ver las versiones disponibles para la instalación, debes usar nvm ls-remote.

Una vez que tienes más de una en tu sistema, querrás cambiar entre esas versiones. Para hacerlo, ejecuta nvm use <versión-que-quieres-usar>, por ejemplo:

nvm use 20
nvm use 21
nvm use --lts

Si deseas que una de estas sea tu versión predeterminada, para que se use la próxima vez que abras una pestaña, debes crear un alias para esa versión llamado default.

Por ejemplo, supongamos que tienes instaladas las versiones 16 y 18, y ahora instalas la versión 20, y quieres que esta sea la versión predeterminada a partir de ahora. Deberías hacer lo siguiente:

nvm install 20
nvm alias default 20

La primera vez que ejecutas nvm install, esa versión se convierte en la predeterminada.

⚠️ Problemas Posibles

• En Mac, necesitarás tener instaladas las herramientas de desarrollo de Xcode. Cuando ejecutas el script de instalación de nvm por primera vez, puede aparecer una ventana pidiéndote que hagas esto. Una vez instalado, intenta instalar nvm nuevamente con el mismo script que antes.
• Recuerda, como mencioné, después de la instalación, es posible que necesites reiniciar la terminal o crear una nueva pestaña antes de poder ejecutar el comando nvm.
• Si tienes problemas adicionales, puedes consultar la sección de Resolución de Problemas en Linux en el repositorio de nvm.