Функциональный компонент React делает снимок состояния во время регистрации обработчика в websocket

Question

Функциональный компонент

реагирует на снимок состояния во время подписки.

Например,Код PFB.

Если я нажимаю кнопку setSocketHandler, а затем нажимаю кнопку setWelcomeString.Теперь, если я получаю сообщение через сокет, когда я регистрирую строку приветствия, она пуста.

Но если я нажму кнопку setWelcomeString, а затем нажму кнопку setSocketHandler.Теперь, если я получаю сообщение на сокете, Welcome регистрируется на консоли.

Я видел такое же поведение в проекте, поэтому просто создал это простое приложение, чтобы доказать.

Если я использую компонент класса, который комментируетсяниже .. все работает отлично.

Поэтому мой вопрос заключается в том, почему функциональный компонент реагирует на состояние во время reg, а не на фактическое состояние в момент получения сообщения.

Этоочень странноКак заставить его работать в функциональном компоненте правильно.

import React, {useEffect, useState} from 'react';
import logo from './logo.svg';
import './App.css';
const io = require('socket.io-client');
const socket = io.connect('http://localhost:3000/');


const App : React.FunctionComponent = () => {

    const [welcomeString, setWelcomeString] = useState("");

    const buttonCliecked = () => {
        console.log("clocked button");
        setWelcomeString("Welcome")
    }


    const onsockethandlerclicked = () => {
        console.log("socket handler clicked");
        socket.on('out', () => {
            console.log("Recived message")
            console.log(welcomeString);
        });
    }

    return (
        <div>
            <header className="component-header">User Registration</header>
            <label>{welcomeString}</label>
            <button onClick={buttonCliecked}>setWelcomeString</button>
            <button onClick={onsockethandlerclicked}>setSocketHandler</button>
        </div>
    );
}

/*class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            welcomeString:""
        }
    }


    buttonCliecked = () => {
        console.log("clocked button");
        this.setState({ welcomeString:"Welcome"})
    }


    onsockethandlerclicked = () => {
        console.log("socket handler clicked");
        socket.on('out', () => {
            console.log("Recived message")
            console.log(this.state.welcomeString);
        });
    }

    render() {
        return (
            <div>
                <header className="component-header">User Registration</header>
                <label>{this.state.welcomeString}</label>
                <button onClick={this.buttonCliecked}>setwelcomestring</button>
                <button onClick={this.onsockethandlerclicked}>setSocketHandler</button>
            </div>
        );
    }
}*/


export default App;