Почему в useEffect не показываются элементы из массива?

Question

[Alexander3928]

Есть массив данных. Каждому повесил ref, чтобы потом перебрать все элементы. Но в useEffect ничего не консолится при загрузки страницы. Элементы я получаю только когда страница будет готова и я сделаю какое нибудь изменение на странице, тогда консолится. Почему так и как фиксить? StrictMode убран.

Рабочий пример, с таким же подходом

const array = [
  {
    title: "Ref Element 1"
  },
  {
    title: "Ref Element 2"
  },
  {
    title: "Ref Element 3"
  }
];

const revealRefs = useRef([]);
revealRefs.current = [];

useEffect(() => {
  revealRefs.current.forEach((element) => {
    console.log(element);
  })
}, []);

const addToRefs = (element) => {
  if (element && !revealRefs.current.includes(element)) {
    revealRefs.current.push(element);
  }
}

<section className="container">
   {array.map((element) => (
     <div className="element" ref={addToRefs}>{element.title}</div>    
    ))}  
</section>

Comments

[studentRrontend]

Странно, вроде все работает. Правда не хватает return перед ...

[Kentavr16]

в юзэффект установлен пустой массив после тела, который указывает что данный эффект сработает раз и только раз при загрузке. При загрузке в рефе пустой массив, консолить нечего. Если я правильно понимаю, передайте в юзэффект вместо пустого массива зависимость от revealRefs для обновления компонента после изменения компонента

[Alexander3928]

Kentavr16, Делал, все равно консоль пустая. Хотя в примере в useEffect ничего не добовляют и все работает.

[WbICHA]

Kentavr16, зачем? Он мутирует массив, да и и ререндер нечему триггерить, так что вдвойне не имеет значения.

Answer 1

[Natebash]

StrictMode убран.

Вам стоит более тщательно почитать про стрикт мод)

Comments

[Alexander3928]

Я его возвращал обратно, все равно это не решает проблему моего вопроса.