在哪里使 API 命中 ComonentDidMount 或在 ComonentDidUpdate [React.JS]

Question

In an interview, an interviewer asked me that where should you make API-hits in a simple react application? Meaning in which life-cycle method in a Class-Component . I knew the answer to be ComponentDidMount - because it is the first life-cycle method where we get complete rendered dom meaning dom is now ready! Then he asked, but why NOT in comonentDidUpdate ?

Now, I told him what I had read somewhere, I don't know the exact answer of this -- except ComponentDidMount runs first, so make it there.

Now, can someone tell me if my answer was correct? Or should we make API-hits in ComponentDidUpdate()?

I am confused. Kindly, someone explain with reasoning? Thanks in Advance!

Answer 1

It depends on when you want to call the API:

1. If an API call is done only once then do componentDidMount
2. If after render based on some state, you want to fetch data again then do it in componentDidUpdate

EDIT: Same scenarios can be handled within functional components using useEffect hook as follows:

1- Only runs the first time when the components render same as componentDidMount :

useEffect(() => {

   // Run only once when the component renders

}, []);  // Pass empty array as dependencies

2- Run every time when component renders either by props change or by local state change same as componentDidUpdate without comparing previous and current props:

useEffect(() => {

   // Run every time the component re-renders including the first time

});  // Do NOT pass array dependencies

3- Run only when particular props change, same as componentDidUpdate but with props comparison:

useEffect(() => {

   // Run only when the component prop1 and prop2 changes

}, [prop1, prop2]);  // Pass props as array dependencies

Reference: Using the Effect Hook

Answer 2

Lets take an example scenario.

You have a profile page and it has a text box which allows you to update tags.

You do a fetch for the whole profile in the componentDidMount to get all the details and show the content.

And then componentDidUpdate will have to be used for something like the update on tags, lets say you do a fetch to get tags based on the user input for every 3 letters the user type. then you use componenDidUpdate to check the state and do the call.

If you think of the same in functional components we'll have to use useEffect.

useEffect(()=>{},[]);

See the array of dependecies, if you pass an empty array it would act similar to componentDidMount.

And the componentDidUpdate

useEffect(()=>{},[tagText]);

Here the effect will run only when a change it done to the tagText, but the componenDidUpdate would be different as you will have to compare the previous state and decide whether the text is updated.

Answer 3

According the Official React Documentation(Link) :

componentDidMount

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

This method is a good place to set up any subscriptions. If you do that, don't forget to unsubscribe in componentWillUnmount().

componentDidUpdate()

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (eg a network request may not be necessary if the props have not changed).

Check out this link for a complete big picture. This will be handy while learning react.