React-Transition-Group: findDOMNode is deprecated in StrictMode

Question

I am using the animation library react-transition-group in react for animating a TODO list using <TransitionGroup> and <CSSTransition> as shown below

<ul>
   <TransitionGroup className="todo-list">
      {incompleteTodos.map((task) => (
      <CSSTransition key={task.id} timeout={500} classNames={styles}>
         <li key={task.id}>
            <TodoTask
               todo={task}
               onClick={(todo) =>
            toggleTodo({ data: todo })}
            />
         </li>
      </CSSTransition>
      ))}
   </TransitionGroup>
</ul>

But I am getting the error in the console as below:

I read about using nodeRef={nodeRef} on the CSSTransition element mentioned in this official changelog and git issue as shown below but then it started behaving weird i.e. some of the elements are not appearing properly in UI as shown in the screenshot below code snippets:

const nodeRef = React.useRef(null)

and

<ul>
   <TransitionGroup className="todo-list">
      {incompleteTodos.map((task) => (
      <CSSTransition
         key={task.id}
         timeout={500}
         classNames={styles}
         nodeRef={nodeRef}
         >
         <li key={task.id} ref={nodeRef}>
            <TodoTask
               todo={task}
               onClick={(todo) =>
            toggleTodo({ data: todo })}
            />
         </li>
      </CSSTransition>
      ))}
   </TransitionGroup>
</ul>

This screenshot is taken after applying nodeRef in CSSTransition

Does this answer your question? [Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode](https://stackoverflow.com/questions/60903335/warning-finddomnode-is-deprecated-in-strictmode-finddomnode-was-passed-an-inst) — Amruth, Aug 07 '21 at 15:39
Maybe check out [this Changelog description](https://github.com/reactjs/react-transition-group/blob/8dc9ad8d9412878a40312e418d389bf97f3794b8/CHANGELOG.md#440-2020-05-05)? — edemaine, Aug 07 '21 at 15:49
@edemaine Tried this but my code has Transition and CSSTransition, didn't work — Varun Sukheja, Aug 07 '21 at 16:14

score 2 · Answer 1 · answered Aug 07 '21 at 17:25

You need to make a separate ref for each of the CSSTransitions. The easiest way to do that is to make a custom component:

<ul>
   <TransitionGroup className="todo-list">
      {incompleteTodos.map((task) =>
        <TransitionTodo key={task.id} todo={task}/>}
  </TransitionGroup>
</ul>

function TransitionTodo({todo}) {
  nodeRef = useRef();
  return (
    <CSSTransition
       timeout={500}
       classNames={styles}
       nodeRef={nodeRef}
     >
       <li ref={nodeRef}>
          <TodoTask
             todo={todo}
             onClick={(todo) =>
               toggleTodo({ data: todo })}
          />
       </li>
    </CSSTransition>
  );
}

React-Transition-Group: findDOMNode is deprecated in StrictMode

1 Answers1