React component doesn't re-render after setState

Question

i have state vacations, i set it after fetch within useEffect, i have button approve that will change data in vacation state and i want to re-render component after that happens within function handleApprove , so i made up virtual state componentShouldUpdate with initial value of false and passed it as a dependency for useEffect, and when function handleApprove gets triggered, i setState to the opposite of its value !componentShouldUpdate, but the component only re-render when i click 2 times, why is that happening and why it works fine when i setState componentShouldUpdate from a child component ?


function VacationsComponent() {
  const [vacations, setVacations] = useState([{}]);
  const [componentShouldUpdate, setComponentShouldUpdate] = useState(false);

  useEffect(() => {
    const getVacations = async () => {
      const response = await fetch("http://localhost:8000/get-vacations");
      const data = await response.json();
      setVacations(data);
    };

    getVacations();
  }, [componentShouldUpdate]);

  const handleApprove = async (e, vactionId) => {
    (await e.target.value) === "approve"
      ? fetch(`http://localhost:8000/approve-vacation/${vactionId}`, {
          method: "POST",
        })
      : fetch(`http://localhost:8000/reject-vacation/${vactionId}`, {
          method: "POST",
        });

    setComponentShouldUpdate(!componentShouldUpdate);
  };

    <button onClick={(e) => handleApprove(e, item._id)}>
      APPROVE
    </button>

}

Why can't you just call the getVacations function in the handler? — Adam Turaj, Sep 19 '22 at 12:57
```getVacation``` is block scoped, you can't access it from another block — aasem shoshari, Sep 19 '22 at 13:03
@RobLjim gave an example to what I mean. That would work fine — Adam Turaj, Sep 19 '22 at 13:08

RobLjm · Answer 1 · 2022-09-19T13:19:33.110

2

This is most probably caused because useState hook operates asynchronously. Read more here.

You can update your code to use only one state like this

function VacationsComponent() {
  const [vacations, setVacations] = useState([{}]);

  const getVacations = async () => {
    const response = await fetch("http://localhost:8000/get-vacations");
    const data = await response.json();
    setVacations(data);
  };
  useEffect(() => {
    getVacations();
  }, []);

  const handleApprove = async (e, vactionId) => {
    const slug =
      e.target.value === "approve" ? "approve-vacation" : "reject-vaction";
    await fetch(`http://localhost:8000/${slug}/${vactionId}`, {
      method: "POST",
    });

    getVacations();
  };

  <button onClick={(e) => handleApprove(e, item._id)}>APPROVE</button>;
}

edited Sep 19 '22 at 13:19

answered Sep 19 '22 at 13:05

RobLjm

399
2
11

thanks, but that didn't work for me – aasem shoshari Sep 19 '22 at 13:16
the other solution ( using ```then``` after fetch ) worked fine – aasem shoshari Sep 19 '22 at 13:17
@aasemshoshari just noticed the issue with your fetch in the `handleApprove` function. I have updated the `handleApprove` function. – RobLjm Sep 19 '22 at 13:21

WPW · Accepted Answer · 2022-09-19T13:11:57.227

put the setComponentShouldUpdate(!componentShouldUpdate) inside a thenable like this, and remove the async/await construct.

Also what was the intended purpose for setting state, I don't see the boolean being used anywhere. Usually when setting state you want the DOM to be updated somewhere, and especially with a boolean its great for toggling elements on the screen.

 const handleApprove = (e, vactionId) => {
    e.target.value === "approve"
      ? fetch(`http://localhost:8000/approve-vacation/${vactionId}`, {
          method: "POST",
        }).then(()=>{ 
           // does this go here if it is approved or when it s rejected 
           setComponentShouldUpdate(!componentShouldUpdate); 
        })
      : fetch(`http://localhost:8000/reject-vacation/${vactionId}`, {
          method: "POST",
        }).then(()=>{ setComponentShouldUpdate(!componentShouldUpdate); });

  
  };

React component doesn't re-render after setState

2 Answers2