what is useEffect? official explanation: useEffect is a React Hook that allows you to synchronize components with external systems. What does mean? Personal understanding is that it can be executed at different times according to different dependent values or return values. Let's talk about the first usage first 1: trigger update in useEffect example 1: when we do something automatically in the process of component creation, we can do this in functional components error example import { useEffect } from 'react' function App () { const [ count , setCount] = useState(0) useEffect(()=> { initData() }) const initData = () => { setCount(count + 1) } return ( <div> {count} </div> ) } what problems will you find if you use useEffect like this? when our component finishes rendering to execute useEffect, call the initData function to trigger the update through the setCount setting value. Once the update useEffect is executed at the end of the rendering, it becomes endless loop . so you should write this, passing in the empty array of the second parameter useEffect, which means that the component is only executed once in the rendering process correct example import { useEffect } from 'react' function App () { const [ count , setCount] = useState(0) useEffect(()=> { initData() }, []) const initData = () => { setCount(count + 1) } return ( <div> {count} </div> ) } 2: repeated useEffect in usage 2 example 2: what will it do if you write multiple useEffect in the process of component rendering? import { useEffect, useState } from…