The background,

After 5 months of hookscontact, I have been able to deal with most of the problems in my work from having no foundation and imitating the old code step by step. During this encounter many problems, although in this or that kind of means to satisfy the demand, but always can’t understand the principle behind these means, therefore also find many tutorials, because these tutorials are focused on how to use, for the mind behind the model to do more reading, until I had read Dan the useEffect complete guide, “Oh 😯, that’s how it feels.

Next, I will elaborate my understanding from the five classic problems of useEffect and two dimensions of my practice.

Second,useEffectFive classic questions

1. How to use 🤔useEffectsimulationcomponentDidMountLife cycle?

UseEffect (()=>{fetchData()}),[]) is a useful method, but this problem is a trap. Function components and a class of mental model is different, don’t confuse them, in my opinion, is the biggest difference between them when the state changes, the function component of cycle, from the seeds grow flowers, form seeds from flower, the flower of different years look the same, but after all is not the same one, and the class components is equivalent to a flower, From bright flowers to dry bouquets, different shapes, but always the same flower.

2. How to 🤔 correctlyuseEffectRequest data in?[]What is it?

Every useEffect is different. As the state changes, one effect is born and one effect dies. How to ensure that the birth effect is the one we want, this needs to use the dependency array to inject genetic factors. Of course this is the safest way, but if you want to be more elegant, look at the references and the practice summary below.

3. 🤔 I should regard the function aseffectDepend on?

You can use a function as a dependency on effect. See the practice summary below for more on best practices for functions.

4. 🤔 Why do endless repeated requests sometimes occur?

There are two cases, one is if there is no dependency array, then each render will trigger this side effect, for example

useEffect(()=>{
    fetchData()
})
Copy the code

Another way is to set a dependency array, but the variables in the dependency array keep changing, for example

const [data,setData] = useState()

useEffect(()=>{
    const fetchData = async() => {
        const res = await fetchNewData()
        setData(res.data)
    }
    fetchData()
},[data])
Copy the code

5. Why is 🤔 sometimes ineffectI got the old onestateorprop?

Effect should always fetch the latest state or prop. If an old state or prop is present, it must be because the dependencies in the dependency array are incomplete and did not trigger effect updates.

Three,useEffectSummary of best Practices

1.classThe difference between a component and a function component

  • Every function, every functionuseEffectIn thepropsandstateThey’re all independent. notstateIn the sameeffectBut every one of themeffectThere are constants instate
  • The state of the function component will stay in a certain state, and the changed state is not the same as the former state, so different states at different times;classIn a component, state always points tothis.stateDifferent times but same state
  • useEffectIs not the same ascomponentDidmount + componentDieUpdate, function into how the child components, only when you need to trigger the request, is that the best way to distinguish between, functional components to function is a property of a class, is never change, he always can only request a data, if passed in its dependence on parameter, depend on the parameters of default is always change, so will have to request data. If you usehooksPass, with the appropriate dependencies set, and the data will only be re-requested when the dependency changes
  • useEffectRender first, execute laterpreStateandcurStateThe side effects of

2. How to define functions and requests

  • Some functions are only ineffectIf used in theeffectIn the definition
  • Some functions are used in more than one place, so it is best to define them independentlyuseCallBackPackage, and write all the dependencies in the dependency array
  • useEffectThe callback function is not availableasyncModifier, but you can rewrite one inside the callback functionasyncFunction, and then call 
    UseEffect (()=>{const res = await fetchNewData(id) setData(res.data)},[id]) useEffect(()=>{const fetchData = async() => { const res = await fetchNewData(id) setData(res.data) } fetchData() },[id])Copy the code

Iv. References

  1. UseEffect complete guide
  2. How do I retrieve data from React Hooks