React: useTransition hook name already exits in the ecosystem

[just-boris]

The new concurrent mode provides a new hook - useTransition. However the name of it is confusing. The word “transition” in web development already refers to animations and css transition property. There also exist useTransition hook provided by react-spring library. So people who will use both concurrent mode and react-spring in their projects will be confused by clashing names.

Did you consider different names for concurrent transitions? For example, useTransaction is not present in the ecosystems and can be used to describe concurrent updates.

[chybisov]

Strongly agree. This is really confusing.

[FredyC]

We opted a long time ago to prefix all React core hooks, eg. React.useState or React.useTransition so it's clear at the glimpse what it is.

Although, in this case, I do agree that _transition_ does not seem fitting well. However, I don't really have a better one. Does either one of you have some idea? Let's provide constructive criticism, please.

[sopranolinist]

I feel like the word 'delay' needs to be somewhere in the name, because that's basically what this hook is doing, delaying the display of some or all of the screen until other stuff is done executing or has at least started executing. So my vote is for something like useDelayTransition.

[just-boris]

@FredyC

However, I don't really have a better one. Does either one of you have some idea?

I proposed useTransaction in my initial comment. It fits into my mental model of concurrent mode pretty well

[futuregit]

Hello, all,

Good suggestions. I would forgo concurrent mode wording that suggests that JavaScript code run in parallel like languages such as Java.

I always thought of JavaScript as single-threaded. I think it would be best to stay true to it nature.

[miraage]

useTransaction can not be used in React, because transactions are totally different from what useTransition does.

React's hooks are clear. It's not hard to guess their arguments and return values based on a hook name.

My suggestions for you:

• Use import aliasing
• open an issue in react-spring

[just-boris]

Import aliasing does not solve the code readability problem. It may introduce a different name for the same hook in different files or projects, because there is no common convention how to name it.

I opened an issue here instead of react-spring because I believe their naming makes perfect sense. There are CSS-transitions, which are part of the platform and therefore the word “transition” denotes them very well.

[FredyC]

I would once again mention the solution we opted for ... React.useTransition. No collision and import aliasing required.

[just-boris]

React documentation uses useTransition form, not React.useTransition, which makes the latter more like a workaround measure

[eddyw]

Does either one of you have some idea? Let's provide constructive criticism, please.

All this just came to my mind:
useParallelUniverse 🙈 (from docs examples)
useConcurrentTransition (too long?)
useTransit 🤔
useFork (it refers to a "forked" tree)
useConvergence
useStage (like staged environment)

The naming useTransition may make sense but there is also react-transition-group besides react-spring, you may end up with:

React.useTransition
Spring.useTransition
RTG.Transition

Also, what about tree shaking on an existing lib without side-effects that may already include useTransition?, doing this import * as Lib from 'lib' may cause all exports to be included (Yes, you can alias import { useTransition as useBlabla } from '...' but that's not the point)