Please, See this -

** the second click, third, fourth, fifth click - menuOpen is true, then again click false - behaves as expected**

let [menuOpen, setMenuOpen] = useState(false);

<div
    onClick={() => {
    // setMenuOpen(true);

    setMenuOpen(!menuOpen); // I's not updated in the First time.

    console.log(menuOpen); // First time: false // not updating
>
 .......// some code
</div>

Please give me, some answers. I have been trying to solve this problem for Two days. I just can't solve it.

Please, See this - https://codesandbox.io/s/morning-grass-z8qrq

https://codesandbox.io/s/blue-flower-wl92u

** the second click, third, fourth, fifth click - menuOpen is true, then again click false - behaves as expected**

let [menuOpen, setMenuOpen] = useState(false);

<div
    onClick={() => {
    // setMenuOpen(true);

    setMenuOpen(!menuOpen); // I's not updated in the First time.

    console.log(menuOpen); // First time: false // not updating
>
 .......// some code
</div>

Please give me, some answers. I have been trying to solve this problem for Two days. I just can't solve it.

• javascript
• reactjs
• react-hooks
• use-state

Share Improve this question Follow edited Jun 28, 2020 at 14:53 Fahmida Mashura asked Jun 28, 2020 at 11:24 Fahmida MashuraFahmida Mashura 5911 silver badge99 bronze badges 2

• You are logging a stale closure – HMR Commented Jun 28, 2020 at 11:29
• its working fine: occasionalcrisplegacy--five-nine.repl.co – Marik Ishtar Commented Jun 28, 2020 at 11:35

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Try this:

export default function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <>
      <button onClick={() => setMenuOpen(!menuOpen)}>Click</button>
      Is menu Open: { menuOpen ? "True": "False"}
    </>
  );
}

Example demo can be found here.

useState create queues for React core to update the state object of a React ponent. So the process to update React state is asynchronous for performance reasons. That's why changes don't feel immediate.

Give this a try

setMenuOpen(prevMenuOpenState => !prevMenuOpenState);

or

<div
    onClick={() => setMenuOpen(!menuOpen)}
>

I had even this problem in my code. My scenario is as follows: Its hotel detail page. There is horizontal tab menu of room types. If a hotel has more than 3 types of room, then there is show room button. I am using React Functional ponents in through the code. hotel detail basic page and room section page are different ponents created. values are passed to room section ponents through props.

My problem: When I click to room type further 3rd type, then show room value in function (setSelectedTab()) room ponent doesn't set at an instant. And hence as function moves further, it doesn't set document.getElementById(id) since show room had not been set. As function (setSelectedTab()) pletes in first click it sets the show room to true, but selected tab doesn't set. I had to click 2nd time to set the tab.

solution: After a long try and error, I settle down to the following: I declare the function as async and made await the setshowRoom() value. This solved my plete problem.

async function setSelectedTab(e, data) {
firstScroll += 1;

data >= 2 && await setMenuOpen(true);
if (data >= 0) {
  .................
  const id = e.href;
  const anchor = document.getElementById(id);
  ..............
..............
}
}

and in room ponent: showRoom, setshowRoom in useState and calling the setSelectedTab() using props. This solves problem of single click

Drawback: I found delay of 1 second to set this tab.

If anyone have better solution than this without making async await, then please post here. Thanks.

The Answer is just refactoring the code into class Component without using hooks useState. Using state and setState to update. The Problem will solve.

But If I use useState hooks the problem remains the same Whatever I do with the code.