reactjs: los ganchos useState() de React almacenan indefinidamente siempre, incluso los datos que se van a almacenar se registra

Aquí es donde tengo el problema,

const handleCLick = () => {
        const parsedId = getYouTubeID(videoLink);
        console.log(parsedId);
        setVideoId(parsedId);
        console.log(videoId);
    }

Aquí, cuando intento registrar el 'parsedId', registra los datos correctamente

ioNng23DkIM

Y después de usar la función setVideoId(), cuando intento registrar el valor, devuelve un valor indefinido

undefined

Aquí hay una instantánea de la salida del registro.

Código Home.js:

import React, { useRef, useState } from "react";
import { Link } from "react-router-dom";
import getYouTubeID from 'get-youtube-id';

function Home(props) {
    const [videoLink, setVideoLink] = useState();
    const [isBool, setBool] = useState(false);
    const [videoId, setVideoId] = useState();
    const urlRef = useRef();

    const handleChange = (event) => {
        setVideoLink(event.target.value);
        if (urlRef.current.value === '') {
            alert('Please enter a URL');
            setBool(true);
        } else {
            setBool(false);
        }
    }

    const handleCLick = () => {
        const parsedId = getYouTubeID(videoLink);
        console.log(parsedId);
        setVideoId(parsedId);
        console.log(videoId);
    }

    return (
        <section className="homeLayout">
            <div className="logo-display">
                <img className="logo-img" alt="logo" src="./logo.png" />
                <h1>WatchIt</h1>
            </div>
            <div className="searchlayer">
                <form>
                    <input ref={urlRef} id="videoLink" placeholder="Enter the youtube video URL:" onBlur={handleChange} required />
                    <Link style={{ pointerEvents: isBool ? 'none' : 'initial' }} to={`/play?=${videoId}`} onClick={handleCLick}>Play</Link>
                </form>
            </div>
        </section>
    );
}

export default Home;

setVideoId es asíncrono, por lo que videoId no se configura inmediatamente

-Nick Parsons

28 de marzo de 2021 a las 8:22

Entonces, ¿qué debo hacer para resolver mi problema? @NickParsons

- spartan_rok711

28 de marzo de 2021 a las 8:26

Cuando finalmente se establezca videoId, su función se volverá a representar con el valor establecido. Así que no debería haber ningún problema, ¿cuál es exactamente tu problema o qué no funciona?

-Nick Parsons

28 de marzo de 2021 a las 8:33

------------------------------------

Puedes utilizar useEffect para resolver tu problema.

El efecto de uso escuchará tu cambio de estado y luego podrás realizar la lógica allí.

------------------------------------

El problema al que te enfrentas se debe a que setState establecerá el valor eventualmente, no inmediatamente (normalmente esto significa que la actualización será visible cuando el componente se renderice nuevamente). Si desea hacer algo después de establecer el valor, debe usar useEffect.

Dividiendo tu handleClick obtenemos,

const handleCLick = () => {
    const parsedId = getYouTubeID(videoLink);
    console.log(parsedId);
    setVideoId(parsedId); // Queue the change for `videoId`
}

useEffect(() => {
    console.log(videoId); 
}, [videoId]); // Call this function when the value of `videoId` changes