Why React Hooks doesn't update the data

Question

I try to update the values in the useState with the fetched data. when I console.log data.success it returns true. Then I assign it to the success value. but it returns false! why? why value success doesn't get updated immediately. At the end i receive the message from the server that the login was successful. SIGN IN success: false the user admin is logged

const Signin = () => {
  const [values, setValues] = useState({
    success: false
  });

  const { success } = values;

  const clickSubmit = async event => {
    event.preventDefault();

    const signReact = catchAsync(async (email, password) => {
      const data = await signin(email, password) // fetch data from the server
      console.log(data.success); // -> true
      if (data) {
        setValues({
          ...values, success: data.success // -> assign to success
        });
        console.log("SIGN IN success: " + success); // -> false! why?!
      }
      return data;
    });

    signReact(email, password);
  };

setState() is an async function. It doesnot update immediatly — Prakash Reddy Potlapadu, Mar 14 '20 at 19:29
Check out this solution https://stackoverflow.com/questions/60815245/react-doesnt-set-state-after-axios-finished-fetching/60820441#60820441 seems like this is the one you need — thedenisnikulin, Mar 23 '20 at 19:40

score 0 · Answer 1 · answered Mar 14 '20 at 19:31

0

setState() is an asynchronus function. So you cannot print it in the next statement.It will take some time.To see the updated state values you can log it in useEffect() like this

useEffect(()=>{

console.log(values);
},[values])

answered Mar 14 '20 at 19:31

Prakash Reddy Potlapadu

891
1
8
14

score 0 · Answer 2 · answered Mar 14 '20 at 19:33

According to the docs:

Calls to setState are asynchronous - don’t rely on this.state to reflect the new value immediately after calling setState. Pass an updater function instead of an object if you need to compute values based on the current state:

Example:

const Signin = () => {
  const [values, setValues] = useState({
    success: false
  });

  const { success } = values;

  React.useEffect(()=> {
    console.log("SIGN IN success: " + success);
  }, [values]);

  const clickSubmit = async event => {
    event.preventDefault();

    const signReact = catchAsync(async (email, password) => {
      const data = await signin(email, password) // fetch data from the server
      console.log(data.success); // -> true
      if (data) {
        setValues({
          ...values, success: data.success // -> assign to success
        });
      }
      return data;
    });

    signReact(email, password);
  };

blueseal · Accepted Answer · 2020-03-14T19:48:34.323

0

use useEffect. Try something like this:

useEffect(() => {
    console.log("SIGN IN success: " + values.success);
  }, [values]);

...
...
 const data = await signin(email, password);
 setValues(prevState =>{...prevState, success: data.success});

edited Mar 14 '20 at 19:48

answered Mar 14 '20 at 19:41

blueseal

2,726
6
26
41

the problem is that I need to update the value "success" to redirect the page. const redirect = () => { if (success) { return ; } }; – Michal Rutz Mar 14 '20 at 20:00
well, this question was for hooks though. You can try this https://stackoverflow.com/a/58444212/5124488 – blueseal Mar 14 '20 at 20:08
@MichalRutz to redirect on `api success` you can write as `{values.success&&}` as this will execute only when `success` is true – Prakash Reddy Potlapadu Mar 14 '20 at 20:11

Why React Hooks doesn't update the data

3 Answers3