feat: add nodeRef alternative instead of internal findDOMNode

[unrevised6419]

RFC: An alternative to ReactDOM.findDOMNode

• Add nodeRef alternative for internal findDOMNode
• Adapted tests
• Added Tests
• Adapted stories

We can name prop one of this:

• domRef
• nodeRef ✓
• guestRef
• transitionRef
• ref (with forwardRef but BREAKING CHANGE)

PRs:

Closes#457
Closes#486
Closes#514

Issues:

Closes#287
Closes#429

[taion]

isn't this going to break stuff when rendering functional children that can't accept refs?

[unrevised6419]

@taion I'll add some tests with different types of components, and see whats happening.

I'm reading official docs. And here is saying that findDOMNode also does not support function components.

findDOMNode cannot be used on function components.
https://reactjs.org/docs/react-dom.html#finddomnode

They mean that cannot use it inside a function component.

[einarq]

Any ideas on when (and if) this will be merged?

[einarq]

@taion I'll add some tests with different types of components, and see whats happening.

I'm reading official docs. And here is saying that findDOMNode also does not support function components.

findDOMNode cannot be used on function components.
https://reactjs.org/docs/react-dom.html#finddomnode

They mean that cannot use it inside a function component.

The way I understand this PR, I would say it is going to break things. Whatever you want to transition would have to either accept a ref (a forwardRef component), or be a plain dom element.

Or am I missing something? It's happened before, many times... :)

[unrevised6419]

The way I understand this PR, I would say it is going to break things. Whatever you want to transition would have to either accept a ref (a forwardRef component), or be a plain dom element.

@einarq you are absolutely right. Whatever you want to transition would have to resolve to a DOM ref. So this would be a breaking change.

@taion what are your thoughts on creating a new major version, using ref instead of findDOMNode?

[danielhusar]

+1 for a new major version

[unrevised6419]

Or I'll try to find a solution that will
When user provides the ref use it to make transition (kind of breaking change also).
When user is not providing the ref, use findDOMNode and warn about it's usage, and removal in new major version, encourage to use the ref solution.

[inomdzhon]

Hi, there :)

I see that these changes lead to the fact that I need to wrap my component to React.forwardRef. I don't what it, because it additional payload.

What about provide this:

type TProps = {
hostRef: React.Ref<HTMLElement>;
};
function Button(props: TProps) {
return <button ref={props.hostRef}>...</button>
}
function App() {
return (
<CSSTransition refHook="hostRef">
<button>...</button>
</CSSTransition >
);
}

If user provide refHook and component have refHook than use refHook, otherwise use ref.

I can create PR.

[unrevised6419]

@inomdzhon I also thought of this, user should pas to Transition a ref that will resolve to a DOM element.

functionApp(){constref=React.useRef()return(<TransitiondomRef={ref}><MaybeDOMmaybeFunctionMaybeClassrefThatComponentAccepts={ref}/></Transition>)}

Using the method above, we can make it non breaking change, and use findDOMNode when domRef is missing.

I am also thinking of writing a experimental hook. Maybe something like this

functionApp(){constref=React.useRef()useTransition(ref)return(<MaybeDOMmaybeFunctionMaybeClassrefThatComponentAccepts={ref}/>)}

[inomdzhon]

Hm, but what about list of component?

function App() {
return (
<TransitionGroup>
<CSSTransition><div>1</div></CSSTransition>
<CSSTransition><div>2</div></CSSTransition>
<CSSTransition><div>3</div></CSSTransition>
<CSSTransition><div>4</div></CSSTransition>
</TransitionGroup>
);
}

It can be hard to collect all refs and provide to CSSTransition. So, what about this case?

May be we can use render props (like Transition API);

<CSSTransition>
{(state, hostRef) => <div className={state} ref={hostRef}></div>}
</CSSTransition>

[unrevised6419]

@inomdzhon in this case we can have this maybe?

