Las actualizaciones de estado se producen de forma asincrónica, por lo que no tendrá el valor de estado actualizado dentro del controlador de eventos.

Puede elevar el nuevo valor, es decir capitalValue - 100 a un ámbito desde el que pueda pasarse a ChangeCapital & Calculate .

 const CompoundIntrest = () => { const [capitalValue, setCapitalValue] = React.useState(1000); const handleClick = () => { const newCapitalValue = capitalValue - 100; ChangeCapital(newCapitalValue); Calculate(newCapitalValue); }; const ChangeCapital = (capitalValue) => { setCapitalValue(capitalValue); }; const Calculate = (capitalValue) => { console.log(capitalValue); }; return ( <React.Fragment> <button onClick={handleClick}>click</button> <input type="number" value={capitalValue} onChange={(e) => setCapitalValue(e.target.value)} /> </React.Fragment> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<CompoundIntrest />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>

Nota: La función de actualización de estado se llama de forma síncrona, pero las actualizaciones de estado se realizan de forma asíncrona.

Esto se vuelve más claro si actualiza el estado pasando una devolución de llamada del actualizador de estado, verá que la devolución de llamada se activa sincrónicamente. Observe el orden de los registros en el siguiente ejemplo:

 function App() { const [count, setCount] = React.useState(0); const handleClick = () => { console.log("Before calling setCount"); setCount((currCount) => { console.log("Inside setCount"); return currCount + 1; }); console.log("After calling setCount"); }; return <button onClick={handleClick}>Count: {count}</button>; } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>

Creo que debería agregar el método onChange en la etiqueta de entrada como se muestra a continuación:

Luego obtiene el valor actual en el evento onClick en la etiqueta del botón.

 import { React, useState } from "react"; const CompoundIntrest = () => { const [capitalValue, setcapitalValue] = useState(1000); const ChangeCapital = () => { setcapitalValue(capitalValue - 100); }; useEffect(() => { const Calculate = () => { console.log(capitalValue); }; Calculate() }, [capitalValue]) return ( <> <button onClick={() => { ChangeCapital(); }} > click </button> <input type="number" value={capitalValue} onChange={(e) => setcapitalValue(e.target.value)} /> </> ); }; export default CompoundIntrest;

Puede usar Use useEffect así: -

 import React,{useState,useEffect} from "react"; const CompoundIntrest = () => { const [capitalValue, setcapitalValue] = useState(1000); const ChangeCapital = () => { setcapitalValue(capitalValue - 100); }; const Calculate = () => { console.log(capitalValue); }; useEffect(()=>{ console.log("afet chage",capitalValue); },[capitalValue]); return ( <> <button onClick={() => { ChangeCapital(); Calculate(); }} > click </button> <input type="number" value={capitalValue} /> </> ); };