-1
  ...
  const [submitted, setSubmitted] = useState(false);


  // form submission handler
  const handleSubmit = event => {

    // [DEBUG] ////////////////////////
    console.log('entered handleSubmit');
    ////////////////////////////////////

    event.preventDefault();

    const isValid = !!(values.firstName && values.lastName && values.email);
    setSubmitted(isValid); // ???? changes not being reflected in submitted ??????


    // [DEBUG] //////////////////////////////////////////
    console.log('[isValid]', isValid);  // true
    console.log('[submitted]', submitted); // false ???

    console.log('exiting handleSubmit');
    ////////////////////////////////////////////////////
  };
  ...

As you can see, the code tries to update the state variable. However, the changes are not being reflected. Any explanations why?

Grateful
  • 9,685
  • 10
  • 45
  • 77
  • 1
    `setSubmitted` is asynchronous. – Heretic Monkey Sep 14 '20 at 14:12
  • Ah okay. So how would I go about solving this riddle? – Grateful Sep 14 '20 at 14:12
  • 1
    State is updated asynchrnously. State and props are constants within a specific render of a react component. Component will have to re-render in order for it to see the updated state or props. – Yousaf Sep 14 '20 at 14:12
  • Does this answer your question? [How to use \`setState\` callback on react hooks](https://stackoverflow.com/questions/56247433/how-to-use-setstate-callback-on-react-hooks) – Heretic Monkey Sep 14 '20 at 14:14
  • Well, I have a form that should be using the updated value upon submission... But pressing the submit button doesn't work as it should for me. – Grateful Sep 14 '20 at 14:14
  • 1
    Does this answer your question? [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) – CertainPerformance Sep 14 '20 at 14:17

1 Answers1

0

State is updated asynchronously. You can catch the updated state value inside useEffect().

useEffect(() => {
    console.log(submitted);
}, [submitted]);
Senior0023
  • 142
  • 1
  • 9
  • 1
    Stack Overflow already has many questions and answers about this behavior. Part of what makes Stack Overflow a great resource is that we consolidate questions about the same issue into just a few Q&A pairs so that searches find those instead of 500 different questions and answers. If you see comments on a question starting with "Does this answer your question?" followed by a link, please navigate to that link and see if you think the question is answered. If so, please refrain from answering the question. Thanks. – Heretic Monkey Sep 14 '20 at 14:28
  • @HereticMonkey Thank you for the advice. However, on the flip side, many a time these so-called "duplicates" have been suggested based on certain keywords, without the "suggestor" really bothering to view the content to see if things are actually duplicated. – Grateful Sep 14 '20 at 14:36