1.useEffect

'useEffect' is a hook that allows you to perform side effect in functional component.


2.Default use of useEffect

import logo from './logo.svg';
import './App.css';
import { useState, useEffect } from 'react';

function App() {
const [count, setCount] = useState(1)
const [name, setName] = useState('')

const handleCountUpdate = () => {
setCount(count+1)
}

const handleInputChange = (e) => {
setName(e.target.value)
}

//called whenever rendering
useEffect(() => {
console.log("called useEffect")
})

return (
<div>
<button onClick={handleCountUpdate}>Update</button>
<span>count: {count}</span>
<input type="text" value = {name} onChange={handleInputChange}/>
<span>name: {name}</span>
</div>
);
}

export default App;

On this code, useEffect's callback is called whenever rendering this component.


3.Dependency Array

import logo from './logo.svg';
import './App.css';
import { useState, useEffect } from 'react';

function App() {
const [count, setCount] = useState(1)
const [name, setName] = useState('')

const handleCountUpdate = () => {
setCount(count+1)
}

const handleInputChange = (e) => {
setName(e.target.value)
}

//called whenever rendering
useEffect(() => {
console.log("useEffect called")
})

//called after first rendering or name is changed
useEffect(() => {
console.log("name is changed")
}, [name])

//called after first rendering or count is changed
useEffect(() => {
console.log('count is changed')
}, [count])

return (
<div>
<button onClick={handleCountUpdate}>Update</button>
<span>count: {count}</span>
<input type="text" value = {name} onChange={handleInputChange}/>
<span>name: {name}</span>
</div>
);
}

export default App;

Like a comment, we can set constraint for useEffect using dependency array.

If you set empty array on dependency array, useEffect is called only after first rendering.


4. Clean up

App.js

import logo from './logo.svg';
import './App.css';
import { useState, useEffect } from 'react';
import Timer from './component/Timer';

function App() {
const [showTimer, setShowTimer] = useState(false)

return (
<div>
{showTimer ? <Timer/> : <></>}
<button onClick={() => setShowTimer(!showTimer)}>Timer</button>
</div>
);
}

export default App;


Timer.js

import React, {useEffect} from "react";

const Timer = (props) => {
useEffect (() => {
const timer = setInterval(() => {
console.log("start tiemr...")
}, 1000)

return () => {
// clean up
clearInterval(timer)
console.log('timer is completed')
}
}, []);

return(
<div>
<span>타이머를 시작합니다. 콘솔을 보세요!</span>
</div>
)
}

export default Timer;

When you return callback in useEffect, you can perform clean up code.

On this example code, Timer is completed when Timer component disappears.