title: React Native: function called in Render, running in loop
body: <p>This is my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> "use strict";
  
  import React, {Component, PropTypes} from 'react';
  import {
    ActivityIndicator,
    ListView,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
  } from 'react-native';
  import { Actions, ActionConst } from 'react-native-router-flux';
  
  
  var SQLite = require('react-native-sqlite-storage');
  var DeviceInfo = require('react-native-device-info');
  import Icon from 'react-native-vector-icons/Ionicons';
  
  var LOADING = {};
  var db = SQLite.openDatabase({name : "oc.db", location: 'default'});
  class Profile extends Component {
  
    constructor(props) {
          super(props);
          this.state = {
              users: [],
              dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) =&gt; row1 !== row2,
              }),
          };
  
      }
  
      fetch(){
        console.log('fetching data from database');
        //////
        var query = "SELECT * FROM users";
        var params = [];
        var userlist = [];
        db.transaction((tx) =&gt; {
              tx.executeSql(query,params, (tx, results) =&gt; {
                  var len = results.rows.length;
                  for(var ind = 0; ind &lt; len; ind++ ){
                    userlist[ind] = {
                      userId: results.rows.item(ind).userId,
                      userName: results.rows.item(ind).userName,
                      userMail: results.rows.item(ind).userMail,
                      active: results.rows.item(ind).active
                    };
                  }
                  this.setState({
                    users: userlist,
                  });
                }, function(){
                  console.log('Profile: Something went wrong');
                });
            });
  
        //////////
      }
  
    componentDidMount() {
      this.fetch();
    }
  
    activate(uid){
      console.log('Lets de-activate all accounts');
      var query = "UPDATE users SET active='no' WHERE active=?";
      var params = ['yes'];
      db.transaction((tx) =&gt; {
        tx.executeSql(query,params, (tx, results) =&gt; {
          console.log('all users should be de-active now');
          console.log('activating user ', uid);
          var query = "UPDATE users SET active='yes' WHERE userId=? LIMIT 1;";
          var params = [uid];
          db.transaction((tx) =&gt; {
            tx.executeSql(query,params, (tx, results) =&gt; {
              console.log('UserId ' , uid , ' is Active now');
              this.renderUsers();
              //Actions.bridge({type: 'reset', toGo: 'home'});
            }, function(){
              console.log('No such a user found to make active');
            });
          });
        }, function(){
          console.log('No such a user found to make active');
        });
      });
    }
  
    resetNav(){
      Actions.bridge({type: 'reset'});
    }
  
    renderUsers(){
      console.log('Rendering Users');
      //this.fetch();
      var ulist = this.state.users;
      var urow = [];
      for(let a=0; a &lt; ulist.length; a++){
        let active = ulist[a].active === 'yes' ? '◉' : '◯';
        let usid = ulist[a].userId;
        urow.push(
          &lt;TouchableOpacity key={a} onPress={() =&gt; { this.activate(usid); /* this.resetNav(); */ }} style={styles.uitem}&gt;
            &lt;Text style={styles.uText}&gt;{ulist[a].userName} {ulist[a].userMail}&lt;/Text&gt;
            &lt;Text style={styles.uTextAct}&gt;{active}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        );
      }
      return(
        &lt;View style={styles.ulist}&gt;{urow}&lt;/View&gt;
      );
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
        &lt;Text style={styles.pic}&gt;
        &lt;Icon name="ios-person" color="#00a2dd" size={180}&gt;&lt;/Icon&gt;
        &lt;/Text&gt;
        &lt;Text style={styles.heading}&gt;
          Welcome to your Profile page!{'\n'}
        &lt;/Text&gt;
        &lt;Text style={styles.listtitle}&gt;Users List&lt;/Text&gt;
        &lt;Text style={styles.listdesc}&gt;To switch between accounts, simply click on them.&lt;/Text&gt;
        {this.renderUsers()}
        &lt;/View&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Results are shown, it's working. but problem is renderUsers() is running in a loop. it's being called forever. where am i wrong? any solutions please?</p>
  
  <hr>
  
  <p>Update :
  When i put this.fetch to renderUsers() , it's fine. when you select a user, it will be active and you can see the list is updating. but problem is list being updated in a loop. it's happening ever and ever again.</p>
  
  <p>when i put this.fetch to componentdidmount , the loop problem is fixed, but when you change active user, list is not being updated.</p>