React hooks website keep sending infinite number of GET requests

Question

On click on more... link in Home page of react hooks website it displays the post successfully. But when I look the n/w tab, something is not looking good. I could see system send GET request continuously to contentful website. Any idea why system is sending infinite get requests ? Could someone please advise.

URL: https://cdn.contentful.com/spaces/space_id/environments/master/entries?fields.slug=api-testing-using-postman&content_type=course
Request Method: GET

client.js

import * as contentful from 'contentful'

const client = contentful.createClient({
  space: 'space_id',
  accessToken: 'my_token'
});

const getBlogPosts = () => client.getEntries().then(response => response.items);

const getSinglePost = slug =>
  client
    .getEntries({
      'fields.slug': slug,
      content_type: 'course'
    })
    .then(response => response.items)

export { getBlogPosts, getSinglePost }

useSinglePosts.js

import React, { useState, useEffect } from 'react';
import { getSinglePost } from '../client'

export default function useSinglePost(slug) {
  const promise = getSinglePost(slug);

  const [post, setPost] = useState(null)
  const [isLoading, setLoading] = useState(true)

  useEffect(() => {
    promise.then(result => {
      setPost(result[0].fields);
      setLoading(false);
    });
  }, [promise]);

  return [post, isLoading]
}

SinglePost.js

import React from "react";
import { Link, useParams } from "react-router-dom";
import MD from "react-markdown";
import { useSinglePost } from "../custom-hooks";
import Moment from 'moment';
import SyntaxHighLighter from 'react-syntax-highlighter';
import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/hljs';


export default function SinglePost() {
  const { id } = useParams();
  const [post, isLoading] = useSinglePost(id);

  const renderPost = () => {
    if (isLoading) return (<div> <p className="noSearchData">Loading...</p> </div>);

    return (
      <React.Fragment>
        <div className="wrap">
          <div className="singlePost main">
            <div className="post__intro">
              <h3 className="post__intro__title">{post.title}</h3>
              <small className="post__intro__date">{Moment(post.createdAt).format('MMM DD YYYY')}</small>
              <SyntaxHighLighter language="javascript" style={dracula}>{post.description}</SyntaxHighLighter>
              <img
                className="post__intro__img"
                src={post.image.fields.file.url}
                alt={post.title}
              />
            </div>
          </div>
        </div>
        <div className="post__body">
          <MD source={post.body} />
        </div>
      </React.Fragment>
    );
  };

  return (
    <div className="post">
      <Link className="post__back" to="/">
        {"< Back"}
      </Link>
      {renderPost()}
    </div>
  );
}

App.js

import SinglePost from './components/SinglePost';


function App() {
  return (
    <BrowserRouter>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/tutorials" component={Tutorials} />
        <Route path="/tutorialslist" component={TutorialsList} />
        <Route path="/:id" component={SinglePost} />
      </Switch>
    </BrowserRouter>
  );
};


export default App;

Answer 1

You have this code:

useEffect(() => {
  promise.then(result => {
    setPost(result[0].fields);
    setLoading(false);
  });
}, [promise]);

Everytime when promise changes, the useEffect is going to be called.

I don't think that this is intended. My assumption is, that this will create an infinite recursion.

Please try:

useEffect(() => {
  promise.then(result => {
    setPost(result[0].fields);
    setLoading(false);
  });
}, []);

Answer 2

Put your API function inside the useEffect. Every time your API is called, your promise assignment changes which trigger a re-render causing an infinite loop.

export default function useSinglePost(slug) {
  const [post, setPost] = useState(null)
  const [isLoading, setLoading] = useState(true)

  useEffect(() => {
    getSinglePost(slug)
     .then(result => {
      setPost(result[0].fields);
      setLoading(false);
    });
  }, [slug]);

  return [post, isLoading]
}