Prevent infinite loop when updating state within render() - reactjs

Question

I have the following use case where I have an input and whenever that changes, I need to re-calculate some things and re-render them.
My problem is that I need to update the state in a function called within render(). However, that would case an infinite loop since every such update would cause render() to re-run.
class Test extends Component {
state= {
inputVal='a'
count=0
}
inputChanged = event => this.setState({inputVal: event.target.value});
calculateThingsToBeRendered = () => {
// the value for "count" is calculated (using a hardcoded value to simulate)
let localCount = 5
// need to update the value of the state's "count" here (render() will re-run)
return (
<div> Irrelevant thing to render </div>
);
}
render() {
let thingsToRender = this.calculateThingsToBeRendered();
return {
<div>
<input type="text" onChange={this.inputChanged} value={this.state.inputVal} />
{this.state.count}
<div>
{thingsToRender}
</div>
</div>
}
}
}
Using shouldComponentUpdate wouldn't satisfy my needs since the updated value for the count wouldn't update in the UI.
Moving the calculations done within the calculateThingsToBeRendered (so that the count part of the state gets updated there) to inputChanged wouldn't work because I need the JSX returned by the same function in render.

Answer 1

I don't get in the first place why you "need" to run a function that updates the state in the render function.
I guess you're trying to calculate something from the input.
So there is an state update from input and you want to calculate that afterwards an put that into the state (which is now in a function used in render)
one of many options is to calculate your new state when the event happens.
class Test extends React.Component {
state = {
inputVal: "a",
count: 0
};
inputChanged = event => this.setState({
inputVal: event.target.value,
count: this.calculate(event.target.value)
});
thingsToBeRendered = () => {
return <div> {this.state.count} </div>;
};
calculate = (value) => {
// update your stuff here
return value.length()
}
render() {
let thingsToRender = this.thingsToBeRendered();
return (
<div>
<input
type="text"
onChange={this.inputChanged}
value={this.state.inputVal}
/>
{this.state.count}
<div>{thingsToRender}</div>
</div>
);
}
}