複数回実行される処理をメモ化したい。

Question

概要

下記のコードにて、描画の際に2回ロードされてしまいます。
2回ロードされる中で、コンポーネント内の処理も2回処理してしまう為、メモ化して処理を抑えたいと考えています。

コード

export const LoginContext = React.createContext<any>([
  {login: false,username: ''} as ContextProps,
  () => {},
]);

export default function LoginContextProvider(props:any){
  const [state, setAuth] = React.useState(()=>{
    const userInfo = userPool.getCurrentUser();
    console.log('実行')
    if(userInfo){
      // @ts-ignore
      return({login: true, username: userInfo.username})
    }else{
      return({login: false, username: ''})
    }
    })

  return(
    <LoginContext.Provider value={[state, setAuth]}>
      {props.children}
    </LoginContext.Provider>
  )
}

質問

useStateの部分が2回実行されています。useMemoまたはuseCallbackを利用すべきかと思います。

1. useStateをメモする場合、どちらを使用すべきでしょうか？
2. 依存する値は、どれにすべきでしょうか。

Answer 1

Reactの関数コンポーネントの場合、useEffect/useLayoutEffectを除けば、関数の実行されるタイミング・回数は保証されません。

useStateやuseMemoなどに渡す関数、そして関数コンポーネントの中に書かれたコードについては、

• 副作用が影響するような処理は、書くこと自体が間違っています。useEffectの中に移してください。
• 処理が重い場合はuseMemoを活用しましょう（ただし、useMemoも再実行されないことを保証するものではありません。将来のバージョンではメモリ効率などで値を忘れて再計算するような動作が実装される可能性もあるとのことです）。

Answer 2

複数回、実行されることについて、StrictModeが原因だったようです。
StriceModeを除外することで1回のみ処理される様になったため、メモ化は必要ないと思い本件は解決とさせて頂きました。