CODEWITHSUNDEEP
reactjsreact-nativereact-hooksuse-effectuse-state
KUNAL TIWARI
KUNAL TIWARI

Reputation: 52

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

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))

Upvotes: 1

Views: 55

Answers (2)

Rajitha Udayanga
Rajitha Udayanga

Reputation: 1732

When you click the button, then set the user as Tom and set the show to false. when changing your user data useEffect function will call. then inside your useEffect, set show to true again and render value.

Upvotes: 0

wangdev87
wangdev87

Reputation: 8751

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.

Upvotes: 1

Related Questions