【りあクト！2】React Hooks

2021年 06月 10日

タグ：

JavaScript

TypeScript

React

useState

useStateはstateを更新するHooks API

const [count,setCount] = useState(0);
const increment = () => setCount((c)=>c+1);
const decrement = () => setCount((c)=>c-1);

Hooksの呼び出しはその関数コンポーネントの論理階層のトップレベルである必要があるので、条件文や繰り返し処理の中で呼び出すのは不可

const Count: FC<{ max: number }> = ({ max }) => {
    const [count, setCount] = useState(0);

    if(count => max){
        // if文の中でuseState()は使わない！
        const [isExceeded, setIsExceeded] = useState(true);
        doSomething(...)
    }
}

useEffect

useCallback

useRef

Custom Hook

useTimeout

const useTimeout = (callback, delay)=>{
    
}