React: useState
#React_Hook #React
コンポーネントに状態を保持するためのReact Hook
https://react.dev/reference/react/useState
基本的な使い方
useState 関数の返り値はタプル（配列）になっており、0番目が状態を表す変数・1番目が状態をセットするための"set関数"
code:jsx
const visible, setVisible = useState(true);
const show = useCallback(() => {
setVisible(true);
}, []);
const hide = useCallback(() => {
setVisible(false);
}, []);
return <>
{visible && <div>haha</div>}
<button onClick={show}>Show</button>
<button onClick={hide}>Hide</button>
</>;
Updater Function
set関数には関数を渡すことができ、現在の状態を外から参照することなく状態を更新することが可能
React: useCallbackを使うことで、Rerenderを抑制しつつ、自身の状態を参照して値を更新できる
code:js
const visible, setVisible = useState(true);
const toggleVisible = useCallback(() => {
setVisible((visible) => !visible);
}, []);
code:js
const count, setCount = useState(0);
const toggleVisible = useCallback(() => {
setCount((count) => count + 1);
}, []);