ayub-begimkulov / retransition Goto Github PK

Привет!

Столкнулся с проблемой обновления списка элементов, обернутого в Transition. Опишу кейс:

1. Сначала оборачиваем функцию рендера элементов в TransitionGroup

<TransitionGroup name="fade">{list.map(renderItem)}</TransitionGroup>

2. Затем опишем функцию, которая возвращает элемент обернутый в Transition

const renderItem = (item) => (
   <Transition key={item.id}>
     <li key={item.id}>
       {item.a} - {item.b}
     </li>
   </Transition>
 );

Если list это массив элементов, каждый из которых является объектом, который содержит в себе id и прочие свойства, то при обновлении листа Transition будет либо мешать перерендеру, в случае если не был обновлен id (или свойство, которое было ему передано в качестве key), либо воспроизводить анимацию, даже если порядок элементов не был изменен.

Воспроизвел пример тут => CodeSandbox

Starting from React 18 when I use createRoot to mount my root component, <TransitionGroup /> component flickers at the end for some reason. Not sure why it happens but it isn't difficult to reproduce.