I have a big problem. I want set some of value in my cookie. but before set in cookie I should encrypt my value and set them in cookie. first my states are undefined and when I navigate to next page those set undefined and made some problems in getting cookies values. how can I check my states are full of value and after that navigate to next page? I don’t know where I should use from promise and async await.

it is my page where I setting value in cookie

export default function LoadingPage() {
  let id = useLocation();
  const navigate = useNavigate();
  const [token, setToken] = useState();
  const [refreshToken, setRefreshToken] = useState();
  const [creationDate, setCreationDate] = useState();
  const [lifeTime, setLifeTime] = useState();
  const [mobile, setMobile] = useState();
  const [nationalCode, setNationalCode] = useState();
  const [userId, setUserId] = useState();
  const [companyId, setCompanyId] = useState();
  const [name, setName] = useState();
  const navigateFun = async () => {
    let dataArray = [
      token,
      refreshToken,
      creationDate,
      lifeTime,
      mobile,
      nationalCode,
      userId,
      companyId,
      name,
    ];

    setCookieApp(dataArray);
    navigate("../dashboard");
  };

  useEffect(() => {
    navigateFun();
  }, [name != undefined]);

  useEffect(() => {
    var data = {};

      let tokenId = ....

    var config = {
      method: "post",
      url: "https://....",
      headers: {
        Authorization: `Basic ${tokenId}`,
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
        setToken(response.data.result.value);
        setRefreshToken(response.data.result.refreshToken);
        encryption(response.data.result.creationDate).then((res) =>
          setCreationDate(res)
        );
        encryption(response.data.result.lifeTime).then((res) =>
          setLifeTime(res)
        );
        encryption(response.headers.mobile).then((res) => setMobile(res));
        encryption(response.headers.nationalcode).then((res) =>
          setNationalCode(res)
        );
        encryption(response.headers.userid).then((res) => setUserId(res));
        encryption(response.headers.companyid).then((res) => setCompanyId(res));
        encryption(response.headers.name).then((res) => setName(res));
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <Loading />
    </div>
  );
}

and this is my encryption function

export const encryption = async (value) => {
  const response = await axios.post(
    "https://.....",
    JSON.stringify({
      value: value,
    }),
  ); 
  return response.data.result.value;
};

>Solution :

initialize your useState hook to null

const [name, setName] = useState(null);

Then in the first useEffect :

useEffect(() => {
  if(name){
   navigateFun();
 }
}, [name]);

so the code inside it will only run when name is updated but not in the first render when name is still null