State Initializer en React: Inicializa el Estado con Props de Forma Efectiva 2025

El patrón State Initializer es un patrón de React.js muy sencillo de implementar y consiste en proveer una manera para que el usuario de nuestro componente pueda definir el estado inicial y una vía para poder reiniciarlo.

Puede funcionar creando un componente y proveyendo la funcionalidad con render props, con un HOC o creando un custom hook.

¿Qué es el Patrón State Initializer?

El patrón State Initializer permite inicializar el estado de un componente en función de las props recibidas.

Aunque esto puede lograrse directamente en el constructor de un componente de clase o en un Hook useState en un componente funcional, el patrón de State Initializer lleva esto un paso más allá, ofreciendo una mayor flexibilidad y control sobre el estado inicial.

Ventajas y desventajas del patrón State Initializer

Las principales ventajas de este patrón son:

• Una manera muy sencilla de darle control del estado inicial y su reinicio al usuario sin tener que hacer algo más elaborado como el patrón control props.

En mi opinión, este patrón no presenta ninguna desventaja debido a que no implica un costo técnico el implementarlo.

En qué casos aplicar este patrón

Implementa State Initializer si:

• El componente o custom hook que estás creado va a requerir que el estado inicial pueda ser proveído por el usuario.
• El usuario de tu componente o custom hook pueda tener acceso a reiniciar el estado inicial.

Ejemplo de State Initializer en Vídeo

Si quieres ver un ejemplo aplicado en un proyecto del mundo real, te invito a darle play al siguiente vídeo donde explico cómo implementar el patrón Render Props en React JS paso a paso.

Pero si prefieres leer, a continuación te muestro un ejemplo de cómo implementar el patrón State Initializer en React.

Ejemplo del patrón State Initializer

En el post que hablamos de High Order Component hicimos un ejemplo de un HOC con la lógica para manejar formularios controlados.

De hecho, en nuestro ejemplo con el HOC ya estamos pasando cómo será el estado inicial del formulario.

En esta ocasión vamos a crear su versión como un custom hook y vamos a añadir el state initializer.

Primero vamos a definir nuestro custom hook con la lógica mínima necesaria para que maneje un formulario controlado.

const useForm = (initialState = {}) => {
  const [formValues, setFormValues] = useState(initialState)
  const handleChange = ({ target }) => {
    const { name, value } = target
    setFormValues({ ...initialState, [name]: value })
  }
  const handleSubmit = (cb) => (e) => {
    e.preventDefault()
    cb(formValues)
  }
  return {
    formValues,
    handleChange,
    handleSubmit,
  }
}

Recibimos un initialState que será el valor del estado inicial del formulario. Tenemos las funciones para actualizar el estado y hacer el submit.

El handleSubmit es un closure, esto significa que es una función que retorna otra función, manteniendo en memoria el valor de los parámetros pasados, en este caso, el parámetro cb que es un callback a ejecutar cuando el usuario hace submit al formulario y e, es el evento de submit.

Esta es la manera de utilizarlo:

const MyForm = () => {
  const { formValues, handleChange, handleSubmit } = useForm({
    name: '',
  })

  const showData = (values) => alert(JSON.stringify(values))

  return (
    <form onSubmit={handleSubmit(showData)}>
      <input name="name" value={formValues.name} onChange={handleChange} />
      <button>Submit</button>
    </form>
  )
}

Ahora vamos a crear una función que sirva para reiniciar el estado del formulario.

const useForm = (initialState = {}) => {
  const [formValues, setFormValues] = useState(initialState)

  const handleChange = ({ target }) => {
    const { name, value } = target
    setFormValues({ ...initialState, [name]: value })
  }

  const handleSubmit = (cb) => (e) => {
    e.preventDefault()
    cb(formValues)
  }

  // Función para reiniciar el estado del formulario
  const reset = () => setFormValues(initialState)

  return {
    formValues,
    handleChange,
    handleSubmit,
    reset,
  }
}

Y para implementarlo es como sigue:

const MyForm = () => {
  const { formValues, handleChange, handleSubmit, reset } = useForm({
    name: '',
  })

  const showData = (values) => alert(JSON.stringify(values))

  return (
    <form onSubmit={handleSubmit(showData)}>
      <input name="name" value={formValues.name} onChange={handleChange} />
      <button>Submit</button>
      <button type="button" onClick={reset}>
        Reset
      </button>
    </form>
  )
}

Como puedes ver, el patrón State Initializer es una forma sencilla y efectiva de inicializar el estado de un componente basado en las props que recibe, maximizando la reusabilidad y flexibilidad.

Resumen de Inicializador de Estado

• El patrón State Initializer en React permite inicializar el estado de un componente basado en las props que recibe.
• Puede implementarse en un componente de clase o en un componente funcional utilizando Hooks.
• El patrón State Initializer es útil para maximizar la reusabilidad y flexibilidad de tus componentes.

Conclusión

Como puedes ver, este es un patrón muy sencillo de utilizar. Con muy pocas líneas de código hemos sido capaces de proveer acceso al usuario de nuestro custom hook el poder asignar un estado inicial y poder resetearlo a voluntad.

Recuerda que existen las variantes de este patrón usando un HOC o un Render Props, pero en mi opinión, con los Custom Hooks es mucho más limpio implementarlo.

Recursos adicionales

Si te ha gustado este análisis sobre el patrón State Initializer, 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.