Array State

import React, { useState } from "react";
import {
  StyleSheet,
  SafeAreaView,
  Text,
  FlatList,
  View,
  Button,
} from "react-native";

const App = () => {
  const [users, setUsers] = useState([
    { id: 1, name: "Ahmet" },
    { id: 2, name: "Mehmet" },
  ]);

  const handlePress = () => {
    setUsers((prev) => [
      // ...prev,
      // {
      //   id: Math.floor(Math.random() * 1000),
      //   name: Math.floor(Math.random() * 1000),
      // },

      // sayfanın başına eklemek istersek
      {
        id: Math.floor(Math.random() * 1000),
        name: Math.floor(Math.random() * 1000),
      },
      ...prev,
    ]);
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={users}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.text}>{item.name}</Text>
          </View>
        )}
      />
      <Button title="Add" onPress={handlePress} />

      {/* {users.map((user) => (
        <Text key={user.id} style={styles.text}>    Bu kullanma göre Flatlist daha performanslı olur
          {user.name}
        </Text>
      ))} */}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text: {
    fontSize: 20,
  },
  item: {
    backgroundColor: "#eee",
    padding: 10,
    borderBottomWidth: 1,
  },
});

export default App;