DEV Community

Hyunjin Cho
Hyunjin Cho

Posted on

Aug 03rd, 2022

reacthook helps function component to use lifecycle and state.

useEffect and useCallback are two examples of reacthook.

**

useEffect

**

useEffect must be practiced after a page rendering.
useEffect must be practiced after the linked state is updated.

There are some ways to use this useEffect

useEffect(() => {})

useEffect(() => {}, [])

const [name, setName] = useState('hyun')
useEffect(()=>, [name])

The first one is the most basic.
but because there is no dependency (the second parameter in other ways), this useEffect will be practiced any time.

The second one is practiced only once after the page rendering.

The third one is practiced after the page rendering and when the state, that is, dependency(name) is updated.

clean-up

useEffect(() =>{
console.log('mount')
return () => {
console.log('unmount')}
}, [])

return ~ ('unmount')} returns function for clean-up

when mounting,
sending props to local state, request API, using library, setInterval, setTimeout....

when unmounting,
clearing the registered work(clearInterval, clearTimeout)...

Top comments (0)