I wanted to use useEffect() to work like componentDidUpda(). Whenever I click a certain button, I wanted the states updated so that React may render components. Last time I talked about how to add [] as a second argument to useEffect() in order to prevent infinte loops. This time, it is about how to call it when you want.
Check out the code below;
useEffect(() => {
if (joinPartyBtnClick) {
const getToken = localStorage.getItem("wtw-token");
fetch(`${ADDRESS}party/join`, {
method: "post",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: getToken,
},
body: JSON.stringify({
id: idJoinParty,
}),
}).then((response) => {
if (response.status === 200) {
setParticipationStatus(!participationStatus);
}
setJoinPartyBtnClick(!joinPartyBtnClick);
});
}
}, [joinPartyBtnClick]);This is very straight-forward. If joinPartyBtnClick === true, you run the fetch as written. I can set that the useEffect() runs whenever the state of joinPartyBtnClick changes by adding it as the second argument like above.