Using setState in the function updates the state. However, when I log the state inside the function, it shows the initial state

Question

It is more of a React question than ApexCharts

I am calling the function addAnno from variables.

I am incrementing the value of annotationText whenever addAnno function is called. When I log annotationText inside the function, it always logs the value 1. However, when I log it outside the function, it shows me the updated value.

const annotationProps = {
    marker: {
        size: 8,
        fillColor: '#fff',
        strokeColor: 'red',
        radius: 2,
        cssClass: 'apexcharts-custom-class',
    },
    label: {
        borderColor: '#FF4560',
        offsetY: 0,
        style: {
            color: '#fff',
            background: '#FF4560',
        },
        text: 'Comment',
    },
};
const defaultAnnotations = [];
const annotations = defaultAnnotations.map((item) => ({
    x: item.x,
    y: item.y,
    ...annotationProps,
}));

function ApexAnnotations({ data }) {
    const variables = {
        series: data,
        options: {
            chart: {
                id: 'anno',
                height: 350,
                type: 'line',
                events: {
                    dataPointSelection: function (event, chartContext, config) {
                        const x = config.w.config.series[config.seriesIndex].data[config.dataPointIndex]['x'];
                        const y = config.w.config.series[config.seriesIndex].data[config.dataPointIndex]['y'];
                        addAnno(x, y);
                    },
                },
            },
            annotations: {
                position: 'back',
                points: annotations,
            },
            xaxis: {
                type: 'datetime',
                title: {
                    text: 'Month',
                },
            },
            markers: {
                size: 5,
            },
            tooltip: {
                intersect: true,
                shared: false,
            },
        },
    };
    const [chartData, setChartData] = useState(variables);
    const [annotationText, setAnnotationText] = useState(1);

    const addAnno = (x, y) => {
    const newAnnotation = {
        x: new Date(x).getTime(),
        y: y,
        ...annotationProps,
    };
    console.log('Inside Function', annotationText);
    setAnnotationText((prevText) => prevText + 1);
    annotations.push(newAnnotation);

    setChartData((state) => ({
        ...state,
        options: {
            ...state.options,
            annotations: {
                ...state.options.annotations,
                points: annotations,
            },
        },
    }));
};

    console.log('Outside Function', annotationText);

    return (
        <Container>
            <Chart options={chartData.options} series={chartData.series} height={400} />
        </Container>
    );
}

export default ApexAnnotations;

Does this answer your question? [React setState not updating state](https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state) — pilchard, Apr 26 '21 at 21:14

score 0 · Answer 1 · answered Apr 26 '21 at 19:33

You make inside console log before you update the annotationText value. There is no way console log can show updated value before this update actually happened.
setState is asynchronous, so even if you first do setAnnotationText((prevText) => prevText + 1); and then console.log, the value shown in console would still be "previous" value. It wouldn't be updated yet.
Console log which you make outside of the function is getting the initial value which is 1. When you click the button and update the annotationText value, state changes, component re-renders and console log outside of the function shows the updated version of the state. At this moment value in the function would also be updated but function is not called anymore, so there is no console to compare the results.

Using setState in the function updates the state. However, when I log the state inside the function, it shows the initial state

1 Answers1