CODEWITHSUNDEEP
reactjsreact-native
Markus Hayner
Markus Hayner

Reputation: 2959

Avoiding render warning in React

I am getting the following warning in my React Native app while I am verifying if my user is new or not.

Cannot update during an existing state transition (such as withinrender). Render methods should be a pure function of props and state.

Here is what I am trying to do

renderNewUser() {
        return (
            this.props.navigation.navigate('Welcome')
        )
    }

    render() {
        const { loadingVisible } = this.state;
        const { loading, error, me } = this.props.getMe;
        if (loading) {
            return (
                <Loader
                    modalVisible={loadingVisible}
                    animationType="fade"
                />
            )
        } else if (error) {
            return console.log
        } else {
            return (
                me.newUser ? this.renderNewUser() : <RenderListingsEmployer navigation={this.props.navigation} />
            )
        }
    }

Any idea how to escape from this?

Upvotes: 0

Views: 342

Answers (1)

Josh Kelly
Josh Kelly

Reputation: 968

Try something like this:

class Foo extends Component {
  componentDidMount() {
    if (this.props.getMe.me.newUser) {
      this.props.navigation.navigate('Welcome');
    }
  }

  render() {
    const { loadingVisible } = this.state;
    const { loading, error, me } = this.props.getMe;

    return (
      {
        loading
          ? <Loader modalVisible={loadingVisible} animationType="fade" />
          : <RenderListingsEmployer navigation={this.props.navigation} />
      }
    );
  }
}

Upvotes: 2

Related Questions