Nivo: componentWillReceiveProps warning in React 16.9.0

[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:

• [ ] Bar
• [x] Bullet (#1252)
• [ ] Chord
• [ ] Circle Packing
• [ ] Colors
• [ ] Network
• [ ] Scatterplot
• [x] Sunburst (Appears unused, but in package.json) (#1264)
• [ ] Swarmplot
• [ ] 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.

[sousajunior]

+1

[maddinaprudhvi]

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.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!