react-transition-group/src/Transition.js - findDOMNode

[greatzambino]

What is the current behavior?
react-transition-group/src/Transition.js is currently using findDOMNode so when using react.strictmode we get this warning:

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode.

What is the expected behavior?
Since React has deprecated findDOMNode in strictmode, why is it still in use here?
When will this be removed from the package?
Right now the warning is simply annoying, but concerned about it causing issues in future releases of react.

[Mavludin]

https://github.com/reactjs/react-transition-group/releases/tag/v4.4.0

[Interpause]

I need to do it for a TransitionGroup with a changing number of Transition components. As useRef cannot be used in loops, I am not exactly sure how it is to be done. Could you direct me to a demo of how it would work for such lists of transitions? Thanks

[Mavludin]

I need to do it for a TransitionGroup with a changing number of Transition components. As useRef cannot be used in loops, I am not exactly sure how it is to be done. Could you direct me to a demo of how it would work for such lists of transitions? Thanks

You can use React.createRef() instead of useRef in your case.

[amritk]

I need to do it for a TransitionGroup with a changing number of Transition components. As useRef cannot be used in loops, I am not exactly sure how it is to be done. Could you direct me to a demo of how it would work for such lists of transitions? Thanks

You can use React.createRef() instead of useRef in your case.

I found that using React.createRef() seems to break my animation

[DevT0ny]

I need to do it for a TransitionGroup with a changing number of Transition components. As useRef cannot be used in loops, I am not exactly sure how it is to be done. Could you direct me to a demo of how it would work for such lists of transitions? Thanks

did you find any solution ?
edit: createRef solves problem, as in this example https://codesandbox.io/s/thirsty-rgb-dbgxl

[lwensveen]

Still quite unclear to me how to fix this.

I got the following piece of code that outputs a warning:

class Home extends React.PureComponent<Props> {
  public render(): ReactElement {
    const { classes } = this.props;

    return (
      <Box
        className={classes.root}
        display="flex"
        flexDirection="row"
        justifyContent="center"
        alignItems="start"
      >
        <Container>
          <CSSTransition in={true} timeout={0} appear={true} classNames="item">
            <Toolbar className={classes.toolbar}>
              <Typography variant="h6">My React Projects</Typography>
            </Toolbar>
          </CSSTransition>
          <Box
            display="flex"
            flexDirection="row"
            flexWrap="wrap"
            justifyContent="space-evenly"
          >
            <TransitionGroup component={null} appear={true}>
              {CONTENT.map((content) => (
                <CSSTransition key={content.id} timeout={0} classNames="item">
                  <ProjectCard key={content.id} content={content} />
                </CSSTransition>
              ))}
            </TransitionGroup>
          </Box>
        </Container>
      </Box>
    );
  }
}

I tried using createRef:

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: CSSTransitionProps<HTMLElement> | Readonly<CSSTransitionProps<HTMLElement>>): CSSTransition<...>', gave the following error.
    Type 'RefObject<unknown>' is not assignable to type 'Ref<HTMLElement>'.
      Type 'RefObject<unknown>' is not assignable to type 'RefObject<HTMLElement>'.
        Type '{}' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 275 more.
  Overload 2 of 2, '(props: CSSTransitionProps<HTMLElement>, context: any): CSSTransition<HTMLElement>', gave the following error.
    Type 'RefObject<unknown>' is not assignable to type 'Ref<HTMLElement>'.
      Type 'RefObject<unknown>' is not assignable to type 'RefObject<HTMLElement>'.

Transition.d.ts(132, 5): The expected type comes from property 'nodeRef' which is declared here on type 'IntrinsicAttributes & (IntrinsicClassAttributes<CSSTransition<HTMLElement>> & (Readonly<CSSTransitionProps<HTMLElement>> & Readonly<...>))'
Transition.d.ts(132, 5): The expected type comes from property 'nodeRef' which is declared here on type 'IntrinsicAttributes & (IntrinsicClassAttributes<CSSTransition<HTMLElement>> & (Readonly<CSSTransitionProps<HTMLElement>> & Readonly<...>))'

and I tried using useRef, which also errors. It's been some time since I've worked with react so help would be greatly appreciated.

[silvenon]

@lwensveen assuming that <Toolbar> and <ProjectCard> are forwarding refs to their container elements, for the first one (<Toolbar>) you can create a ref object with useRef(), but for CONTENT you should probably create a ref for each of them using createRef(), but outside of the render method, i.e. wherever you defined the CONTENT array, for example:

import { createRef } from "react";

const CONTENT = [
  { id: 1, nodeRef: createRef(null) },
  { id: 2, nodeRef: createRef(null) },
  // ...
]

and pass that nodeRef as nodeRef for <CSSTransition> and as ref for <ProjectCard>. But, again, just make sure that both <Toolbar> and <ProjectCard> are properly forwarding refs.

If it's not working for you, give me a full example in CodeSandbox or something, so that I can see for myself what's not working. I'll close this because the nodeRef approach should be pretty straightforward, I'll be happy to help anyone who hasn't figured it out yet.