Infinite console logging in React.js component

Question

I'm working on my MERN app, and when I'm logging smth in NewsPage component, it logs infinitely.

NewsPage component:

const NewsPage = ({news, fetchNews}) => {
  const postNews = (title, body) => {
    axios.post("http://localhost:9000/news", { title, body });
  }

  useEffect(() => {
    fetchNews();

  }, [fetchNews, postNews])

  return (
    <>
      <AddNewsForm postNews={postNews}/>
      <h1>News:</h1>
      <NewsItemPage news={news} />
    </>
  );
};

const mapStateToProps = state => ({
  news: state.news
})

export default connect(mapStateToProps, {fetchNews})(NewsPage);

Fetch news action:

export const fetchNews = () => dispatch => {
  fetchRequest();

  try {
    const fetch = async () => {
      const res = await axios.get("http://localhost:9000/news");

      dispatch({
        type: a.FETCH_NEWS_SUCCESS,
        payload: res.data
      });
    }
    fetch()
  } catch (e) {
    dispatch({
      type: a.FETCH_NEWS_FAILURE,
      error: e
    });
  }
}

It works correctly, I can fetch news from and post news to my backend, but if I log anything in console, it would be logging infinitely, and I will not get any error.

is there a way to fix this, and is this a real problem?

score 0 · Answer 1 · answered Jul 23 '19 at 19:52

0

Its likely because whatever function the console log is located in is being used in render, which itself is a loop. Otherwise, there is no other way that I can see why it would repeat. It probably won't end up being a problem, unless the code you are executing slows down, which might cause performance issues in the future.

answered Jul 23 '19 at 19:52

Nicholas Domenichini

790
1
6
11

`render` is not loop :) – Klimenko Kirill Jul 23 '19 at 19:53
@Klimenkomud it is a loop that waits for state or prop changes before executing the loop body. If it wasn't a loop, it wouldn't be able to detect these changes and make updates – Nicholas Domenichini Jul 23 '19 at 19:54
May you add some proofs links? As I know, it works a bit other way – Klimenko Kirill Jul 23 '19 at 20:01
Roughly, react "reconciler" watching for changes in "Tree", and then call `render` again. So `render` itself doesn't watch for any changes, it works only with real DOM, not with the virtual one – Klimenko Kirill Jul 23 '19 at 20:09

score 0 · Answer 2 · answered Jul 23 '19 at 19:57

You're tracking fetchNews and postNews in your useEffect array, which will re-rerun fetchNews(); on every render.

Unless the values in the useEffect second argument are primitives, you need to use some deep compare methods for those: https://stackoverflow.com/a/54096391/4468021

score 0 · Answer 3 · answered Jul 23 '19 at 20:01

Actually, you have wrong useEffect usage.

Effect would be called each time when component receive new props, so, it looks like this:

1) Component mounts, call function from useEffect
2) It makes API call, update data in store
3) Data passed to container, updates "dumb" component
4) Dumb component makes re-rendering, calling func from useEffect, and that's infinity loop.

In fact, It is pretty weird that you don't have memory leak.
What you can do, is:

1) Add some conditional rendering. I pretty sure, you need to call it only on initial load.
2) Add something like ImmutableJS, it would not re-render component and would not mutate store if nothing has changed

Infinite console logging in React.js component

3 Answers3

Linked