App.jsx

import { Col, Container, Row } from 'reactstrap';

import './App.css';
import User from './User';

function App() {
  return (
    <Container>
      <Row>
        <Col
          sm={{ size: 6, offset: 3 }}
          xs={{ size: 12, offset: 0 }}
          className="mb-4"
        >
          <User />
        </Col>
        <Col sm={6}>
          <User />
        </Col>
        <Col sm={6}>
          <User />
        </Col>
      </Row>
    </Container>
  );
}

export default App;

useGet.js

import { useEffect, useState } from 'react';

function useGet(apiUrl) {
  const [datas, setDatas] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      fetch(apiUrl)
        .then((res) => res.json())
        .then((res) => {
          setDatas(res.results);
          setLoading(false);
        });
    }, 2000);
  }, []);

  return {
    datas,
    loading,
  };
}

export default useGet;

User.jsx

import { useEffect } from 'react';
import {
  Card,
  CardImg,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle,
  Button,
} from 'reactstrap';

import useGet from './useGet';

function User() {
  const { datas, loading } = useGet('https://api.randomuser.me');

  useEffect(() => {
    console.log(datas[0]);
  }, [datas]);

  if (loading) {
    return <p>Loading...</p>;
  }
  return (
    <Card>
      <CardImg
        top
        width="100%"
        src={datas[0].picture.large}
        alt="Card image cap"
      />
      <CardBody>
        <CardTitle>
          {datas[0].name.title} {datas[0].name.first} {datas[0].name.last}
        </CardTitle>
        <CardSubtitle>{datas[0].email}</CardSubtitle>
        <CardText>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </CardText>
        <Button>Button</Button>
      </CardBody>
    </Card>
  );
}

export default User;