Guía sobre el patrón Control Props en React JS 2024

El patrón Control Props es uno de los patrones de diseño avanzados en React que te permiten crear componentes aún más flexibles y controlables, dándote el poder de controlar su estado desde fuera. Veamos cómo funciona y por qué es tan útil.

Si eres más de aprender visualmente o simplemente quieres un resumen rápido, no te pierdas este vídeo donde explico el patrón Control Props en React JS paso a paso:

¿Qué son los Control Props?

Los Control Props se refieren a props que un componente acepta para controlar su estado interno.

Si alguna vez has utilizado un componente input controlado en React, imagina que puedes replicar lo mismo pero en cualquier componente.

La idea es que podamos tener la opción de que en lugar de que el componente gestione su propio estado, este recibe su estado a través de props y notifica cualquier cambio a través de callbacks.

Ejemplo de Control Props

Imagina un componente Toggle que puede estar en dos estados: ON u OFF. Por defecto, este componente puede manejar su propio estado, pero, ¿qué pasa si quisiéramos controlar este estado desde un componente padre?

Para lograrlo, podemos usar el patrón de "Control Props".

Código del Componente Toggle

import React, { useState } from 'react'

const Toggle = ({ value, setValue, defaultIsOn = false }) => {
  const [isOn, setIsOn] = useState(defaultIsOn)

  const isControlled = value !== undefined && setValue !== undefined

  const currentState = isControlled ? value : isOn

  const handleToggle = () => {
    if (isControlled) {
      setValue(!currentState)
    } else {
      setIsOn(!currentState)
    }
  }

  return <button onClick={handleToggle}>{currentState ? 'ON' : 'OFF'}</button>
}

export default Toggle

En el componente Toggle anterior, hemos añadido una lógica que verifica si se pasan las props value y setValue para determinar si el componente es controlado o no. Dependiendo de ello, el componente decide usar su propio estado o el estado proporcionado.

Uso Controlado

import React, { useState } from 'react'
import Toggle from './Toggle'

const App = () => {
  const [isToggleOn, setIsToggleOn] = useState(false)

  return (
    <div>
      <h1>Control Props en Acción</h1>
      <Toggle value={isToggleOn} setValue={setIsToggleOn} />
      <p>El estado actual del Toggle es: {isToggleOn ? 'ON' : 'OFF'}</p>
    </div>
  )
}

export default App

En el ejemplo controlado, estamos pasando el estado y la función para cambiar el estado al componente Toggle.

Uso No Controlado

import React from 'react'
import Toggle from './Toggle'

const App = () => {
  return (
    <div>
      <h1>Control Props en Acción</h1>
      <Toggle defaultIsOn={true} />
      <p>El estado actual del Toggle es manejado internamente por el componente.</p>
    </div>
  )
}

export default App

En el ejemplo no controlado, estamos usando el estado interno del componente Toggle, ya que no pasamos value ni setValue.

¿Por qué usar Control Props?

Usar Control Props tiene varios beneficios:

1. Flexibilidad: Permite a otros componentes controlar el estado interno de tu componente.
2. Reusabilidad: Tu componente puede ser utilizado tanto en un modo controlado como no controlado.
3. Integración: Facilita la integración con bibliotecas de formularios o cualquier otro tipo de biblioteca que maneje estados en React.

Conclusión

El patrón Control Props es una excelente herramienta para tener en tu arsenal como desarrollador de React. Te da la flexibilidad de decidir quién controla el estado, permitiendo que tus componentes sean más reutilizables y mantenibles.

Si te ha gustado este análisis sobre el patrón Control Props, te invito a explorar los otros patrones avanzados en React JS que he analizado en la guía principal.

Y recuerda, si quieres llevar tus habilidades al siguiente nivel, no te pierdas el curso completo en el Canal de YouTube de Developero.