You wrote some components in hooks, or you wrote a small application, and you were happy, comfortable with the API, and learned a few tricks in the process. You might even write custom hooks to remove repetitive logic (save 300 lines of code) and proudly show them to your colleagues

But sometimes when you use useEffect you feel something is wrong and you mutter that you might be missing something. It looks like the life cycle of class, but is it really? You will notice the following problems:

  • How to useuseEffectsimulationcomponentDidMountWhat about the life cycle?
  • How to correct inuseEffectRequest data in?[]What is it?
  • I should think of delta aseffectDepend on?
  • Why does it happen sometimesInfinite repeat requestThe problem?
  • Why is it that sometimeseffectWhat you got inThe old stateorprops?

But WHEN we started using hooks, I was also confused by those same questions. After a moment of “Aha! And I want to share that with you. This article will go into depth to help you explain the answers to the above questions.

Before we look at the answer, we need to take a step back. The purpose of this article is not to give you a list of bullet points, but to help you really understand useEffect. There is not much to learn, and in fact we will spend a lot of time trying to forget the concepts we have learned.

The fix came when we stopped snooping on useEffect hooks through the class lifecycle method

Forget what you’ve learned

This article assumes some familiarity with the useEffectApi

This article is quite long, so if you’re in a hurry or don’t care too much about the flowers on the topic, you can just read the summary below. If you don’t feel comfortable with digging into flowers, you might want to wait for the following explanations to appear in other articles. When React first came out in 2013, it took time for people to understand and digest a different mental model, and it took time for knowledge to spread

Abstract

Question: how does it workuseEffectsimulationcomponentDidMountLife cycle?

UseEffect (fn,[]) can be used, but they are not exactly equal. Unlike componentDidMount, useEffect captures props and state (useEffect has its own props and state for each rendering, either old or new). Learn more about the differences between class and FN component mental models in previous articles

So even in the callback function (fn in useEffect), you still get the initialized props and state, and if you want to get the latest value, you use ref, but there’s usually a simpler way to do it, so you don’t have to use ref

Remember that the mental model of Effect is different from componentDidMount and other life cycles, and trying to find exactly the same expression between them is even more confusing. To be effective, you need to think about Effects, whose mental model is closer to achieving state synchronization, Instead of responding to life cycle time (more on that later)

Question: How do I correctly request data in useEffect? [] What is it?

[] indicates that effect does not use any values of the React data stream, so it is safe to call effect only once.

[] Is also the source of a common problem where you think you are not using a value in a data stream but actually use it. You need to learn some strategies (mainly useReducer and useCallback).

Question: Should I treat a function as an effect dependency?

It is generally recommended that functions that do not depend on props and state be outside of your components, and functions that are only used by effect be inside effect.

Once you have done this, you still need to use functions inside the component (including functions passed in through props). You can use a layer of useCallback where you define them. Because these functions have access to props and state, they participate in the data flow. There are more detailed answers in the FAQ (you may have heard this explanation in the rain or fog, but that’s ok, I’ll explain it in the next post, you’ll see it in a moment).

Question: Why does an infinite number of repeated requests sometimes occur?

This usually happens when you make a data request in Effect without setting an Effect dependency. If no dependencies are set, effect is executed once after each render, then update the state in effect to cause the render and re-trigger effect from there.

Infinite loops can also happen because the dependencies you set are always changing. You can troubleshoot which dependency is causing the problem on a case-by-case basis, but eliminating the dependency you use, or blindly using [], is usually the wrong solution. Instead, you should address the root cause of the problem.

For example, functions can cause this problem. You can place them in effects, or outside components, or use a useCallback layer. UseMemo does something similar to avoid regenerating objects.

Question: Why do I sometimes get old props and state in effect?

Effect always gets props and state from the render that defined it. This avoids bugs, but can be annoying in some scenarios. For this scenario you can explicitly use mutable ref to store some values.

If you feel like you’re getting old props and states in a render that aren’t what you want, and you might be missing some dependencies, try using this Lint rule to train you to find those dependencies. After a few days it may become second nature to you

Due to space constraints, this paper can only give an abstract, which will be explained in the next articlereactWhy do you do that?

Next, portal