ThemeProvider 的 useMemo 与 useEffect

Question

I created ThemeProvider component where it retrieves the design tokens from json which is passed in as tokens prop, then it inserts those tokens into style attribute of parent div. And ThemeProvider wraps the children component so children can use those styles. Since consumers won't be updating tokens often, I just need to run the retrieveToken function once in the initial render. My question is should I use useEffect with empty dependency or should I be using useMemo to cache the result of retrieveToken function? My guess is useEffect with empty dependency is enough since token prop won't be updated at all, only needed for initial run.

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 is the right one to use and is purpose made for running expensive synchronous operations less often.

useEffect should not be used for a few reasons:

• It is primarily there for handling async logic as a pattern
• It is not executed during Server-Side Rendering
• It runs after the DOM is rendered (users will briefly see the wrong styles)