How to call useEffect when there is new student record in the database which is coming from my localhost server?

Question

const [studentData, setStudentData] = useState([]);

useEffect(() => {
const getStudentData = async () => {
try {
const studentArray = await axios.get("http://localhost:5000/");
console.log("studentArray =", studentArray);

setStudentData(studentArray.data);
} catch (error) {
console.log(error);
}
};
getStudentData();
}, []);

Answer 1

Yamin Mansuri you can't use studentData as effect due to studentData is not changed for every timeout run, if there is one unchanged data occurs, the useEffect callback would be stop execution permanently.

Chack out this test

https://code.sololearn.com/WZz1LZ4sdfxo/?ref=app

Answer 2

Hi. React by itself cant know that something has changed on the server. For something like this you need to use websockets. Take a look at Socket.io, its quick to setup and overall really easy.

Hope it helps!

Answer 3

Front end react would not know backend data change, the better way is using socket.io, which allow server side trigger response to subscribed client.

If we don't have control over backend coding, the only frontend react codes can check for data changes is using time interval polling method.

const [count, setCount] = useState(0);

useEffect(() => {

setTimeout (() => {
getStudentData();
setCount(c=>c+1);
}, 1000);
// poll at every 1sec
}, [count]);

Answer 4

Yamin Mansuri you should not add effect directly to the code of your OP, it would create stack overflow

Answer 5

Yamin Mansuri try this
useEffect(() => {

setTimeout (() => {
getStudentData();
}, 1000);
// poll at every 1sec
}, [studentData]);

Answer 6

Try use SWR package with useSWR hook, or in useEffect(()=>{}, [there]) you can give dependency array, e.g when some state changes(loading or when your client send a request to db) you can handle this and say: hey when form submits change some state and give that value to 2and argument to useEffect, and it will mean that when your state changes your useEffect hook will send request to db every time when your state for adding new users changes. If its difficult, try web sockets and handle it:))

Answer 7

Now your useEffect will run every time studentData changes. But you setStudentData inside the useEffect, which means that it will loop and create a memory leak.

Answer 8

Yamin Mansuri I think I made a mistake, sent you a wrong information. I am sorry.

Since api fetch should return a copy of array or object [data, ...apiData], it should trigger effect even though it has the similar data with the previous one, due to object/array has pointed to new reference.

https://code.sololearn.com/Wu7YwuWiC8JG/?ref=app

So I think you should be able to use studentData as effect without problem as long as the fetch api update new copy of studentData whenever it runs.

Answer 9

Yamin Mansuri does the fetch run with setTimeout 1sec delay?

Answer 10

Jan Staffa
Thank you 😊

Answer 11

Calviղ
I fetch data from my backend and then I set the data with setStudentData

Now what if I do it like this

useEffect(()=>{
//Same code
}, [studentData]):

Answer 12

Jan Staffa
Oh got it😊

And thank you all🤗

Answer 13

Calviղ
I tried like that but usEffect was calling every time and resulted in infinite loop even though studentData wasn't changes.

Answer 14

Calviղ
I am not getting you

Answer 15

هاي