RFC: An alternative to ReactDOM.findDOMNode

[silvenon]

Hi everyone 👋

The time has come to implement an alternative to ReactDOM.findDOMNode, as explained in React docs:

findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. It has been deprecated in StrictMode.

The goal is to come up with an API that is optional and falls back to ReactDOM.findDOMNode. I think that we should eventually change the entire API into something more sustainable, probably hooks, but that's a separate discussion.

So far we have three proposed solutions:

1. findDOMNode, a function that returns a node (#457)

@eps1lon's solution would look like this:

import React from 'react'
import { Transition } from 'react-transition-group'

const StrictModeTransition = () => {
  const childRef = React.useRef(null)

  return (
    <Transition appear in findDOMNode={() => childRef.current}>
      <div ref={childRef}>
        transition
      </div>
    </Transition>
  )
}

2. domRef, a ref object (#559)

@iamandrewluca's solution would look like this:

import React from 'react'
import { Transition } from 'react-transition-group'

const StrictModeTransition = () => {
  const childRef = React.useRef(null)

  return (
    <Transition appear in domRef={childRef}>
      <div ref={childRef}>
        transition
      </div>
    </Transition>
  )
}

3. ref object as a 2nd argument in render prop

My solution would look like this:

import React from 'react'
import { Transition } from 'react-transition-group'

const StrictModeTransition = () => {
  return (
    <Transition appear in>
      {(status, childRef) => (
        <div ref={childRef}>
          transition
        </div>
      )}
    </Transition>
  )
}

So let's begin!

Updates

For those who are just catching up with the discussion, one notable proposition is to extend the 3rd solution with the ability to pass your own ref, which would then be forwarded to the render prop:

import React from 'react'
import { Transition } from 'react-transition-group'

const StrictModeTransition = () => {
  const childRef = React.useRef(null)
  return (
    <Transition appear in ref={childRef}>
      {(status, innerRef) => (
        // innerRef === childRef
        <div ref={innerRef}>
          {status}
        </div>
      )}
    </Transition>
  )
}

This way we can avoid having to merge refs, which is the key benefit of the 2nd solution. (If you don't pass a ref to Transition, it would create one internally.)

[silvenon]

The 3rd solution just came to my mind while I was writing the RFC, I might have overlooked something disqualifying.

[eps1lon]

I'm in favor of proposal two:

• more popular than number one
• basic use case doesn't require additional functions

Number 3 is problematic since it's easier to spot wrong usage. By requiring domRef we could potentially warn if it isn't provided whereas in proposal 3 forwarding the ref could be forgotten without react-transition-group noticing (because it's not clear whether a DOM instance isn't created yet or the ref isn't actually attached). It could still be forgotten in number 2 but at least you have declared it without usage.

[inomdzhon]

@eps1lon no problem with warn. Here is demo.

I give my vote to the third solution. It's look tasty and simple.

[unrevised6419]

With third solution we can't get a ref direct to element, we have to use one provided by transition

import React from 'react'
import { Transition } from 'react-transition-group'

const StrictModeTransition = () => {
  const divRef = React.useRef(null)
  return (
    <Transition appear in>
      {(status, childRef) => (
        // how we pass `divRef` here? we have to use `childRef` instead
        <div ref={childRef}>
          {status}
        </div>
      )}
    </Transition>
  )
}

[unrevised6419]

Let's think this problem also from perspective of adding hooks version of library

e.g. const status = useTransition(/* ... */)

[inomdzhon]

@iamandrewluca we can do this

import React from 'react'
import { Transition } from 'react-transition-group';

function setRef(ref, value) {
  if (typeof ref === 'function') {
    ref(value);
  } else if (ref) {
    ref.current = value;
  }
}

function createChainedRef(refA, refB) {
  return (value) => {
    setRef(refA, value);
    setRef(refB, value);
  };
}

const StrictModeTransition = () => {
  const divRef = React.useRef(null);

  return (
    <Transition appear in>
      {(status, childRef) => (
        <div ref={createChainedRef(childRef, divRef)}>
          {status}
        </div>
      )}
    </Transition>
  )
}

[unrevised6419]

Here is an implementation of merged refs
https://github.com/react-restart/hooks/blob/master/src/useMergedRefs.ts#L13

[eps1lon]

The solution in #606 (comment) is quite excessive since it re-creates ref callbacks on every render which means the we need to cleanup and re-attach on every render. Solution number two does not have these problems since the ref callback responsible for forking can be memoized.

[silvenon]

By "solution number two" you're talking about useMergedRefs?

[silvenon]

Anyway, regardless of which strategy for merging refs is best to use, this is possible and should be done by the user if they need to.

[jquense]

I think a combo of both is probably the most common and ergonomic?

  const divRef = React.useRef(null);

  return (
    <Transition appear in ref={ref}>
      {(status, innerRef) => (
        <div ref={innerRef}>
          {status}
        </div>
      )}
    </Transition>
  )

Alternatively, i've been dragging my feet on this mostly because i think that Transition likely shouldn't be a component at all and should look more like

const status = useTransition({
  in,
  appear: true,
})

// use an effect instead of callbacks
useEffect(() => {
  if (status === 'exited') onExited()
}, [status])

[silvenon]

Definitely, I also think it shouldn't be a component, IMO same goes for CSSTransition, but maybe a unified shape of the result:

const transition = useCssTransition({
  in: inProp,
  appear: true,
  classNames: 'fade'
})

return transition.status !== 'exited'
  ? (
    <div
      ref={transition.ref}
      className={transition.className}
    />
  : null

EDIT: Or possibly not having useCssTransition at all? 😜 Instead useTransition could add this behavior based on whether or not it receives classNames. It's fun to think about. 🔥

[silvenon]

About the proposition to pass ref to the Transition component itself, it feels weird to pass the ref to the parent which forwards it to the child element that you yourself provided. 😕 So the element you're targeting is right in front of you, but instead you pass it to its parent. This pattern is common?