React useEffect fetch data and print it out via the conosle

Question

I want to fetch data from an API and then print it out or to display it in the return statement from my react compenent so I can have a p element that have data fetched from the api in it. The problem is that the usestate dont get updated

The component code

import React, { useEffect } from "react"
import { newsComponentService } from "../services/newsComponentService";

const NewsComponent = () => {

    const [newsComponentData, setNewsComponentData] = React.useState({});
    const componentData = React.useRef("");

    async function newsComponentHandler() {
        let res = await newsComponentService();
        //console.log(res);
        setNewsComponentData(res);
        //console.log(res);
    }


    useEffect(() => {
        newsComponentHandler();
        //setNewsComponentData(res);


    }, [setNewsComponentData]);

    console.log(newsComponentData["data"]);

    return (
<p>{newsComponentData["data"]}</p>
    )
}

export default NewsComponent;

The api service code

export async function newsComponentService(){
    const response = await fetch("api/news-categories/1", {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
        },


    });
    
    let resJson = await response.json();
    //console.log(resJson);
    return resJson;


}

Answer 1

I think the issue could be with the async behavior of the JS.

import React, { useEffect } from "react"
import { newsComponentService } from "../services/newsComponentService";

const NewsComponent = () => {

    const [newsComponentData, setNewsComponentData] = React.useState({});
    const componentData = React.useRef("");

    useEffect(() => {
        const newsComponentHandler = async () => {
            let res = await newsComponentService();
            setNewsComponentData(res);
          }
        newsComponentHandler();


    }, [setNewsComponentData]);

    console.log(newsComponentData["data"]);

    return (
<p>{newsComponentData["data"]}</p>
    )
}

export default NewsComponent;

PS. As a good practice, please put the API fetching in try-catch block in newsComponentService.js