When button is clicked first time, why Tom is getting rendered?

Question

import React, { useState, useEffect } from "react";
import axios from "axios";
const DetailsPage = props => {
  const [user, setData] = useState("Harry");
  const [isShow, setShow] = useState();
  useEffect(() => {
    console.log("Mounted");
    setShow(true);
    return () => {
      console.log("unmount");
    };
  }, [user]);

  return (
    <div>
      {" "}
      <button
        onClick={() => {
          setData("Tom");
          console.log(user);
          setShow(false);
        }}
      >
        {isShow ? <>{user}</> : <>""</>}
      </button>
      {user}
    </div>
  );
};
export default DetailsPage;

When I click on button (after component is rendered on screen), it is showing Tom as button value. Can someone explain me how this code is working?(Why Tom is appearing, why not ""(empty string))

Answer 1

Both setData and setShow are asynchronous methods. When you call setData("Tom"), user will be updated and useEffect will be triggered as you passed user as a dependency. But this useEffect triggering will be slightly delayed comparing with the setShow inside the onClick, because setData is the asynchronous methods.

So, method order is

• setData("Tom")
• setShow(false)
• useEffect.

In the last useEffect, it is calling setShow(true), that's why "Tom" is rendered.