Separación y reutilización de código con customs hooks de React

 Movi al ámbito global una función que era local a un functional component de React, y ahora le tengo que pasar un montón de referencias a variables de estado y funciones para controlar el estado del componente. ¿Fue buena mi decisión del traslado del ámbito de la primera función?

Mover tu función al ámbito global no suele ser la mejor decisión si esa función depende mucho del estado interno de un componente de React. Lo que te pasó —tener que pasar un montón de referencias de useState y funciones— es la señal clara de que la función estaba bien ubicada dentro del componente.

🔹 Cuándo conviene dejar la función local

• Si la función usa directamente el estado (useState, useReducer, useContext) del componente.

• Si la lógica es específica de ese componente y no se reutiliza en otros.

• Si moverla afuera te obliga a pasar demasiados parámetros, lo que complica el código.

🔹 Cuándo conviene extraerla

• Si la función es pura (no depende de estado ni hooks) y puede reutilizarse en varios componentes.

• Si querés testearla en aislamiento.

• Si la lógica es suficientemente general como para vivir en un módulo utilitario.

🔹 Alternativa mejor: Custom Hook

En vez de mover la función al ámbito global, podés encapsularla en un custom hook. Así mantiene acceso a useState, useEffect, etc., sin necesidad de pasar mil referencias:

jsx

function useMiLogica() {
  const [valor, setValor] = useState(0)

  const incrementar = () => setValor(v => v + 1)

  return { valor, incrementar }
}

// Uso en el componente
function MiComponente() {
  const { valor, incrementar } = useMiLogica()

  return (
    <div>
      <p>{valor}</p>
      <button onClick={incrementar}>Sumar</button>
    </div>
  )
}

✨ En resumen: tu traslado al ámbito global no fue la mejor decisión si la función dependía del estado del componente. Lo más limpio es mantenerla local o encapsularla en un custom hook para lograr reutilización sin perder simplicidad.

¿Querés que te arme un ejemplo paso a paso de cómo transformar tu función actual en un custom hook, para que veas cómo se simplifica el manejo de estado?

Sí.

Perfecto, Gabriel. Te muestro cómo transformar esa función que moviste al ámbito global en un custom hook, para que mantenga acceso directo al estado sin que tengas que pasar mil referencias manualmente:

🔹 Paso 1: Función local dentro del componente

Supongamos que tenías algo así:

jsx

function MiComponente() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState("")

  function manejarLogica() {
    setCount(c => c + 1)
    setText("Actualizado")
  }

  return (
    <div>
      <p>{count}</p>
      <p>{text}</p>
      <button onClick={manejarLogica}>Ejecutar</button>
    </div>
  )
}

🔹 Paso 2: Intento de mover la función afuera

Si la sacás al ámbito global, tenés que pasarle setCount, setText, etc., lo que se vuelve engorroso:

jsx

function manejarLogicaGlobal(setCount, setText) {
  setCount(c => c + 1)
  setText("Actualizado")
}

🔹 Paso 3: Convertirlo en un custom hook

La solución más limpia es encapsular esa lógica en un hook:

jsx

function useMiLogica() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState("")

  const manejarLogica = () => {
    setCount(c => c + 1)
    setText("Actualizado")
  }

  return { count, text, manejarLogica }
}

🔹 Paso 4: Usar el hook en tu componente

Ahora tu componente queda mucho más claro:

jsx

function MiComponente() {
  const { count, text, manejarLogica } = useMiLogica()

  return (
    <div>
      <p>{count}</p>
      <p>{text}</p>
      <button onClick={manejarLogica}>Ejecutar</button>
    </div>
  )
}

✅ Ventajas

• No tenés que pasar referencias manualmente.

• La lógica queda reutilizable en otros componentes.

• El hook mantiene acceso directo a useState y otros hooks.

• El código del componente se simplifica y se vuelve más legible.

✨ En resumen: si tu función depende del estado, lo mejor es encapsularla en un custom hook en lugar de moverla al ámbito global. Así ganás reutilización sin perder simplicidad.

¿Querés que te arme un ejemplo más avanzado, con un hook que combine varios estados y efectos (por ejemplo, contador + fetch de datos) para que veas cómo se organiza la lógica compleja?

Sí.

Genial, Gabriel. Vamos a armar un ejemplo paso a paso de cómo transformar una función dependiente de estado en un custom hook más avanzado, que combine varios estados y efectos. Así ves cómo se organiza la lógica compleja sin tener que pasar referencias manualmente.

🔹 Caso inicial: función dentro del componente

Supongamos que tenías algo así en tu componente:

jsx

function MiComponente() {
  const [count, setCount] = useState(0)
  const [data, setData] = useState(null)

  async function manejarLogica() {
    setCount(c => c + 1)
    const respuesta = await fetch("https://api.example.com/items")
    const json = await respuesta.json()
    setData(json)
  }

  return (
    <div>
      <p>Clicks: {count}</p>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={manejarLogica}>Ejecutar</button>
    </div>
  )
}

Problema: si movés manejarLogica afuera, tenés que pasar setCount y setData.

🔹 Paso 1: Encapsular en un custom hook

Creamos un hook que maneje tanto el contador como el fetch:

jsx

function useMiLogica() {
  const [count, setCount] = useState(0)
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)

  const manejarLogica = async () => {
    setCount(c => c + 1)
    setLoading(true)
    try {
      const respuesta = await fetch("https://api.example.com/items")
      const json = await respuesta.json()
      setData(json)
    } finally {
      setLoading(false)
    }
  }

  return { count, data, loading, manejarLogica }
}

🔹 Paso 2: Usar el hook en el componente

Ahora tu componente queda mucho más limpio:

jsx

function MiComponente() {
  const { count, data, loading, manejarLogica } = useMiLogica()

  return (
    <div>
      <p>Clicks: {count}</p>
      {loading ? <p>Cargando...</p> : <pre>{JSON.stringify(data, null, 2)}</pre>}
      <button onClick={manejarLogica}>Ejecutar</button>
    </div>
  )
}

✅ Ventajas

• El hook mantiene acceso directo a useState y useEffect.

• No tenés que pasar referencias manualmente.

• La lógica queda reutilizable en otros componentes.

• El componente se simplifica y se centra en la UI.

✨ En resumen: cuando tu función depende de varios estados y efectos, lo mejor es encapsularla en un custom hook. Así ganás claridad, reutilización y mantenés la lógica cerca de React sin complicar el código.

¿Querés que te arme una comparación visual en tabla entre las tres opciones (función local, función global, custom hook) para que veas claramente cuál es más conveniente en cada caso?