What is useState() in React?


1. Sample Code

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

function App() {
const heavyWork = () => {
console.log("heavyWork!!!")
return ['홍길동', '김민수']
}
const [names, setNames] = useState(() => {
return heavyWork()
})
const [input, setInput] = useState('')


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

const handleUpload = (e) => {
setNames((prevState) => {
return [input, ...prevState]
})
}

return (
<div>
<input type="text" value={input} onChange={handleInputChange}></input>
<button onClick={handleUpload}>Upload</button>
{names.map((name, idx) => {
return <p key={idx}>{name}</p>
})}
</div>
);
}

export default App;

1) Using prevState

When you handle state, you can deal with prevState using callback that useState provides basically.


2) Heavy work

When you initialize state first, you need to do heavy work like requesting api.

In this case, you can use callback.