React - useState set method does not reflecting my change immediately

useState setter schedules update action that will be visible in the next rendering cycle.

useState set operation is `asynchronous` and will not be reflected immediately.

You can try to use the following source code to see the result change effect:

const Calculator = ({a, b, operator}) => {
    const [result, setResult] = useState();
    useEffect(() => {
        if (operator === '+') {
            setResult(a + b)
        }
    }, [a, b, operator]);
    useEffect(() => {
        console.log('Result: ' + result); // <------ solution for wrong value in question code
    }, [result]);
    return (
      <div>Result: {result}</div>
    );
};

second useEffect() will be triggered always on result changed, and after the component will be mount/ready.

Alternative solutions

1. Helper newResult variable/constant:

const Calculator = ({a, b, operator}) => {
    const [result, setResult] = useState();
    useEffect(() => {
        if (operator === '+') {
            const newResult = a + b;
            setResult(newResult);
            console.log('Result: ' + result); // <------ solution for wrong value in question code
        }
    }, [a, b, operator]);
    return (
      <div>Result: {result}</div>
    );
};

1. Setter with callback: 

const Calculator = ({a, b, operator}) => {
    const [result, setResult] = useState();
    useEffect(() => {
        if (operator === '+') {
            setResult(result => {
                const newResult = a + b;
                console.log('Result: ' + result); // <------ solution for wrong value in question code
                return newResult;
            });
        }
    }, [a, b, operator]);
    return (
      <div>Result: {result}</div>
    );
};