React Native: function called in Render, running in loop
<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>