useContextで取得した値を変更したい

Question

useContex使ってstate管理・更新したく作成したのですが、
初回は値が変わらなく、２回クリックすると値が変更され無事に処理ができます。

初回に値が変わらない理由としていろいろ探ってみたのですが、
自分では解決できなかったため、どなたかご教授いただけますでしょうか。

context.provider

import React, { useState } from "react";

export const MainModalContext = React.createContext({
  mainModalOpen: () => {},
  mainModal: false,
});
export const subModalContext = React.createContext(false);

const ContextProvider: React.FC = (props) => {
  const [mainModal, setMainModal] = useState(false);

  const mainModalOpen = () => {
    setMainModal(true);
    console.log(mainModal);
  };

  return (
    <MainModalContext.Provider value={{ mainModalOpen, mainModal }}>
      {props.children}
    </MainModalContext.Provider>
  );
};

export default ContextProvider;

クリック後modalOpenが実行され、
useContextで取得したmainModalOpen()が実行されます。
※初回false　2回目true

const { mainModalOpen, mainModal } = useContext(MainModalContext);

const modalOpen = (id: string) => {
    console.log(mainModal);
    mainModalOpen();
    setGetPlansId(id);
  };

初回から値をtrueに変更したいのですが、
どなたかご教授いただけますと幸いです。

Comments

[maisumakun]

「初回false」というのは、setMainModal(true);直後のconsole.log(mainModal);で確認したものでしょうか？

[afro097]

ご質問ありがとうございます。
その通りでございます。

console.log(mainModal);の位置を mainModalOpen();の下に記述しても結果は変わりませんでした。

Answer 1

その通りでございます。

setStateは非同期で実行されますので、直後でconsole.logなどで値を確認しても、変わらないのが正常な動作です。

変化した値で再描画されますので、関数コンポーネントの直下にconsole.logを仕掛けるなどで確認してみましょう。

Comments

[afro097]

確認したところ直りました！
ありがとうございました！