Tracking issue for removing `react-motion` dependency

[Taelkir]

I'm getting the following console warning after upgrading to React 16.9.0

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Motion, TransitionMotion

The above error is what I'm getting in my code, but I have recreated a similar warning in the console here: https://codesandbox.io/s/nivoline-line-layers-461-yogxd?fontsize=14

Only seems to happen to charts with custom tooltips - it doesn't appear for piecharts, but does if I render a choropleth or a line chart

Not sure if Motion/TransitionMotion are dependencies or part of Nivo.

---

Maintainer Edit: This is due to the react-motion package which is still used for some of the nivo packages, here is the list of packages still need to be migrated to react-spring:

• [x] Bar (#1619)
• [x] Bullet (#1252)
• [x] Chord (#1874)
• [x] Circle Packing (#1360)
• [x] Colors (#1885)
• [x] Network (#1767)
• [x] Scatterplot (#1726)
• [x] Sunburst (#1264)
• [x] Swarmplot (#1365)
• [ ] Waffle

[ulysset]

Hi @Taelkir it's part of react-motion, here's the corresponding issue: https://github.com/chenglou/react-motion/issues/569 Unfortunately, it hasn't been fixed yet.

[Justin2997]

Maby we should have a fork of the fix in the organization repo, the projet last commit was in 2018.

[loganpowell]

I was just about to submit this same issue. It seems React Motion has been abandoned.

[gwillz]

There's an PR to fix this in react-motion: chenglou/react-motion#534. The initial hesitation was about compatability with React v14/15. But now it sounds like the project is somewhat abandoned.

Other have mentioned successful transitions to react-spring: react-spring/react-spring.

[IamPrudhviRam]

So what's the solution for it? I mean any alternatives or something like that? It's not good to see a warning on console just because its irritating and not acceptable.

[mckelveygreg]

Perhaps if there were some examples of how a move to React-spring would look like for a package, we could do it incrementally? I'd be willing to do a package or 2, but I would like a little help as it seems that React-motion is firmly integrated into Nivo..

[alexweber]

Maybe if there was a bounty on this it would help get things in motion... or should I say in spring? 😄

[kaiyoma]

I stumbled upon this today while beginning to investigate Nivo as a replacement for our current dataviz approach, which is an ad hoc combination of several libraries (data-ui, victory, and react-vis). Our data-ui components are currently spewing warnings about componentWillReceiveProps in the console, so I figured I'd start by using Nivo's Bar component to replace our current bar chart. I finally got the chart working and... the same warning appears in the console. 🤦‍♂️

It's not a great look for Nivo that my first experience is a deprecation warning from a library that is abandoned and hasn't been updated since 2017. Thankfully, the console warning doesn't appear if I disable animations, but still, it's 2020. Time to move to react-spring.

[wyze]

I agree. It is a big change we are planning to make. Up until about a month ago, it was a single person managing the project. Now, I have been given some access to help merge PRs and manage issues. This is the second biggest issue we need to tackle.

First, we are migrating the codebase to TS, which is in progress #821 and #963. After that is complete we will be tackling this.

[skipjack]

Bump. I've seen this warning as recently as yesterday, though I can double check my nivo and react versions later.

[aurelticot]

Ended up on this issue from #1256. Nivo looks nice and I'd like to use it in my project but can't install it because of react-motion not supporting react 17. Even with --force or --legacy-peer-deps flags, the typescripts declarations are all messed up. Looking forward replacing react-motion. Any updates?

[wmhartl]

+1 here, looking to shift but am on React 17. Any update here?

[webdevmehdi]

Bump, i have encountered the same warning , any workaround for the moment ?

[wyze]

No workaround currently.

[georgeyaacoub]

Bump, i have encountered the same warning , any workaround for the moment ?

Facing the same problem with the funnel, couldn't work around it.

[daniellittledev]

Colors would be good to migrate next as Bars is migrated but has a dependency on Colors

[plouc]

@daniellittledev, the problem is that colors is used by non migrated packages relying on some specific features for react-motion, so it'll probably be one of the last to be migrated.

[plouc]

@nivo/scatterplot has been migrated to @react-spring via https://github.com/plouc/nivo/pull/1726.

[Nessworthy]

Is this entirely blocking use of nivo when running React 17.x? Just hit a dep issue with react & react-motion whilst trying to use treemap.

(Snipped CLI output log - can see colors listed above which treemap depends on)

[plouc]

@Nessworthy, you'll still get a warning but it should work.

[plouc]

Migrated @nivo/network to react-spring in https://github.com/plouc/nivo/pull/1767.

[plouc]

Migrated @nivo/chord to react-spring in https://github.com/plouc/nivo/pull/1874

[plouc]

Removed from @nivo/colors in https://github.com/plouc/nivo/pull/1885

[MichaelDeBoey]

#1271 will remove it from @nivo/waffle

[plouc]

Removed from @nivo/waffle in https://github.com/plouc/nivo/pull/2320.