El problema que todos evitan
Los desarrolladores de Facebook se topan con un error clásico: asignar el atributo value a un componente y que todo se rompa.
¿Por qué value es tan delicado?
Porque no es solo una cadena; es la puerta de entrada a la sincronía de estado. Cuando lo manipulas sin control, el UI se vuelve un caos. Aquí tienes el dato: React espera que value sea inmutable a menos que lo gestiones con setState o hooks. Si lo cambias directamente, el renderizado pierde la referencia y el componente se queda colgado.
Ejemplo rápido
Imagina un input controlado: <input value={this.state.text} onChange={this.handleChange} />. Si en algún punto haces this.state.text = «nuevo» sin disparar setState, el campo no refleja el cambio. Boom, bug instantáneo.
El truco de la desreferenciación
La solución no es magia, es disciplina. Usa siempre funciones puras para actualizar. En vez de tocar value directamente, crea un wrapper: const updated = {…prev, value: nuevoValor} y pasa eso a setState. Así mantienes la inmutabilidad y el render se actualiza sin drama.
Propagación a los props de FB
Cuando trabajas con los props de Facebook, el mismo principio aplica. Los componentes hijos reciben value como prop y, si el padre lo muta sin usar el ciclo de vida correcto, el hijo nunca detectará el cambio. Por eso, la regla de oro: nunca modifiques props, solo envía nuevos objetos.
Casos reales donde falla
Un colega me mostró una aplicación de encuestas donde el value del botón de voto se actualizaba con this.props.value = newValue. Resultado: el contador se quedó en cero y el UI se congeló. La solución fue revertir a setState y pasar el nuevo valor como prop desde el contenedor.
El enlace que lo resume
Si buscas un ejemplo concreto de cómo manejar value sin romper todo, revisa este artículo sobre value en los props de FB. Allí verás la diferencia entre un código desordenado y uno bien estructurado.
Acción inmediata
Ahora, abre tu componente, busca cualquier asignación directa a value y reemplázala por una llamada a setState o al hook correspondiente. No lo pienses más; el rendimiento y la estabilidad del UI dependen de esa única línea. Ejecuta el cambio y verifica que el UI responda al instante.
