I’m having an issue when trying to save to State an axios API call. I’ve tried
useState set method not reflecting change immediately ‘s answer and many other and I can’t get the state saved. This is not a duplicate, because I’ve tried what the accepted answer is and the one below and it still doesn’t work.
Here’s the (rather simple) component. Any help will be appreciated

export const Home = () => {
    const [widgets, setWidgets] = useState([]);
    useEffect(() => {
        axios
            .get('/call-to-api')
            .then((response) => {
                const data = response.data;
                console.log(data); // returns correctly filled array
                setWidgets(widgets, data);
                console.log(widgets); // returns '[]'
            });
    }, []); // If I set 'widgets' here, my endpoint gets spammed
    return (
        <Fragment>
            {/* {widgets.map((widget) => { // commented because it fails
                <div>{widget.name}</div>;
            })} */}
        </Fragment>
    );
};

>Solution :

Welcome to stackoverflow, first thing first the setting call is incorrect you must use spread operator to combine to array into one so change it to setWidgets([...widgets, ...data]); would be correct (I assume both widgets and data are Array)

second, react state won’t change synchronously

        .then((response) => {
            const data = response.data;
            console.log(data); // returns correctly filled array
            setWidgets(widgets, data);
            console.log(widgets); // <--- this will output the old state since the setWidgets above won't do it's work till the next re-render

so in order to listen to the state change you must use useEffect hook

useEffect(() => {

   console.log("Changed Widgets: ", widgets)

}, [widgets])

this will console log anytime widget changes

the complete code will look like this

export const Home = () => {
    const [widgets, setWidgets] = useState([]);
    useEffect(() => {
        axios
            .get('/call-to-api')
            .then((response) => {
                const data = response.data;
                setWidgets([...widgets, ...data])
            });
    }, []); 

    
    useEffect(() => {

        console.log("Changed Widgets: ", widgets)

    }, [widgets])



    return (
        <Fragment>
            {/* {widgets.map((widget) => { // commented because it fails
                <div>{widget.name}</div>;
            })} */}
        </Fragment>
    );
};