Is setting state inside render function an ok solution?

Question

I am seting state inside some components which are located inside render() and I am wondering if that is a good way to set state:

<TextInput style={{ fontSize: 14, marginLeft: 10, marginRight: 10, color: 'black', borderColor: 'gray', borderWidth: 1, textAlignVertical: 'top' }}
                    onChangeText={(txt) => this.setState({ waitReason: txt })}
                    autoFocus
                    multiline={true}
                    numberOfLines={3}
                    placeholderTextColor='gray'
                    placeholder='Comment'
                    value={this.state.waitReason} />

Or maybe calling a function and then seting the state inside that function could be a better solution?!

Answer 1

Remember that you're not setting state inside an actual render. You're rendering a component and setting state inside an event handler. So, in your code, a re-render is only enacted when the onChangeText handler is called, which is only when text changes.

Your approach should be fine. Separating out to a different function won't change the performance of the code, but may make it more maintainable.

Your approach is pretty-much used as an example in the React Native documentation itself.