React - How to prevent re-fetching data when component re-renders?

Question

It was an interview question (saw it somewhere online) and have researched but could not really find answers.

How can I prevent re fetching data when component re renders? I dont mean limiting it to being fetched only once (that I could do by making the request inside the constructor function).

Also, the only thing I found was a quick mentioning of using an external (to the react app) api. I do not understand what that means and how this can prevent data from being refetched.

Thanks a lot!

It's really hard to guess. Post some code reproducing exactly what your problem is — Dupocas
– Dupocas, Commented Nov 5, 2019 at 13:55
was that everything that was in your question? no more information? — Gibor
– Gibor, Commented Nov 5, 2019 at 13:58

Peter Lehnhardt · Accepted Answer · 2019-11-05 14:19:47Z

3

Say you want to execute your function fetchData only when the component mounts (created and inserted into the DOM for the first time), but not when it re-renders. Then you can use:

In class components:

componentDidMount() {
  fetchData();
}

In function components with hooks:

useEffect(fetchData, []);

The second argument will watch for changes to the state passed into the array. Passing an empty array will simulate a componentDidMount

edited Nov 5, 2019 at 14:19

answered Nov 5, 2019 at 13:59

Peter Lehnhardt

5,0431 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

javascripting Over a year ago

Yes, but componentDidMount is called after each render, so the data would be refetched each time the component rerenders

Dan O Over a year ago

that is not true.

Ian Vasco Over a year ago

@javascripting Where did you get that componentDidMount will be called after each render? It will be fired just once when the screen first mount. This is usually the place where all fetch calls are called.

Peter Lehnhardt Over a year ago

@javascripting I guess you confuse it with componentDidUpdate

Nicky Prabowo Over a year ago

I guess there are many things that cause rerender, such as componentDidUpdate, parent component update (props update), or if you use hooks there are dependencies in square bracket

Collectives™ on Stack Overflow

React - How to prevent re-fetching data when component re-renders?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related