benhowell/react-grid-gallery

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

monicayanethacosta opened this issue · 2 comments

I am using in my project
react-grid-gallery, but I have this warning, it has this solution?:
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles 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: Gallery, Lightbox

thanks for your help

It looks like componentWillReceiveProps is being used to update the index of the current image from a new set of images, and recalculate the thumbnails from a new set of images. But any new images are being passed into the component as props, so...why not let React do its thing and rerender based on updated props (images)? Why do we need this function at all in this case?

Hi @monicayanethacosta. Thanks for reporting!
There are two problem components Gallery and Lightbox. Fix for the Gallery is ready and will be released soon.

But it's not easy to fix Lightbox because it is a third-party component react-grid-gallery relies on. Lightbox is a part of react-images. This package is marked as no longer maintained and it makes the situation really difficult. So I'll notify you when we decided how to deal with it.

@DevDaveJ yes you are right, we can easily avoid using componentWillReceiveProps here https://github.com/benhowell/react-grid-gallery/pull/174/files.