javascript - Why is useEffect firing AFTER the component is mounted (NextJS)? - Stack Overflow

admin管理员组

文章数量:1022777

I'm using a useEffect as a ponentWillMount, but it is behaving unexpectedly.

In Component, (as you can see in the Codesandbox below), the code in useEffect should fire before the return content is hit, but for some reason, the useEffect is entered after the DOM has loaded.

In the below sandbox, I'm loading two images, imgsSrc1 and imgsSrc2. In my useEffect, I'm creating an image DOM element, and setting its src prop to imgsSrc1. In my return, I have an img element that has its src prop set to imgsSrc2.

I would expect imgsSrc1 to start downloading first, but when I look into the network tab of the dev console, I see that imgsSrc2 starts downloading first:

Why is this happening? Is this NextJS behavior?

I'm using a useEffect as a ponentWillMount, but it is behaving unexpectedly.

In Component, (as you can see in the Codesandbox below), the code in useEffect should fire before the return content is hit, but for some reason, the useEffect is entered after the DOM has loaded.

In the below sandbox, I'm loading two images, imgsSrc1 and imgsSrc2. In my useEffect, I'm creating an image DOM element, and setting its src prop to imgsSrc1. In my return, I have an img element that has its src prop set to imgsSrc2.

I would expect imgsSrc1 to start downloading first, but when I look into the network tab of the dev console, I see that imgsSrc2 starts downloading first:

Why is this happening? Is this NextJS behavior?

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Nov 15, 2020 at 10:08 Mike KMike K 6,5511717 gold badges7676 silver badges146146 bronze badges 1

• UNSAFE_ponentWillMount is deprecated (and useEffect was never a stand in for it as per the answer below) ...lifecycle overview here: The Component Lifecycle – pilchard Commented Nov 15, 2020 at 10:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

useEffect will always behave this way

It is firing after the ponent is mounted and then you need tell it to render again the ponent with the new data you got after it runs the code in your useEffect function

From the official website :

" By using this Hook, you tell React that your ponent needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. "

useEffect will run after the first render

" Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update. (We will later talk about how to customize this.) Instead of thinking in terms of “mounting” and “updating”, you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects."

Hopefully, it's more clear now.

If not, try looking through the documentation

https://reactjs/docs/hooks-effect.html

I'm using a useEffect as a ponentWillMount, but it is behaving unexpectedly.

In Component, (as you can see in the Codesandbox below), the code in useEffect should fire before the return content is hit, but for some reason, the useEffect is entered after the DOM has loaded.

In the below sandbox, I'm loading two images, imgsSrc1 and imgsSrc2. In my useEffect, I'm creating an image DOM element, and setting its src prop to imgsSrc1. In my return, I have an img element that has its src prop set to imgsSrc2.

I would expect imgsSrc1 to start downloading first, but when I look into the network tab of the dev console, I see that imgsSrc2 starts downloading first:

Why is this happening? Is this NextJS behavior?

I'm using a useEffect as a ponentWillMount, but it is behaving unexpectedly.

In Component, (as you can see in the Codesandbox below), the code in useEffect should fire before the return content is hit, but for some reason, the useEffect is entered after the DOM has loaded.

In the below sandbox, I'm loading two images, imgsSrc1 and imgsSrc2. In my useEffect, I'm creating an image DOM element, and setting its src prop to imgsSrc1. In my return, I have an img element that has its src prop set to imgsSrc2.

I would expect imgsSrc1 to start downloading first, but when I look into the network tab of the dev console, I see that imgsSrc2 starts downloading first:

Why is this happening? Is this NextJS behavior?

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Nov 15, 2020 at 10:08 Mike KMike K 6,5511717 gold badges7676 silver badges146146 bronze badges 1

• UNSAFE_ponentWillMount is deprecated (and useEffect was never a stand in for it as per the answer below) ...lifecycle overview here: The Component Lifecycle – pilchard Commented Nov 15, 2020 at 10:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

useEffect will always behave this way

It is firing after the ponent is mounted and then you need tell it to render again the ponent with the new data you got after it runs the code in your useEffect function

From the official website :

" By using this Hook, you tell React that your ponent needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. "

useEffect will run after the first render

" Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update. (We will later talk about how to customize this.) Instead of thinking in terms of “mounting” and “updating”, you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects."

Hopefully, it's more clear now.

If not, try looking through the documentation

https://reactjs/docs/hooks-effect.html

本文标签： javascriptWhy is useEffect firing AFTER the component is mounted (NextJS)Stack Overflow