React.js组件中的无限控制台日志记录

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?

Answer 1

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.

Answer 2

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

Answer 3

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