console log the state after using useState doesn’t return the current value [duplicate]

by

useState by default simply does one thing and one thing only, set the new state and cause a re-render of the function. It is asynchronous in nature so by default, methods running after it usually run.

From your example, on a fresh load of the page, typing ‘s’ causes useState to change the state, but because it is asynchronous, console.log will be called with the old state value, i.e. undefined (since you didn’t set a value. You should consider setting an initial state, if you want to)

const [weather, setWeather] = useState('');    // Set the intial state

The only way to truly read the value of the state is to use useEffect, which is called when there is a re-render of the component. Your method simply becomes:

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function Weather() {
    const [weather, setWeather] = useState('');

    useEffect(() => console.log(weather), [weather]);

    const changeValue = event => setWeather(event.target.value);

    return <input value={weather} onChange={changeValue} />;
}

const rootElement = document.getElementById('root');
ReactDOM.render(<Weather />, rootElement);

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. Why do we need middleware for async flow in Redux?
  3. Push method in React Hooks (useState)?
  4. Rendering raw html with reactjs
  5. Why is my React component is rendering twice?
  6. ReactJS: Maximum update depth exceeded error
  7. What does three dots do in ReactJS [duplicate]
  8. Why is my onClick being called on render? – React.js
  9. what is right way to do API call in react js?
  10. REACT – toggle class onclick
  11. How to display binary data as image in React?
  12. ES6 modules implementation, how to load a json file
  13. Sending Request body for GET method in AXIOS throws error
  14. Recommended way of making React component/div draggable
  15. React: why child component doesn’t update when prop changes
  16. How to store Configuration file and read it using React
  17. React: trigger onChange if input value is changing by state?
  18. Is store.dispatch in Redux synchronous or asynchronous
  19. Difference between declarative and imperative in React.js?
  20. How do I setState for nested object?
  21. First Load JS shared by all is rather heavy in next.js
  22. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  23. useEffect is running twice on mount in React
  24. React – useState – why setTimeout function does not have latest state value?
  25. How to create a protected route with react-router-dom?
  26. “You may need an additional loader to handle the result of these loaders.”
  27. using css modules how do I define more than one style name
  28. Could not find “store” in either the context or props of “Connect(App)”
  29. Class based component vs Functional components what is the difference ( Reactjs ) [duplicate]
  30. value of using React.forwardRef vs custom ref prop

Leave a Comment