Let's have components A and B.

Component B only shows the parent's state in contentForB in a different format and doesn't manipulate with it. It takes A's state as a prop, applies a function transform(content) and shows it, so whenever A's contentForB changes, the new content get transformed and updated in B.

The problem comes when A wants to use B's transformed content and use it somewhere else. I tried to implemented in a standard way, using state-updating function and passed it from A to B like this:

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)} />
   ​}
}

However, when A's state changes, B gets reinitialized, it then changes A's state by calling the updateTransformedContent which again causes B to get reinitialized, thus causing an infinite loop even though the updateTransformedContent changes the state object which isn't directly passed into B.

Any ideas how to deal with such situation properly?