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 'react';
function Effect() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('111');
})
useEffect(() => {
console.log('222');
})
return (<div> {count} </div>)
}
export default Effect
of course, it will not overwrite the previous useEffect, it will be collected according to your writing order, and then executed in a loop (
of course this is just my guess, I haven't seen the react source code yet)
3: dependent value triggers callback
trigger the callback function when you want to rely on certain variables, you can do this.
import { useEffect, useState } from 'react';
function Effect() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('The count has changed. The latest value is + count);
}, [count])
return (<div>
<div>
{count}
</div>
<button onClick={() => setCount(count + 1)}>Add 1</button>
</div>)
}
export default Effect
when your second parameter is an array and is a dependency, the component will render for the first time. Why?
answer : in terms of react useState Hook, that is, react reassigns the default value you passed in to you, so it changes, so useEffect is updated
4: the returned value of useEffect
what does useEffect do when the callback function passed in has a return value and is a function?
import { useEffect, useState } from 'react';
const Room = () => {
useEffect(() => {
console.log("subcomponent rendering complete")
return () => {
console.log("subcomponent useeffect callback function execution")
}
}, [])
return (<div>
This is my room. Let's play together.
</div>)
}
function Effect() {
const [show, setShow] = useState(true)
return (<div>
<div>
{show && <Room></Room>}
</div>
<button onClick={() => setShow(!show)}>Add 1</button>
</div>)
}
export default Effect
answer: if the return value of the useEffect function is a function, it will automatically call back the function when the component is destroyed. You can do some cleaning operations in the function, and so on
it's over
well, finally, this is the end of the knowledge learned in this chapter. If there is anything wrong or there is a better way to use it, you are welcome to leave a message in the comments area. I will reply to you as soon as possible.
Comments