Using useEffect properly when making reqs to a server-CodePudding

I have a handleRating function which sets some state as so:

  const handleRating = (value) => {
    setCompanyClone({
      ...companyClone,
      prevRating: [...companyClone.prevRating, { user, rating: value }]
    });
    setTimeout(() => {
      handleClickOpen();
    }, 600);
  };

I think also have a function which patches a server with the new companyClone values as such:

  const updateServer = async () => {
    const res = await axios.put(
      `http://localhost:3000/companies/${companyClone.id}`,
      companyClone
    );

    console.log("RES", res.data);
  };

my updateServer function gets called in a useEffect. But I only want the function to run after the state has been updated. I am seeing my res.data console.log when I load my page. Which i dont want to be making reqs to my server until the comapanyClone.prevRating array updates.

my useEffect :

  useEffect(() => {
    updateServer();
  }, [companyClone.prevRating]);

how can I not run this function on pageload. but only when companyClone.prevRating updates?

CodePudding user response：

For preventing function call on first render, you can use useRef hook, which persists data through rerender.

Note: useEffect does not provide the leverage to check the current updated data with the previous data like didComponentMount do, so used this way

Here is the code example.

https://codesandbox.io/s/strange-matan-k5i3c?file=/src/App.js