如何停止React Native重新渲染？

Question

我仍在学习使用React Native和runnig来解决栈大小超出的问题，但是我不确定为什么。查看其他帖子，我看到的一定是屏幕被重新渲染了太多次并且卡在一个循环中，但是如何防止这种情况发生？
RaceListScreen

export function RandomRaceScreen(this: any, {navigation: navigation}) {
 
  const [raceList, setRaceList] = useState<RaceModel[]>([]);


  useEffect(() => {
    const fetchedRaces: RaceModel[] = getCoreRaceList();
    setRaceList(fetchedRaces);
  }, []);

  //number of players must be less than max number of available races

  const racePressed = (raceId: number) => {
    console.log('Displaying info about Race, ', raceId);
    navigation.navigate('RaceLoreListScreen', {raceId: raceId});
  };

  const renderRaces = (item: unknown) => {
    return (
      <RaceCard
        race={item.item}
        onClick={() => {
          racePressed(item.item._groupId);
        }}
      />
    );
  };

  const width = Dimensions.get('window').width;

  return (
    <ImageBackground
      source={require('../../assets/space_background_reduced_v1.png')}
      style={globalStyles.background}>
      <FlatList
        data={raceList}
        renderItem={renderRaces}
        sliderWidth={width}
        containerCustomStyle={style.carousel}
        contentContainerCustomStyle={style.card}
        itemWidth={width * 0.8}
        layout="default"
        removeClippedSubviews={false}
      />
    </ImageBackground>
  );
}

getCoreRaceList函数：

import {RaceModel} from '../../models/RaceModel';
import races from '../../races/core_races.json';

export function getCoreRaceList(): RaceModel[] {
  let raceList: RaceModel[] = [];

  for (let i = 0; i < 5; i++) {
    raceList.push(
      new RaceModel(races[i], races[i].name, races[i].homeworld, false),
    );
  }

  return raceList;
}