How to process data received from an AJAX request in React

I have a custom hook named "useFetch" which makes an AJAX request and stores the result in the state. I simply want to format the data received from the ajax using a function in my component but not sure how to do this since the function needs to be called only after the data is received.

An example is below:

import React, { Component, useState } from "react";
import useFetch from "../../../Hooks/useFetch";

const Main = () => {
       
    const { data, isPending, error } = useFetch(
        "http://127.0.0.1:8000/api/historic/1"
    );
    
    function formatData(data){
        //Do some processing of the data after it's been received
    }

    //This doesn't work of course because it runs before the data has been received
    const formatted_data=formatData(data);

    return (
        //Some display using the formatted data
    );
};

export default Main;

This is the custom hook, useFetch, which is used in the above component. I’d prefer to not have to do the formatting in here because the formatting is specifically related to the above component and this custom hook is designed to have more universal utility.

import { useState, useEffect } from "react";

const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [isPending, setisPending] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const abortCont = new AbortController();

        fetch(url, { signal: abortCont.signal })
            .then((res) => {
                if (res.ok) {
                    return res.json();
                } else {
                    throw Error("could not fetch data for that resource");
                }
            })
            .then((data) => {
                setData(data);
                setisPending(false);
                setError(null);
            })
            .catch((er) => {
                if (er.name === "AbortError") {
                    console.log("fetch aborted");
                } else {
                    setError(er.message);
                    setisPending(false);
                }
            });

        return () => abortCont.abort();
    }, [url]);

    return { data, isPending, error };
};

export default useFetch;

>Solution :

You should wrap it with useEffect hook with data as it’s deps.

const [formattedData, setFormattedData] = useState();

useEffect(() => {
  if (!data) return;

  const _formattedData = formatData(data);

  setFormattedData(_formattedData);
}, [data]);