useTransition в React Spring вызывает слишком много повторных рендеров

Я использую useTransition из react spring, чтобы построить отображение анимированных слов в виде каменной сетки для блога. Моя работа в значительной степени основана на официальной демонстрации codeandbox от react spring для каменной сетки, которую можно найти здесь: https://codesandbox.io/embed/26mjowzpr

Мои работы можно найти здесь: https://codesandbox.io/s/qrzn-issue-2-david-byrne-8s7bo?file=/src/App.js:1267-1293

Что вы заметите в моем окне с кодами, так это то, что если вы нажмете на одну из маленьких головок внизу, произойдет переход, но затем страница будет повторно отображена примерно 20 раз, и я не могу понять, почему.

Я думаю, это как-то связано с моим вызовом useTransition, но я совершенно не понимаю

  const leftTransitions = useTransition(leftGridItems, item => item.word, {
    from: ({ xy, width, height }) => {
      return {
        xy: [xOffset, yOffset],
        width,
        height,
        opacity: 0
      };
    },
    enter: ({ xy, width, height }) => ({ xy, width, height, opacity: 1 }),
    update: ({ xy, width, height }) => ({ xy, width, height }),
    leave: ({ xy, width, height }) => {
      return {
        xy: [xOffset, yOffset],
        opacity: 0
      };
    },
    config: { mass: 5, tension: 500, friction: 100 },
    trail: 25
  });

person Seanyboy Lee    schedule 29.06.2020    source источник


Ответы (1)


Если кому-то интересно, это больше не проблема, если вы обновитесь до v9. Подробности в журнале изменений здесь: https://www.react-spring.io/log

person Seanyboy Lee    schedule 02.07.2020