can't implement the dashboard updation in reactjs without reloading the page

Question

i am building an Management app where one is assignee and other is user ( complainer, who makes complaint ). Both assignee and complainer have their own dashboards. i want to implement that when complainer makes new complaint, it will be displayed on assignee dashboard without reloading the page. i have implemented this but this gives me that error.

can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

i have tried many times but still this error.

import React, { createContext, useState, useEffect } from "react";
import http from "../services/httpService";
import { getAssigneeComplaints } from "../services/complaintService";
import config from "../config.json";

export const ComplaintContext = createContext();

const ComplaintContextProvider = props => {
   const [assigneeComplaints, setAssigneeComplaints] = useState([]);

  // getting all assignee complaints
  const getAssigneeComplaint = async () => {
    const { data } = await getAssigneeComplaints();
    setAssigneeComplaints(data);
    console.log(data);
   };

  // saving a complaint
  const saveComplaint = async complaint => {
    console.log("new complaint is being saved");
    await http.post(config.apiUrl + "/complainer-complaints", complaint);
    getAssigneeComplaint();
 };

  useEffect(() => {
    getAssigneeComplaint();
  }, []);

  return (
    <>
      <ComplaintContext.Provider
        value={{
          getAssigneeComplaint,
          assigneeComplaints,
          saveComplaint
        }}
      >
        {props.children}
      </ComplaintContext.Provider>
    </>
  );
};

export default ComplaintContextProvider;

i expect to show the complaint on assignee's dashbaord without reloading the page.

it have used but this results in an infinite loop which never stops — Makki Anjum, Jul 25 '19 at 11:14

score 0 · Answer 1 · answered Jul 25 '19 at 10:34

0

For real time updation you should use socket.io-react.Following link is useful for you : https://www.npmjs.com/package/socket.io-react

answered Jul 25 '19 at 10:34

Bhawana

372
1
6

can it be achieved with Redux instead of socketio? – Makki Anjum Jul 25 '19 at 11:09
If you use redux than after updating state it will again render component , so if you want data without reloading the page than you should go with socket. – Bhawana Jul 25 '19 at 11:18
then why it is not working using CONTEXT ? contextAPI can do the same as Redux. why this error?can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. – Makki Anjum Jul 25 '19 at 11:22

score 0 · Answer 2 · answered Jul 25 '19 at 10:44

0

As the answer above you need to use web-socket for real time updates. Have a look on socket.io

answered Jul 25 '19 at 10:44

Akram Badah

417
3
12

can it be achieved with Redux instead of socketio? – Makki Anjum Jul 25 '19 at 11:09
Sadly no the only way to update data produced by a user and you want the other user to see it without reloading is using web-socket. – Akram Badah Jul 25 '19 at 12:20
can u please suggest some article or video for this? because there is alot of data about it and its harder to find the best one. – Makki Anjum Jul 25 '19 at 13:50
https://www.youtube.com/watch?v=hiiaHyhhwBU this video starts talking about sockets around minute 37 – Akram Badah Jul 28 '19 at 05:19

can't implement the dashboard updation in reactjs without reloading the page

2 Answers2