Requirements

• Code Editor
• React.js

Introduction

Let's then code a Loading in a hypothetical authentication scenario, so when the component loads the Loading function gets called.

Code

Let's say we have this scenario:

const [isAuthenticated, setIsAuthenticated] = useState();

const handleAuth = async () => {
  const res = await authenticate();
  setIsAuthenticated(res.data.auth);
};

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

While the is working we have to make a way to output that into the

Start with creating a state:

const [isAuthenticated, setIsAuthenticated] = useState();
const [loading, setLoading] = useState();

const handleAuth = async () => {
  setLoading(true); // start loading

  const res = await authenticate();
  setIsAuthenticated(res.data.auth);

  setLoading(false); // ends loading
};

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

Now we put the loading state to use:

const [isAuthenticated, setIsAuthenticated] = useState();
const [loading, setLoading] = useState(true);

const handleAuth = async () => {
  setLoading(true); // start loading

  const res = await authenticate();
  setIsAuthenticated(res.data.auth);

  setLoading(false); // ends loading
};

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

return <div>{loading ? <h1>Loading...</h1> : <h1>Loaded</h1>}</div>;

Additional Resources

• React Hooks Documentation