React useState - usage of state reference misunderstanding

react_hooks_state_reference_misunderstanding.js

// This is the example of React component using useState React Hook which looks alright at first glance but it is not.
// Someone would think that "setText" would set text variable to new text and it can be used immediatelly, but this is not true.
// The setText does not update "text" variable immediatelly, it will update text state somewhere at React internals
// and after the component rerenders the "text" variable will be updated with new value.
// This is not some React magic, this is just how setter works.
// You must remember that functional component is basically the render method of class component
// and if state is changed in render method then component must rerender to access new state.

function Text() {
    const [text, setText] = useState('');

    const handler = (evt) => {
        // the "text" variable is not updated immediatelly.
        // It will just tell React that "hey, this component new state is this" and React schedules rerender of component.
        // Maybe it would be better to name setter function "scheduleTextUpdate" :)
        setText(evt.target.value);
        // the following function use "text" variable, but it won't be new text.
        logText();
    };

    const logText = () => {
        console.log(text); // the "text" variable here will always point to the state of the latest component render.
    };

    return <input type={'text'} onChange={handler} />;
}