Tengamos los componentes A y B.

El componente B solo muestra el estado de los padres en contentForB en un formato diferente y no lo manipula. Toma el estado de A como accesorio, aplica una función de transform(content) y lo muestra, por lo que cada contentForB cambia el contenido de A para B, el nuevo contenido se transforma y actualiza en B.

El problema surge cuando A quiere usar el contenido transformado de B y usarlo en otro lugar. Intenté implementarlo de manera estándar, usando la función de actualización de estado y lo pasé de A a B de esta manera:

 class A extends React.Component { constructor(props) { super(props); this.state = { contentForB: "", transformedContent: "" }; this.updateTransformedContent = this.updateTransformedContent.bind(this); } updateTransformedContent(newContent) { this.setState = { transformedContent: newContent }; } render() { return ( ... <B content={ this.state.contentForB } updateTransformedContent={ this.updateTransformedContent } /> <ComponentUsingTransformedContent transformedContent = { this.state.transformedContent } /> ); } } class B extends React.Component { constructor(props) { super(props); this.transform = this.transform.bind(this); } transform(content) { let newContent = ...; ​​this.props.updateTransformedContent(newContent); ​return newContent; ​} ​render() { ​<Something value={this.transform(this.props.content)} /> ​} }

Sin embargo, cuando el estado de A cambia, B se reinicializa, luego cambia el estado de A llamando a updateTransformedContent que nuevamente hace que B se reinicie, lo que provoca un bucle infinito aunque updateTransformedContent cambia el objeto de estado que no es directamente pasó a B.

¿Alguna idea de cómo lidiar con tal situación correctamente?