useEffect not triggered by prop dependency - react-hooks

Question

So I have this component set up, which has an onClick handler to like or unlike a certain recipe. I am using the useEffect hook to make sure that the icon is changed accordingly based on the favoriteId prop. When the onClick and the associated queries are executed however, the useEffect hook is not triggered at all, how come?
const RecipeCard = ({ name, image, id, favoriteId }) => {
const { user } = useContext(AuthenticatedUserContext);
const [isFavorite, setIsFavorite] = useState(false);
const onLikePress = async () => {
if (favoriteId) {
await deleteDoc(doc(db, "favorites", favoriteId));
favoriteId = null;
} else {
const res = await addDoc(collection(db, "favorites"), {
userId: user.uid,
recipeId: id,
});
favoriteId = res.id;
}
};
useEffect(() => {
console.log("hit");
favoriteId ? setIsFavorite(true) : setIsFavorite(false);
}, [favoriteId]);
return (
<TouchableWithoutFeedback
onPress={onPress}
style={{ flex: 1, padding: 10 }}
>
<View>
<AntDesign
onPress={() => {
if (!user) {
setShowNoAccountModal(true);
} else {
onLikePress();
}
}}
name={isFavorite ? "like1" : "like2"}
color="black"
size={30}
/>
</View>
</TouchableWithoutFeedback>
);
};
export default RecipeCard;
Parent component:
export const HomeScreen = () => {
const [recipes, setRecipes] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
getRecipes();
}, []);
const getRecipes = async () => {
const querySnapshot = await getDocs(collection(db, "receipes"));
const fetchedRecipes = [];
for (const d of querySnapshot.docs) {
const citiesRef = collection(db, "favorites");
const q = query(
citiesRef,
where("userId", "==", user.uid),
where("recipeId", "==", d.id)
);
const querySnapshot = await getDocs(q);
const isFavorite = false;
if (querySnapshot.empty) {
favoriteId = null;
} else {
favoriteId = querySnapshot.docs[0].id;
}
const recipe = {
...d.data(),
id: d.id,
favoriteId,
};
fetchedRecipes.push(recipe);
}
setRecipes(fetchedRecipes);
setLoading(false);
};
return (
<View style={styles.container}>
{/* <Button title="Sign Out" onPress={handleLogout} /> */}
<Text style={{ fontSize: 24, fontWeight: "bold", paddingBottom: 10 }}>
Recepten
</Text>
{recipes && recipes.length > 0 && (
<FlatList
data={recipes}
renderItem={({ item }) => (
<RecipeCard
name={item.title}
id={item.id}
image={item.thumbnail}
favoriteId={favoriteId}
/>
)}
keyExtractor={(item) => item.id}
horizontal
/>
)}
</View>
);
};

Answer 1

You are mutating your favoriteId variable, but not using setState, so it is not done properly and react is unaware your variable might have changed.
To fix this, you will need to pass a function to change your favoriteId prop inside of your component's parent:
// in parent:
const [favoriteId, setFavoriteId] = useState() // this code should be here already
return (
// your code here
<RecipeCard changeFavoriteId={(newId) => setFavoriteId(newId)} />
// just add this changeFavoriteId prop, the old props should be here still though
// rest of your code
)
// in RecipeCard.js
const RecipeCard = ({ name, image, id, favoriteId, changeFavoriteId }) => {
// your code here
const onLikePress = async () => {
if (favoriteId) {
await deleteDoc(doc(db, "favorites", favoriteId));
favoriteId = null;
} else {
const res = await addDoc(collection(db, "favorites"), {
userId: user.uid,
recipeId: id,
});
changeFavoriteId(res.id) // this bit here changed, now you are using setState
}
};
// the rest of your code
By using setState function that you obtained from parent useState, your component will trigger a rerender after the value is changed.