functionApp(){return(<TransitionGroup><CSSTransitiondomRef="hostRef"><div>1</div></CSSTransition><CSSTransitiondomRef="hostRef"><div>2</div></CSSTransition><CSSTransitiondomRef="hostRef"><div>3</div></CSSTransition></TransitionGroup>);}

or even better this

functionApp(){return(<TransitionGroupdomRef="hostRef"><CSSTransition><div>1</div></CSSTransition><CSSTransition><div>2</div></CSSTransition><CSSTransition><div>3</div></CSSTransition></TransitionGroup>);}

And domRef can be a string or a ref. In case of TransitionGroup only string

[inomdzhon]

I think <CSSTransition refHook="hostRef"> will be more clear than provide a responsibility to TransitionGroup.

For don't repeat users can customize CSSTransition prop like this

function CSSTransitionAdapter(props) {
return <CSSTransition refHook="hostRef" {...props} />
}

Than

function App() {
return (
<TransitionGroup>
<CSSTransitionAdapter><div>1</div></CSSTransition>
<CSSTransitionAdapter><div>2</div></CSSTransition>
<CSSTransitionAdapter><div>3</div></CSSTransition>
</TransitionGroup>
);
}

[unrevised6419]

This are all use cases I can see for the API right now.

importReactfrom'react'import{Transition,TransitionGroup}from'react-transition-group'functionMaybeDomOrFunctionOrClass(props){const{ refThatResolvesToDOM }=propsreturn<divref={refThatResolvesToDOM}>666</div>}functionApp(){constref=React.useRef(null)constref1=React.useRef(null)constref2=React.useRef(null)constref3=React.useRef(null)return(<React.Fragment>
/* it will use ref to make transition */
<TransitiondomRef={ref}><MaybeDomOrFunctionOrClassrefThatResolvesToDOM={ref}/></Transition>
/* it will try to find and use prop `refThatResolvesToDOM` */
/* otherwise fallback to `findDOMNode` */
<TransitiondomRef="refThatResolvesToDOM"><MaybeDomOrFunctionOrClassrefThatResolvesToDOM={ref}/></Transition>
/* it will try to find and use prop `refThatResolvesToDOM` */
/* otherwise fallback to `findDOMNode` */
/* ??? maybe create a ref internally in Transition and pass as `refThatResolvesToDOM` to child */
<TransitiondomRef="refThatResolvesToDOM"><MaybeDomOrFunctionOrClass/></Transition><TransitionGroup><TransitiondomRef={ref1}><MaybeDomOrFunctionOrClassrefThatResolvesToDOM={ref1}/></Transition><TransitiondomRef={ref2}><MaybeDomOrFunctionOrClassrefThatResolvesToDOM={ref2}/></Transition><TransitiondomRef={ref3}><MaybeDomOrFunctionOrClassrefThatResolvesToDOM={ref3}/></Transition></TransitionGroup><TransitionGroup><TransitiondomRef="refThatResolvesToDOM"><MaybeDomOrFunctionOrClassrefThatResolvesToDOM={ref1}/></Transition><TransitiondomRef="refThatResolvesToDOM"><MaybeDomOrFunctionOrClassrefThatResolvesToDOM={ref2}/></Transition><TransitiondomRef="refThatResolvesToDOM"><MaybeDomOrFunctionOrClassrefThatResolvesToDOM={ref3}/></Transition></TransitionGroup><TransitionGroup><TransitiondomRef="refThatResolvesToDOM"><MaybeDomOrFunctionOrClass/></Transition><TransitiondomRef="refThatResolvesToDOM"><MaybeDomOrFunctionOrClass/></Transition><TransitiondomRef="refThatResolvesToDOM"><MaybeDomOrFunctionOrClass/></Transition></TransitionGroup><TransitionGroupdomRef="refThatResolvesToDOM"><Transition><MaybeDomOrFunctionOrClass/></Transition><Transition><MaybeDomOrFunctionOrClass/></Transition><Transition><MaybeDomOrFunctionOrClass/></Transition></TransitionGroup></React.Fragment>)}

