React

by Bligoubloups

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Babel + JSX

const App = () => {
  const [fetchState1, setFetchState1] = React.useState(null);
  const [fetchState2, setFetchState2] = React.useState(null);
  const [axiosState1, setAxiosState1] = React.useState(null);
  const [axiosState2, setAxiosState2] = React.useState(null);

  React.useEffect(() => {
    setFetchState1(fetch('https://jsonplaceholder.typicode.com/todos/1'));
    setFetchState2(fetch('https://jsonplaceholder.typicode.com/todos/2'));
    setAxiosState1(axios.get('https://jsonplaceholder.typicode.com/todos/3'));
    setAxiosState2(axios.get('https://jsonplaceholder.typicode.com/todos/4'));
  }, []);

  return (
    <div className="App">
      <FetchLoader fetch={[fetchState1, fetchState2]} type="json">
        {
          ({ loading, err, res }) => {
            if (loading) return <Loader />
            if (err) {
              console.error(err);
              return;
            }
            return <MainPage res={res} />;
          }
        }
      </FetchLoader>
      <FetchLoader fetch={[axiosState1, axiosState2]}>
        {
          ({ loading, err, res }) => {
            if (loading) return <Loader />
            if (err) {
              console.error(err);
              return;
            }
            return <MainPage res={res} />;
          }
        }
      </FetchLoader>
    </div>
  );
}

const Loader = () => {
    return (
        <div>LOADING</div>
    )
}

const MainPage = (props) => {
    const [title1, setTitle1] = React.useState(null);
    const [title2, setTitle2] = React.useState(null);
    const isMounted = React.useRef(false);

    React.useEffect(() => {
        if (props.res[0].data) {
            setTitle1(props.res[0].data.title);
            setTitle2(props.res[1].data.title);
        } else {
            setTitle1(props.res[0].title);
            setTitle2(props.res[1].title);
        }
    }, [props.res]);

    React.useEffect(() => {
        isMounted.current = true;
    }, []);

    return (
        <React.Fragment>
    ...