title: why are colors being updated multiple times
body: <p>Why are my random colors being updated multiple times?  Is the right way to control this behavior through a lifecycle event?</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>import React from 'react';
  import { StyleSheet, Text, ScrollView, FlatList, SectionList, View, Button, SegmentedControlIOS } from 'react-native';
  import contacts, {compareNames} from './contacts';
  import {Constants} from 'expo';
  import PropTypes from 'prop-types'
  
  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i &lt; 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
  
  
  const Row=(props)=&gt;(
    &lt;View style={styles.row}&gt;
      &lt;Text style={{color:props.color}} &gt;{props.name}&lt;/Text&gt;
      &lt;Text &gt;{props.phone}&lt;/Text&gt;
    &lt;/View&gt;
  )
  
  const renderItem=(obj)=&gt; {
  
       return(&lt;Row  {...(obj.item)} color={getRandomColor()} /&gt;)
  
  }
  
  const ContactsList = props =&gt; {
    const renderSectionHeader=(obj) =&gt;&lt;Text&gt;{obj.section.title}&lt;/Text&gt;
      const contactsByLetter = props.contacts.reduce((obj, contact) =&gt;{
       const firstLetter = contact.name[0].toUpperCase()
       return{
         ...obj,
         [firstLetter]: [...(obj[firstLetter] || []),contact],
       }
     },{})
  
     const sections = Object.keys(contactsByLetter).sort().map(letter=&gt;({
        title: letter,
        data: contactsByLetter[letter],
     }))
  
    return(
    &lt;SectionList
      keyExtractor = { (item, key) =&gt; key.toString() }
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}
      sections={sections}
    /&gt;
  )}
  
  ContactsList.propTypes ={
    renderItem: PropTypes.func,
    renderSectionHeader: PropTypes.func,
    contacts: PropTypes.array,
    sections: PropTypes.func
  }
  
  export default class App extends React.Component {
    state={show: false, selectedIndex: 0, contacts: contacts}
  
    toggleContacts=()=&gt;{
      this.setState({show:!this.state.show})
    }
  
    sort=()=&gt;{
      this.setState({contacts: [...this.state.contacts].sort(compareNames)})
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Button title="toggle names" onPress={this.toggleContacts}  /&gt;
          &lt;Button title="sort" onPress={this.sort}  /&gt;
          &lt;SegmentedControlIOS
            values={['ScrollView', 'FlatList','SectionList']}
            selectedIndex={this.state.selectedIndex}
            onChange={(event) =&gt; {
              this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
            }} /&gt;
          {this.state.show &amp;&amp; this.state.selectedIndex === 0 &amp;&amp;
            &lt;ScrollView &gt;
              {this.state.contacts.map(contact=&gt;(
                &lt;Row  {...contact}/&gt; ))}
            &lt;/ScrollView&gt;}
          {this.state.show &amp;&amp; this.state.selectedIndex === 1 &amp;&amp;
            &lt;FlatList
              data={this.state.contacts}
              keyExtractor = { (item, index) =&gt; index.toString() }
              renderItem={renderItem}&gt;
            &lt;/FlatList&gt;}
          {this.state.show &amp;&amp; this.state.selectedIndex === 2 &amp;&amp;
            &lt;ContactsList
              contacts={this.state.contacts}&gt;
            &lt;/ContactsList&gt;}
        &lt;/View&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      // alignItems: 'flex-start',
      paddingTop: Constants.statusBarHeight + 25,
    },
    row: {
      padding:20,
    },
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const NUM_CONTACTS = 10
  
  const firstNames = ['Emma','Noah','Olivia','Liam','Ava','William','Sophia','Mason','Isabella','James','Mia','Benjamin','Charlotte','Jacob','Abigail','Michael','Emily','Elijah','Harper','Ethan','Amelia','Alexander','Evelyn','Oliver','Elizabeth','Daniel','Sofia','Lucas','Madison','Matthew','Avery','Aiden','Ella','Jackson','Scarlett','Logan','Grace','David','Chloe','Joseph','Victoria','Samuel','Riley','Henry','Aria','Owen','Lily','Sebastian','Aubrey','Gabriel','Zoey','Carter','Penelope','Jayden','Lillian','John','Addison','Luke','Layla','Anthony','Natalie','Isaac','Camila','Dylan','Hannah','Wyatt','Brooklyn','Andrew','Zoe','Joshua','Nora','Christopher','Leah','Grayson','Savannah','Jack','Audrey','Julian','Claire','Ryan','Eleanor','Jaxon','Skylar','Levi','Ellie','Nathan','Samantha','Caleb','Stella','Hunter','Paisley','Christian','Violet','Isaiah','Mila','Thomas','Allison','Aaron','Alexa','Lincoln']
  
  const lastNames = ['Smith','Jones','Brown','Johnson','Williams','Miller','Taylor','Wilson','Davis','White','Clark','Hall','Thomas','Thompson','Moore','Hill','Walker','Anderson','Wright','Martin','Wood','Allen','Robinson','Lewis','Scott','Young','Jackson','Adams','Tryniski','Green','Evans','King','Baker','John','Harris','Roberts','Campbell','James','Stewart','Lee','County','Turner','Parker','Cook','Mc','Edwards','Morris','Mitchell','Bell','Ward','Watson','Morgan','Davies','Cooper','Phillips','Rogers','Gray','Hughes','Harrison','Carter','Murphy']
  
  // generate a random number between min and max
  const rand = (max, min = 0) =&gt; Math.floor(Math.random() * (max - min + 1)) + min
  
  // generate a name
  const generateName = () =&gt; `${firstNames[rand(firstNames.length - 1)]} ${lastNames[rand(lastNames.length - 1)]}`
  
  // generate a phone number
  const generatePhoneNumber = () =&gt; `${rand(999, 100)}-${rand(999, 100)}-${rand(9999, 1000)}`
  
  // create a person
  const createContact = () =&gt; ({name: generateName(), phone: generatePhoneNumber()})
  
  // compare two contacts for alphabetizing
  export const compareNames = (contact1, contact2) =&gt; contact1.name &gt; contact2.name
  
  // add keys to based on index
  const addKeys = (val, key) =&gt; ({key, ...val})
  
  // create an array of length NUM_CONTACTS and alphabetize by name
  export default Array.from({length: NUM_CONTACTS}, createContact).map(addKeys)</code></pre>
  </div>
  </div>
  </p>