[inomdzhon]

Ok, I see.

What about use useRef for hook version of library (like useTransition, useCSSTransition) and for basic version (like <CSSTransition />) use React.cloneElement({ [props.refHook || 'ref']: handleRef });?

The fewer use cases, the easier it is to use and maintain code. Over the years, I realized that the principle the easier the better. I mean we shouldn't complicate.

[jRichardeau]

Hey,
Do you know when this will be released ?
Thanks

[camflan]

Any updates on release schedule?

[inomdzhon]

Hi, @iamandrewluca 👋

How I can help you?

[unrevised6419]

Still thinking how to provide the API for the end user.
Because it seems this change will propagate to top most end user.
For example https://github.com/reactstrap/reactstrap is using Transition in Fade component, that is used by Alert component, that is used by the end user.
Here reactstrap or creates the ref internally, or let the user to pass the prop.
Which is not so convinient.

The limitation of creating the ref internally is that we don't know what kind of children the Transition has, Class, Function, DOM.
To make this possible, react-transition-group need to make a breaking change, and force children to have a ref that resolves to a DOM element. But this will force a breaking change chain for all tree dependency, that will want to upgrade.

[unrevised6419]

If taking the example above from #559 (comment)

And changing MaybeDomOrFunctionOrClass from

functionMaybeDomOrFunctionOrClass(props){const{ refThatResolvesToDOM }=propsreturn<divref={refThatResolvesToDOM}>666</div>}

to

functionMaybeDomOrFunctionOrClass(){constref=React.useRef(null)return(<TransitiondomRef={ref}><divref={ref}>666</div></Transition>)}

then our App resolves to

functionApp(){return(<React.Fragment><MaybeDomOrFunctionOrClass/><TransitionGroup><MaybeDomOrFunctionOrClass/><MaybeDomOrFunctionOrClass/><MaybeDomOrFunctionOrClass/></TransitionGroup></React.Fragment>)}

[unrevised6419]

If MaybeDomOrFunctionOrClass wants to expose for example a innerRef props

functionMaybeDomOrFunctionOrClass({ innerRef =React.useRef(null)}){return(<TransitiondomRef={innerRef}><divref={innerRef}>666</div></Transition>)}

functionApp(){constref=React.useRef(null)constref1=React.useRef(null)constref2=React.useRef(null)constref3=React.useRef(null)return(<React.Fragment><MaybeDomOrFunctionOrClassinnerRef={ref}/><TransitionGroup><MaybeDomOrFunctionOrClassinnerRef={ref1}/><MaybeDomOrFunctionOrClassinnerRef={ref2}/><MaybeDomOrFunctionOrClassinnerRef={ref3}/></TransitionGroup></React.Fragment>)}

[unrevised6419]

I'll do some tests using this PR and reactstrap components.

[inomdzhon]

Yeah, I understood 👌Waiting tests.

Furthermore, I realized on this point refHook is string – we can't check type children, we can only do a run-time check.

[jquense]

🎉 This PR is included in version 4.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[silvenon]

I didn't realize we have semantic-release set up 😅 I'll update release notes and the documentation.

[fkhadra]

Guys, thank you so much for all the work you did for addressing this issue. Also, migrating my library to the new api was a breeze. 🙏

[silvenon]

I'm glad that you're already enjoying the update! ❤️ Let us know if there are any issues.

[malikalimoekhamedov]

I feel like the typing of nodeRef should be extended. Right now it only accommodates for the type 'Element' which is limiting in case of nested routes. Please, let me know if I misunderstood #559.

Warning: Failed prop type: Invalid prop `nodeRef.current` of type `Switch` supplied to `CSSTransition`, expected instance of `Element`.

Here's my situation:

