State not immediately updating, even with prevState

Question

I'm trying to assign "email" (which is a state) to "refEmail.current.value".

So I do setEmail(response.data) and when I do a console.log(response.data), I have the expected data, but if I do immediately after a console.log(email), I still have the default value of my state. I tried using prevState but it doesn't change anything: setEmail(prevState => prevState, response.data)

This is my code:

const EditProfilModal = () => {

  const [email, setEmail] = useState('exemple') 

  const refFirstname = useRef();
  const refLastname = useRef();
  const refEmail = useRef();

  useEffect(() => {
    const toFetchEmail = async () => {
      try {
        const params = JSON.parse(localStorage.getItem("user")).user_id;
        const response = await axios.get(`http://localhost:4200/api/user/${params}`);
        setEmail(prevState => prevState, response.data)        
        console.log(response.data)
        console.log(email);
      } catch (err) {
        throw err;
      }
    };
    toFetchEmail()
    refFirstname.current.value = JSON.parse(localStorage.getItem("user")).user_firstname;
    refLastname.current.value = JSON.parse(localStorage.getItem("user")).user_lastname;
    refEmail.current.value = email;
  }, []);

  return (.....)

So, the first console.log return the expected data, but the second return the default value (example) instead of the expected data. Why, and how to update the state immediately?

You can't update it immediately. The value of email doesn't change until the line where it's assigned to is reached again. — jonrsharpe, Nov 01 '21 at 11:59
Does this answer your question? [The set method in useState variable not updating the state variable](https://stackoverflow.com/questions/69375411/the-set-method-in-usestate-variable-not-updating-the-state-variable) — tomleb, Nov 01 '21 at 12:13

score 0 · Answer 1 · answered Nov 01 '21 at 12:04

This is the same issue mentioned in useState set method not reflecting change immediately and setState in react functional components is not being assigned property with assigned objects

React setState or useState function will not instantly change your variable, it is an asynchronous process that will only set your value on its next render,

console.log(email)
setEmail(newEmail)
console.log(email)

This code show same log as current property is not yet updated with the new one, To check the change of a state variable you can check it outside your function (before the return of component) or in a useEffect

useEffect(()=> {
    conole.log(email) // this will console latest value on your every `email` update
 },[email])

or you can simply console it before you return the HTML, or inside HTML, the value will automatically update on its next render

const EditProfilModal = () => {

  const [email, setEmail] = useState('exemple') 

  const refFirstname = useRef();
  const refLastname = useRef();
  const refEmail = useRef();

  useEffect(() => {
    const toFetchEmail = async () => {
      try {
        const params = JSON.parse(localStorage.getItem("user")).user_id;
        const response = await axios.get(`http://localhost:4200/api/user/${params}`);
        setEmail(prevState => prevState, response.data)        
        console.log(response.data)
       } catch (err) {
        throw err;
      }
    };
    toFetchEmail()
    refFirstname.current.value = JSON.parse(localStorage.getItem("user")).user_firstname;
    refLastname.current.value = JSON.parse(localStorage.getItem("user")).user_lastname;
    refEmail.current.value = email;
  }, []);
  console.log(email);  //This will console email on every render, you can check the update each time. it always consoles the latest updated value.
  return (.....)

Hi, thanks for your help but i'm already using useEffect as it's shown in my code and even adding [email] as dependancie of my useEffect d'ont change anything, when i do : useEffect(()=> { console.log(email) },[email]) the console.log returns me "exemple" and not the response.data as expected :/ — vincent05996, Nov 01 '21 at 12:48
you can write any number off use effects in component, keep the current useEffect as same and create a new one with email dependency. I have suggested to methods to check the email changes. both will work fine — sojin, Nov 01 '21 at 13:02
Yes, i have keep my code and just added this : useEffect(() => { refEmail.current.value = email; }, [email]); but ref.current.value is still equal to "exemple" — vincent05996, Nov 01 '21 at 13:10

State not immediately updating, even with prevState

1 Answers1