Как проверить, когда переменная useState станет доступной

Question

У меня есть переменная useState, которая устанавливается на основе разрешенного Обещания, как я могу получить доступ к переменной после ее установки
в данный момент, чтобы получить правильные значения, я должен использовать функцию setTimeout, просто интересно, есть либыл лучший способ сделать это.

const FlagScreen = ({ t, i18n, history }) => {
  const [flagAvailability, setFlagAvailability] = useState([]);
  const [showFlags, setShowFlags] = useState([]);

  useEffect(() => {
    let flagsAvailable = [];
    for (let [key, value] of Object.entries(flags)) {
      if (key.indexOf(i18n.language) !== -1) {
        for (const v of value) {
          checkForAvailableAgent(`sales_${v}`, LINK_TO_STUDIO, SERVICE_ID)
            .then(res => {
              flagsAvailable[v] = res;
              // Sets the flags availability i.e de: false, en: true
              setFlagAvailability(flagsAvailable);
            })
            .catch(error => {
              console.log("an error happened.");
            });
        }
      }
    }
  }, [i18n.language]);

 useEffect(() => {
      //the value of flagAvailability is not available yet, I have to set a timeout function for 
      // 3 seconds for it to be available
      console.log("flag availability: ", Object.entries(flagAvailability));
      for (let [k, v] of Object.entries(flagAvailability)) {
        console.log("key is: ", k);
        if (v === true) {
          setShowFlags(k);
        }
      }
  }, [flagAvailability]);
}

<Container className="h-100">
  <Row className="h-45 mt-5 text-center">
    {ALL_STUDIOS_FLAGS.filter(item => {
        return showFlags.includes(item);
     }).map((item, index) => (
        <Col key={index}>
         <img
          src={require(`../assets/flags/${item}.png`)}
          alt={`${item} flag`}
         />
         <span>{item.toUpperCase()}</span>
       </Col>
    ))}
 </Row>

любая помощь будет оценена,

Answer 1

setFlagAvailability(flagsAvailable); в первом useEffect обновит только значение flagAvailability во втором рендере

второй useEffect в первом рендере получит только начальное значение flagAvailability (я знаю, что это как круг)

Каждый рендер имеет свой собственный useEffect и useState

Одним из решений является пропуск первого рендера в setShowFlags useEffect путем создания флага useRef, подобного этому

const ref = useRef(false)
const [flagAvailability, setFlagAvailability] = useState(true);
const [showFlags, setShowFlags] = useState(true);

useEffect(()=> {
  if(ref.current){
    ...
    setShowFlags();
    ref.current = false;
  }
},[flagAvailability])

useEffect(() => {
  ...
  setFlagAvailability();
  ref.current = true
},[i18n.language])

или вы можете просто изменить flagAvailability как useRef, потому что refvalue всегда будет новым значением.

const flagRef = useRef([]])
const [showFlags, setShowFlags] = useState(true);

useEffect(() => {
  flagRef.current = flagsAvailable
},[i18n.language])

useEffect(()=> {
  for (let [k, v] of Object.entries(flagRef.current)) {
    setShowFlags();
  }
},[showFlags])