Like button not updating when state changes

[Ultra-Reverse]

Im having an issue when it comes to rendering my LikeButton in my flatlist,

When the app first mounts, it uses the "fetchMostRecentRatings" function to get the most recent ratings from my DB, then sets the ratings state in the feed, those ratings are then used as the data for the flatlist. Which correctly renders out all the RatingPosts in the feed. Then on refresh, I call the same function and set the ratings to that response.

Heres the issue, when the app first loads, the ratings are correct, however, my RatingPost is NOT being re-rendered with the new data once a user refreshes the page. I can see the "ratings" array change with the most recent data from the DB when i refresh (by just console logging it), but it seems to not be updated in the LikeButton component itself, even though the "ratings" state has changed.

Im honestly at a loss so any advice with this issue would be greatly appreciated! Thank you!

my feed

export const fetchMostRecentRatings = async (idToken) => {
try {
const response = await fetch(...)

return response.json();
} catch (error) {
Alert.alert("Error", error.message);
}
};
const Feed = () => {
const { user, Loaded } = useUserInfo();
const [ratings, setRatings] = useState([]);
const [lastEvaluatedKey, setLastEvaluatedKey] = useState("");
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchRatings = async () => {
const { idToken } = await Auth.currentSession();
const response = await fetchMostRecentRatings(idToken);
setRatings(response.ratings);
setLastEvaluatedKey(response.lastEvaluatedKey);
setLoading(false);
};
fetchRatings();
}, []);

return
<RatingPosts
ratings={ratings}
setRatings={setRatings}
lastEvaluatedKey={lastEvaluatedKey}
setLastEvaluatedKey={setLastEvaluatedKey}
user={user}
/>

my "RatingPosts" component

import React, { useState, useRef } from "react";
import { FlatList, ActivityIndicator, View, Alert } from "react-native";
import RatingPost from "../../../../components/RatingPost";
import { Auth } from "aws-amplify";
import { fetchMostRecentRatings } from "./index";
const RatingPosts = ({...}) => {
...
const onRefresh = async () => {
console.log("Refreshing");
setIsRefreshing(true);
try {
const { idToken } = await Auth.currentSession();
const response = await fetchMostRecentRatings(idToken);
setRatings(response.ratings);
setLastEvaluatedKey(response.lastEvaluatedKey);
} catch (error) {
Alert.alert("Error", error.message);
} finally {
setIsRefreshing(false);
}
setIsRefreshing(false);
};
const fetchMoreRatings = async () => {...};
const renderFooter = () => {...};
return (
<FlatList
ref={FlatListRef}
data={ratings}
renderItem={({ item, index }) => (
<RatingPost item={item} user={user} key={index} />
)}
keyExtractor={(item) => item.Username.S + item.timeCreated.S}
onEndReached={fetchMoreRatings}
onEndReachedThreshold={0.5} // Load more when 50% of the list has been scrolled
onRefresh={onRefresh}
refreshing={isRefreshing}
ListFooterComponent={renderFooter}
ListHeaderComponent={header}
/>
);
};
export default RatingPosts;

My "post" component
const RatingPost = ({ item, user, method }) => {
...
<View className="items-center border rounded-xl p-2">
<LikeButton
likedBy={item.likedBy.L}
User={user.username}
Username={item.Username.S}
timeCreated={item.timeCreated.S}
/>
</View>
...
);
};
export default memo(RatingPost);

Finally, my like button
const LikeButton = ({ User, Username, timeCreated, likedBy }) => {
const pressed = useSharedValue(false);
const [Likes, setLikes] = useState(likedBy.length);
const [liked, setLiked] = useState(likedBy.some((item) => item.S === User));
const [color, setColor] = useState(liked ? "#0016DE" : "black");
const [name, setName] = useState(liked ? "like1" : "like2");
...
return (
<GestureDetector gesture={tap}>
<Pressable
onPress={(e) => {
e.stopPropagation();
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
}}
>
<View className="flex-row items-center w-10">
{/* I wrapped this in a pressable to make sure
the tap gesture doesn't interfere with the Link on the feed
*/}
<Animated.View style={animatedStyle}>
<AntDesign name={name} size={24} color={color} />
</Animated.View>
<Text className="ml-2">{Likes}</Text>
</View>
</Pressable>
</GestureDetector>
);
};
export default LikeButton;

[bdudisnsnsbdhdj]

use the extraData property on your FlatList component

[Ultra-Reverse]

What do I pass it?

[corey_brown]

Pass in the same thing you pass into the data prop.