I’m working on a React application where I need to update data in the UI and make corresponding API calls. I’m wondering what the best practice is for handling this scenario to ensure UI consistency and data integrity.

I am following two approaches one of the approach is working another approach is not working.

Approach which is working:

const Approval = () => {
 const [data, setData] = useState([]);

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

 const fetchApproval = async () => {
    try {
        const res = await ApiService.getApproval(
            API_ENDPOINTS.GET_APPROVAL_LIST,
            tokenId
        );

        if(response?.status === 200){
            const filteredRes = response,approvalList.filter(res=> res.message.includes(Approval_list_key))
            setData(filteredRes)
        }
    }catch (error){
        console.log(error)
    }
 }

 const handleApproval = async (id) => {
    try {
            await ApiService.updateApprovalById(
            API_ENDPOINTS.UPDATE_APPROVALBY_ID,
            tokenId,
            { id, status: "Approved" }
        );
    } catch (error) {
        console.error("Error approving:", error);
    }
};
    

Approach which is not working:

const handleApproval = async (id) => {
    try {
        const updatedData = data.map(item => {
            if (item.id === id) {
                return { ...item, Status: "Approved" };
            }
            return item;
        });
        setData(updatedData);
        // Make PUT request to update the data
        await ApiService.updateApprovalById(
            API_ENDPOINTS.UPDATE_APPROVALBY_ID,
            tokenId,
           updatedData 
        );
    } catch (error) {
        console.error("Error approving:", error);
    }
};

Question:

1. Why I am not getting anything when I am trying to access State variable data? please let me know what I am missing or what I am doing wrong
2. In the handleApproval function, I’m updating the component state (data) first and then making the API call to update the approval status. However, I’m wondering if this is the best approach. Should I update the state first and then make the API call, or is it better to directly pass the data to the API call without relying on the component state update?

Additional Context:

1. What are the advantages and disadvantages of each approach?
2. How can I determine which approach is best suited for my specific use case?
3. Are there any potential pitfalls or edge cases to consider with each approach?
4. Any best practices or recommendations for handling state management and API calls in React applications?

Any insights or guidance on this topic would be greatly appreciated.