title: Loading initial data in a flatlist
body: <p>I am using React-native to create an app for a school district. On one screen I want to be able to search through the staff directory to find a staff member. I am using a Flatlist to display each staff member and a TextInput to search through the list. The issue I am having with my current code is that upon the initial screen load my Flatlist does not render any components. When I enter text into my TextInput then the flatlist renders. How can I fix this so that my data is displayed in the flatlist when initially loading.</p>
  
  <pre><code>const StaffScreen = props =&gt; {
      const [isLoading, setIsLoading] = useState(false);
      const [error, setError] = useState();
      const [searchTerm, setSearchTerm] = useState('');
      const [data, setData] = useState(staff);
      const staff = useSelector(state =&gt; state.staff.staffMembers);
      const dispatch = useDispatch();
  
      const loadStaff = useCallback(async () =&gt; {
          setError(null);
          setIsLoading(true);
          try {
              await dispatch(staffActions.loadStaff());
  
          } catch (err) {
              setError(err.message)
          }
          setIsLoading(false);
      }, [dispatch, setIsLoading, setError]);
  
      useEffect(() =&gt; {
          const willFocusSub = props.navigation.addListener('willFocus', loadStaff);
          return () =&gt; {
              willFocusSub.remove();
          };
      }, [loadStaff]);
  
      useEffect(() =&gt; {
          loadStaff();
      }, [dispatch, loadStaff]);
  
      const textChangeHandler = event =&gt; {
          setSearchTerm(event);
      }
  
      useEffect(()=&gt; {
          const searchItem = searchTerm;
          const results = staff.filter(staffMember =&gt; staffMember.firstName.includes(searchItem) 
          || staffMember.lastName.includes(searchItem) 
          || staffMember.jobTitle.includes(searchItem) );
          setData(results)
      }, [searchTerm]);
  
  
      if (error) {
          return &lt;View style={styles.container}&gt;
              &lt;View style={{ alignSelf: 'flex-start' }}&gt;&lt;RichHeader title='Staff Directory' /&gt;&lt;/View&gt;
              &lt;View style={styles.centered}&gt;
                  &lt;Text style={styles.errorText}&gt;{error.toString()} &lt;/Text&gt;
                  &lt;Button title='Try Again' color={Colors.accent} onPress={loadStaff} /&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      }
  
      if (isLoading) {
          return &lt;View style={styles.container}&gt;
              &lt;View style={{ alignSelf: 'flex-start' }}&gt;&lt;RichHeader title='Staff Directory' /&gt;&lt;/View&gt;
              &lt;View style={styles.search}&gt;
                  &lt;TextInput style={styles.textInput} /&gt;
                  &lt;Ionicons name={Platform.OS === 'android' ? 'md-search' : 'ios-search'} size={35} color={Colors.darkerAccent} /&gt;
              &lt;/View&gt;
              &lt;View style={styles.centered}&gt;
                  &lt;ActivityIndicator size='large' color={Colors.accent} /&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      }
  
      return (
          &lt;View style={styles.container}&gt;
              &lt;View style={{ alignSelf: 'flex-start' }}&gt;&lt;RichHeader title='Staff Directory' /&gt;&lt;/View&gt;
              &lt;View style={styles.search}&gt;
                  &lt;TextInput 
                      style={styles.textInput} 
                      onChangeText={textChangeHandler}
                      value={searchTerm}
                      /&gt;
                  &lt;Ionicons name={Platform.OS === 'android' ? 'md-search' : 'ios-search'} size={35} color={Colors.darkerAccent} /&gt;
              &lt;/View&gt;
              &lt;FlatList
                  data={data}
                  keyExtractor={item =&gt; item.emailAddress}
                  renderItem={
                      itemData =&gt; (
                          &lt;StaffItem
                              first={itemData.item.firstName}
                              last={itemData.item.lastName}
                              title={itemData.item.jobTitle}
                              ext={itemData.item.extension}
                              email={itemData.item.emailAddress}
                          /&gt;
                      )
                  } /&gt;
          &lt;/View&gt;
      )
  };
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
      },
      textInput: {
          height: 30,
          width: '90%',
          fontSize: 24,
          paddingLeft: 20,
          color: Colors.darkerAccent
      },
      search: {
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingTop: 10,
          backgroundColor: 'white',
          paddingRight: 10,
          borderBottomColor: Colors.accent,
          borderBottomWidth: 1,
          borderTopColor: Colors.accent,
          borderTopWidth: 1,
          marginVertical: 10
      },
      centered: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center'
      },
      errorText: {
          fontFamily: 'open-sans-bold',
          fontSize: 20,
          textAlign: 'center',
          color: Colors.accent,
          textDecorationColor: Colors.darkerAccent
      }
  });
  
  export default StaffScreen;
  </code></pre>
  
  <p>Any help would be appreciated.</p>