Conditional statement not working in useEffect

Question

It seems that the conditional statement does not apply properly within useEffect. 'UserPortInfo' is 1, but why 'templateCss' is applied as 'first-theme'? And why does the console work several times?

  // portfolio info get
  const [userPortInfo, setUserPortInfo] = useState('');

  const getPortInfo = () => {
    axios
      .get(`http://localhost:3001/portfolios`, {
        headers: {
          Authorization: `Bearer ${getToken}`,
        },
      })
      .then((res) => {
        const datas = res.data.data;
        datas.forEach((e) => {
          if (e.portfolio_idx === Number(portfolio_idx)) {
            setUserPortInfo(e.template);
          }
        });
      })
      .catch((err) => console.log(err));
  };

const [templateCss, setTemplateCss] = useState('');

  useEffect(() => {
    getUserInfo();
    getPortfolio();
    getPortInfo();
    userPortInfo == 1
      ? setTemplateCss('second-theme')
      : setTemplateCss('first-theme');
  }, []);

  console.log(userPortInfo);
  console.log(templateCss);

user_8997916 · Answer

The problem is that you read userPortInfo exactly once and before your async call completes.

  useEffect(() => {
    getUserInfo();
    getPortfolio();
    getPortInfo();
    userPortInfo == 1
      ? setTemplateCss('second-theme')
      : setTemplateCss('first-theme');
  }, []); <---- empty array means it is only run once

Maybe instead move it to another effect?

  useEffect(() => {
    getUserInfo();
    getPortfolio();
    getPortInfo();
  }, [])

useEffect(() => {
  userPortInfo == 1
      ? setTemplateCss('second-theme')
      : setTemplateCss('first-theme');
  }, []);
}, [userPortInfo] )

This means that when userPortInfo changes your css is updated

Conditional statement not working in useEffect

1 Answers