0

My code is:

const Chat = () => {
    const { type,title,roomId } = useParams();
    const [roomDetails, setRoomDetails] = useState(null);
    const [roomMessages, setRoomMessages] = useState([]);

    const getConversation = useCallback(() => {
        var parameters = {type:type,
                        title: title,
                        id : roomId
                    }; 
        const params = new URLSearchParams(parameters);
        console.log(title);
        axios.get(`/get/conversation?${params}`).then((res) =>{
            setRoomDetails(title)
            setRoomMessages(res.data)
        })
    });

    useEffect(() => {
        console.log("Hey")
        
        getConversation()

        //realtime processing
        const channel = pusher.subscribe('conversation');
        channel.bind('newMessage', function(data) {
            getConversation()
        });
    },[getConversation])

I don't know why but useEffect is triggering infinitely. The logic in this is basically I have a URL: <Route path="/room/:type/:title/:roomId"> Which on rendering invokes the chat component option. Now of all these my params type and title will only change. But in some cases type will remain same, only title will change.

Even after adding them to callback function, I don't know why its rendering infinitely? if it's easy to understand the relation between type and title is:

{ 
type : 
  [{
    title:{},
    title{},
    title{}
  }]
}

0 Answers0