筆記 React.js 中 useMemo Hook
前言 暑假回去公司實習時把 React 文件拿出來重新複習一次，順便在一些可以優化的地方使用 useMemo, useCallback，順手做個紀錄。 被計算出來的狀態使用 useMemo 範例：計算按鈕何時應啟用 disabled 樣式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // Before: 自己寫 useEffect 去監聽依賴，在依賴變動時重新賦值 const [input, setInput] = useState('') const [isInputError, setIsInputError] = useState(false) const [isBtnDisabled, setIsBtnDisabled] = useState(true) useEffect(() => { setIsBtnDisabled(input === '' || isInputError) }, [input, isInputError]) // ------------------------------------------------------ // After: 使用 useMemo const [input, setInput] = useState('') const [isInputError, setIsInputError] = useState(false) const isBtnDisabled = useMemo(() => { return (input === '' || isInputError) }, [input, isInputError]) useMemo 也可以 memorize 一個 functional component...