Level 1 router is a <Switch> handling switching between high-level website sections which, themselves are routers handling level 2 navigation (<Switch>'es).
This means that I'd like to transition <Switch> components on level 1 instead of regular div's or the likes.

Right now, I'm drilling nodeRef down to div's through nested <Switch>'es and it: a) feels hacky, b) interferes with level 2 CSSTransitions.

Am I missing something? Is the only way around this to wrap all of my <Switch>'es in <div ref={nodeRef}>'s?

[unrevised6419]

@antikvarBE can you provide a simple example? I kind of understand what are you trying to do, and I think I know what should you do, but I don't see entire picture.

[malikalimoekhamedov]

Thanks for reaching back @iamandrewluca .
Here's what I thought was allowed:

In Private.tsx

constnodeRef=React.useRef(null);return(<divid={'private'}className={styles.wrapper}><MainMenuitems={items}/><mainclassName={styles.content}><SwitchTransitionmode={'out-in'}><CSSTransitionkey={location.pathname.split('/',3).join('/')}timeout={500}classNames={{ ...styles}}nodeRef={nodeRef}><PrivateRouterlocation={location}ref={nodeRef}/></CSSTransition></SwitchTransition></main></div>);

In PrivateRouter.routes.tsx

constPrivateRouter: React.FC<SwitchProps&{nodeRef: React.MutableRefObject<null>}>=({ location })=>(<Switchlocation={location}ref={nodeRef}><Routepath={'/favorites'}><Favorites/></Route><Routepath={'/support'}><Support/></Route><Routepath={'/account'}><Account/></Route></Switch>);

Doing this would throw the aforementioned error:

Warning: Failed prop type: Invalid prop `nodeRef.current` of type `Switch` supplied to `CSSTransition`, expected instance of `Element`.

So, currently, I'm doing this instead:

constnodeRef=React.useRef(null);return(<divid={'private'}className={styles.wrapper}><MainMenuitems={items}/><mainclassName={styles.content}><SwitchTransitionmode={'out-in'}><CSSTransitionkey={location.pathname.split('/',3).join('/')}timeout={500}classNames={{ ...styles}}nodeRef={nodeRef}><divref={nodeRef}>// <-- This is my current workaround<PrivateRouterlocation={location}/></div></CSSTransition></SwitchTransition></main></div>);

It works perfectly fine but I'm the kind of person who thinks twice before introducing another DOM level and if I can get away without doing it and keep things nice and clean semantically, I'd rather do that.

What do you think?

[silvenon]

Is Switch coming from react-router? What does its ref prop usually return? I couldn't find it in the docs. Unless it returns a DOM Node, it shouldn't be used with nodeRef.

[malikalimoekhamedov]

@silvenon , it's from react-router-dom.
A quick type inspection of Switch's ref yields the following:

(JSXattribute)React.ClassAttributes<Switch>.ref?: string |((instance: Switch|null)=>void)|React.RefObject<Switch>|null|undefined

[silvenon]

Oh, then ref points to a class instance, not a DOM element, therefore you shouldn't use it directly (that's why it's named nodeRef). If Switch happens to expose some kind of a instance property that points to a DOM node, then use that (probably not advisable as it would have to use findDOMNode for that), otherwise your workaround is the best way to proceed, IMO.

[unrevised6419]

@antikvarBE in example above if I'm not mistaken you want to transition between private routes? What version of react router do you use?
@silvenon I'll try to add an example in stories to reflect this use case.

[malikalimoekhamedov]

@iamandrewluca , I'm using "react-router": "^5.2.0" and "react-router-dom": "^5.2.0". Yes, I'm transitioning between private routes as they're described in Private.routes.tsx (see example). Essencially, <Switch> displays one and only one <Route> at a time. If one route only contains one component, it also means <Switch> displays one and only one component at a time. That's the way I understand it.

[malikalimoekhamedov]

Oh, then ref points to a class instance, not a DOM element, therefore you shouldn't use it directly (that's why it's named nodeRef). If Switch happens to expose some kind of a instance property that points to a DOM node, then use that (probably not advisable as it would have to use findDOMNode for that), otherwise your workaround is the best way to proceed, IMO.

@silvenon : Got it. That makes sense. Just wanted to double-check. Thanks a bunch.