useState not working inside a custom react hook

Question

I am Trying to separate some part of my business logic from view logic for this I am employing the use of custom react hooks which works like a controller.

My Component Structure

1. Parent that contains toggle to switch between child 1 and child 2
2. useCustomHook custom react hook that makes an api call and uses a state to add a loader
3. child2 contains content to be shown which was retrieved from api call and state variable to show loader calls useCustomHook
4. parent also calls useCustomHook which makes the api call on mount.

Why can't I see loading on the page inside child 2 no matter how long it takes

I believe useState is setting flag to its default false when custom hook is called again on child 2

What way do i have to make use of useState hook in a custom react hook which is called from more than one place and not have the state reverted back to default value

flag is never true if you open child2

Here is the codesandbox link code

Here is the code

App.js acts as parent

import "./styles.css";
import Child1 from "./Child1";
import Child2 from "./Child2";
import { useEffect, useState } from "react";
import useCustomHook from "./customHook";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles((theme) => {
  return {
    parent: {
      padding: "10px"
    },
    toggle: {
      margin: "10px",
      border: "1px solid black",
      display: "flex",
      justifyContent: "space-around"
    },
    child: {
      border: "1px solid black",
      width: "50%"
    }
  };
});

export default function App() {
  const [isChild1, setIsChild1] = useState(true);
  const classes = useStyles();
  const { flag, func } = useCustomHook();

  useEffect(() => {
    func();
  }, []);

  return (
    <div className="App">
      <div className={classes.parent}>Parent</div>
      <div className={classes.toggle}>
        <div
          onClick={() => {
            setIsChild1(true);
          }}
          className={classes.child}
        >
          ch1
        </div>
        <div
          onClick={() => {
            setIsChild1(false);
          }}
          className={classes.child}
        >
          ch2
        </div>
      </div>
      {isChild1 ? <Child1 /> : <Child2 />}
    </div>
  );
}

Child1.js

const Child1 = () => {
  return <div>Child1</div>;
};

export default Child1;

Child2.js

import useCustomHook from "./customHook";

const Child2 = () => {
  const { flag } = useCustomHook();

  console.log('flag ',flag);
  return (
    <div>
      <div>Child2</div>
      <div>{flag ? "loading..." : "content"}</div>
    </div>
  );
};

export default Child2;

CustomHook.js

import { useState } from "react";

const useCustomHook = () => {
  const [flag, setFlag] = useState(false);

  const sleep = async (ms) => {
    console.log("waiting");
    await new Promise((res, rej) => {
      setTimeout(() => {
        console.log("wait over");
      }, ms);
    });
  };
  const func = async () => {
    setFlag(true);

    //do some work like api call
    await sleep(10000);

    setFlag(false);
  };

  return { flag, func };
};

export default useCustomHook;

Answer 1

If you call useCustomHook from App and Child2, you get two different objects!

• Either call useCustomHook and func from Child2,
• Or pass down flag from App to Child2 (using props or context)

Btw. in the sleep function you forgot to resolve the promise.

  const sleep = async (ms) => {
    console.log("waiting");
    await new Promise((res, rej) => {
      setTimeout(() => {
        console.log("wait over");
        res(); // important!
      }, ms);
    });
  };