概要

useContextを使いオブジェクトを保存し、子コンポーネントで使用したいのです。

抱えている問題

useContext内のオブジェクトが上書き出来ない。
その過程でuseEffectが連打されてしまう。

該当コード

**コンテキストデータ **

import React from 'react';

interface ContextProps {
 login: boolean;
 setLogin: (login:boolean) => void;
 username: string;
 setUsername: (username:string) => void;
}
export const LoginContext = React.createContext({
 login: false,
 setLogin: login => {},
 username: '',
 setUsername: username => {}
} as ContextProps);

Provider側

import React from 'react';
import { LoginContext } from './env/loginContext'
import { Auth } from 'aws-amplify';

const App = () => {
  const setLogin = (login:boolean) =>{
    setState({...state, login});
    console.log(state)
  }
  const setUsername = (username:string) =>{
    setState({...state, username})
  }
  const initState = {
    login: false,
    username: '',
    setLogin:setLogin,
    setUsername: setUsername
  };
  const [state, setState] = React.useState(initState);

  React.useEffect(() => {
    async function getCurrentAuthenticatedUser() {
      const userInfo = await Auth.currentUserInfo();
      if(userInfo){
        if(state.login !== true) {
          state.setLogin(true)
          state.setUsername(userInfo.username)
        }
      }
      // }else{
      //   if(state.login !== false){
      //     state.setLogin(false)
      //     state.setUsername('')
      //   } 
      // }
    }
    getCurrentAuthenticatedUser();
  }, [state]);


  return (
    <LoginContext.Provider value={state}>
<p>aaa</p>
    </LoginContext.Provider>
    )
};

export default App