How to overcome the React hook useState async behavior? - reactjs

Question

I am having some problems with the useState async behavior that can also be related to Redux which I am new at it.
import React, { useState, useEffect } from "react"
import { useSelector, useDispatch } from "react-redux"
import { Link } from "react-router-dom"
import {
getAlltopics,
joinAtopic,
leaveAtopic,
} from "../../../redux/actions/topicActions"
import Icon from "../Icon"
const TopicCard = ({ topics }) => {
const user = useSelector((state) => state.user)
const [join, setJoin] = useState(false)
const dispatch = useDispatch()
console.log(join)
const leaveTopicHandler = async () => {
setJoin(false)
dispatch(leaveAtopic(topics._id))
}
const JoinTopicHandler = () => {
setJoin(true)
dispatch(joinAtopic(topics._id))
}
useEffect(() => {
const checkJoinedUser = () => {
topics.members.map((member) => {
if (member._id === user?._id) setJoin(true)
})
}
checkJoinedUser()
dispatch(getAlltopics())
}, [join, dispatch])
return (
<div
key={topics._id}
className="flex flex-col justify-between w-48 h-72 bg-white shadow-xl rounded-br-3xl rounded-bl-3xl rounded-tr-3xl"
>
<Link to={`/topics/${topics._id}`}>
<section className="">
<img
src={topics.bannerImage}
alt="topic_Image"
className="object-cover h-48 w-full rounded-tr-3xl"
/>
</section>
<section className="border-b-2 border-grey-light ml-3 mr-3 h-12 flex items-center">
<h1 className="text-lg">{topics.title}</h1>
</section>
</Link>
<section>
<div className="flex justify-between">
<div className="flex p-3">
<Icon iconName="member" iconStyle="fill-inactive text-grey-dark" />
<span>{topics.members?.length}</span>
<Icon iconName="file" iconStyle="fill-inactive text-grey-dark" />
<span>{topics.recources?.length}</span>
</div>
<div className="p-3">
{join ? (
<button type="button" onClick={leaveTopicHandler}>
<Icon
iconName="follow"
iconStyle="fill-active text-grey-dark"
/>
</button>
) : (
<button type="button" onClick={JoinTopicHandler}>
<Icon
iconName="follow"
iconStyle="fill-inactive text-grey-dark"
/>
</button>
)}
</div>
</div>
</section>
</div>
)
}
I have defined a join variable to handle a button that depending on if it is true or false will show or not some aspect, also, if it is false the user can join the topic, if it is true the user can leave the topic as it is noticeable in the functions JoinTopicHandler and leaveTopicHandler. Before joining a topic it looks like this:before joining a topic, as it is possible to see, the join variable it's set to false, because I am not in the topic. When joining the topic, after joining the topic, the joinvariable is set to true, the button changed, although the user count didn't changed for 2 (sometimes it does, sometimes I have to refresh the page for it to render), but the weirdest thing is when leaving the topic, as it's shown in the console,leaving the topic the join variable turns to false but then by it self turns again to true and the button still looks the same and I can not fix this...

Answer 1

Without knowning what the leaveAtopic function does exactly, my guess is that since join is in your useEffect hook dependencies, what happens from clicking the leave button is:
leaveTopicHandler is run
setJoin(false) causes re-render and since join is a dependency of the useEffect, we run it again
dispatching leaveAtopic starts but I'm assuming there is async logic there
topics hasn't changed yet so when the useEffect runs topics.members still contains the user
You probably don't even need useState/useEffect for join, and instead could do something like:
const join = !!topics.members.find((member) => member._id === user?._id))

Answer 2

So I had a few mistakes starting from the backend of my app, first of all, I wasn't returning the updated topic because I didn't set the call correctly.
const addUserToTopicDb = async (topicId, user) => {
try {
return await Topic.findByIdAndUpdate(topicId, {
$push: { members: user },
}, {new: true});
} catch (error) {
throw new Error(error);
}
};
I had to add the {new: true} to get the updated topic. This was a major error. Second, my code on the reducer wasn't working properly as I am new at it and learning by solving this kind of problems.
I changed my reducer code to:
case JOIN_TOPIC:
return {
allTopics: state.allTopics.map((eachTopic) =>
eachTopic._id === action.payload.topic._id
? action.payload.topic
: eachTopic
),
}
case LEAVE_TOPIC:
return {
allTopics: state.allTopics.map((eachTopic) =>
eachTopic._id === action.payload.topic._id
? action.payload.topic
: eachTopic
),
}
This basically means that if I have a topic with the same _id, replace it with the new updated topic that I wasn't returning in the beginning.
After this, everything started to work smoothly. Shame on me to assume that the problem was due to the useState... when it was all along in my database set up and reducer...