мне еще поможет если я при нажатии на кнопку буду не просто обновлять состояние компонента и делать его пересоздание (как при перезагрузке страницы, кстати если перезагружать страницу все как надо работает) но я как понял это не правильно в react так делать

Ну, если я все правильно понял, нужно сделать еще одно свойство: isAnimationComplete и на него подвязаться (первым блоком):

if (this.state.isAnimationComplete) {
  return null
}

А на <AnimatedImage ... /> добавить коллбэк `onAnimationEnd`👍

<AnimatedImage onAnimationEnd={() => this.setState({ isAnimationComplete: true })} />

Соответственно, когда картинка закончит анимацию, будет вызван этот коллбэк, который переведет компонент в пустое состояние.

Т.е. на его месте в DOM-е не будет ничего.

Но вот логику с миганием картинки, да еще и с бэкэнда я не уловил.

Как это сейчас реализовано?

можно тебе в лс написать что бы не засорять ?

В группе норм. Она для того и есть.

ок

может это реализовано, как подгрузка изображений?

пишу

всм?

при нажатии на кнопку идет запрос через axios на бэк, оттуда возвращается json, примерно такого вида:

imgs : {
  row_0: {
      img1: image1.jpg,
      img2: image2.jpg,
      img3: image3.jpg,
      img4: image4.jpg
  }
 row_1: {
      img1: image1.jpg,
      img2: image2.jpg,
      img3: image3.jpg,
      img4: image4.jpg
  }
}
animate: {
 row_1: {
      img1: image1.jpg,
      img2: image2.jpg,
      img3: image3.jpg,
      img4: image4.jpg
  }

}
и тут я понимаю что мне нужно выстроить из картинок красивую плитку, разместить в первом поле картинки в порядке row_0 (img1: image1.jpg,
      img2: image2.jpg,
      img3: image3.jpg,
      img4: image4.jpg)

ну и в остальных по аналогии, в итоге получится плитка из картинок

потом я паршу то что в animate, и проверяю, если у меня row_1_img1_image1.jpg присутствует в плитке, то нужно анимировать так сказать (я там выше скрин кидал, вот это оно)

Тогда мой рецепт может помочь. Попробуйте.

if (this.state.isAnimationComplete) {
  return null
}

да, в процессе, спс

теперь на месте анимационных элементов (после анимации) просто черные квадраты (получается компонент то удалился, но вместо него ничего не замещено) в итоге на выходе картинки в виде плитки, мигнула картинка 1,2 из 20 и просто удалилась оставив после себя пустое место,  извини что беспокою, хочу просто сделать что бы оно уже хоть как то заработало, если это такая сложная тема, есть вообще где то какой то пример что бы хотя бы понять как другие это делают? мне в одном чате сказали что это напоминает слот машины, где тоже идет рандомное размещение изображений и если тип картинки совпали они тоже там анимируются или еще че то делается, но я даже хз где эти слот машины гуглить =)

я вот только что погуглил, сдается мне это по другому называется

Есть, например, masonry, в т.ч. и для реакта.

Вот пример: https://github.com/eiriklv/react-masonry-component