How to change and access reactjs state in a same function?

Question

I'm kinda new to reactjs and I got a situation where I will have to change a state and then I will need to access the new state value in the same function. Please have a look at the code below,

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState(true); // default state true

  const CallMe = () => {
    setState(false); // state change to false
    console.log(state); // expecting false but return true
  };

  return (
    <div className="App">
      <button onClick={CallMe}>CallMe</button>
    </div>
  );
}

When I click the button for first time, I get true when I'm expecting false. Is there anyway, I can do it these thing in a same function like above?

if you need a state right away u usually dont use a state but a variable. const let — Daniel
– Daniel, Commented Nov 21, 2022 at 10:56
In your example it is harmless and okay, but usually it is an indicator of bad coding practices if you need to rely on a state value you just set earlier in the same function. — biziclop
– biziclop, Commented Nov 22, 2022 at 11:39

Sachila Ranawaka · Accepted Answer · 2022-11-21 10:50:54Z

2

state is asynchronous. you need to wait till state update. use useEffect

useEffect(() => {
    console.log(state)
}, [state])

answered Nov 21, 2022 at 10:50

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sakib Hasan Over a year ago

There is no way, I can do it inside the CallMe function?

Sachila Ranawaka Over a year ago

use the second argument in setState. setState(false, () => console.log(state))

Sakib Hasan Over a year ago

not working, showing an error: Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().

Sachila Ranawaka Over a year ago

then you have to use the useEffect

Majid M. · Accepted Answer · 2022-11-21 10:52:11Z

React states are asynchronous, so in the below line of code the state has not been changed yet:

console.log(state);

You should use useEffect to see changes:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState(true); // default state true

  useEffect(() => {
    console.log(state)
  }, [state])

  const CallMe = () => {
    setState(false); 
  };

  return (
    <div className="App">
      <button onClick={CallMe}>CallMe</button>
    </div>
  );
}

Collectives™ on Stack Overflow

How to change and access reactjs state in a same function?

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related