ThemeProvider 的 useMemo 與 useEffect

Question

我創建了 ThemeProvider 組件，它從 json 中檢索設計令牌，作為tokens道具傳入，然后將這些令牌插入到父 div 的樣式屬性中。 ThemeProvider 包裝了子組件，以便孩子可以使用那些 styles。由於消費者不會經常更新令牌，我只需要在初始渲染中運行一次 retrieveToken function。 我的問題是我應該使用具有空依賴項的 useEffect 還是應該使用 useMemo 來緩存 retrieveToken function 的結果？ 我的猜測是具有空依賴項的 useEffect 就足夠了，因為 token prop 根本不會更新，只需要在初始運行時使用。

const [tokenObj, setTokenObj] = useState({});
const {tokens} = props;

function retrieveToken(tokens){
// expensive operation, but only needed to run once in initial render
}

//which way is better?

// Option1 - react useMemo
const tokenObj2 = React.useMemo(() => {
    return retrieveToken(tokens);
},[tokens]);

//Option2 - react useEffect
React.useEffect(() => {
    setTokenObj(retrieveToken(tokens))
},[])

return (
    <div style={tokenObj}> {children} </div>
)

Answer 1

useMemo是正確的使用方式，旨在減少運行昂貴的同步操作的頻率。

出於以下幾個原因，不應使用useEffect ：

• 它主要用於將異步邏輯作為模式處理
• 在服務器端渲染期間不執行
• 它在 DOM 渲染后運行（用戶會短暫地看到錯誤的樣式）