Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React lifecycle method warnings #49

Open
denis-sokolov opened this issue Oct 24, 2018 · 2 comments
Open

React lifecycle method warnings #49

denis-sokolov opened this issue Oct 24, 2018 · 2 comments

Comments

@denis-sokolov
Copy link

React deprecates componentWillReceiveProps in favor of getDerivedStateFromProps. Documentation. If we don’t fix this, the component will be broken in React 17.

componentWillReceiveProps(nextProps) {
if (nextProps.src !== this.props.src) {
this.isLoaded = false;
if (nextProps.initialImage) {
this.handleInitialTimeout();
}
this.setDisplayImage({ image: nextProps.src, fallbacks: nextProps.fallbackImage });
}
}

@elquimista
Copy link

While we wait for this package to be updated, this works for me for now:

import ReactImageFallback from 'react-image-fallback'

const UNSAFE_LIFECYCLE_METHOD_NAMES = [
  'componentWillMount',
  'componentWillReceiveProps',
  'componentWillUpdate',
]

function renameUnsafeLifecycleMethods (Component) {
  const { prototype } = Component

  UNSAFE_LIFECYCLE_METHOD_NAMES.forEach((methodName) => {
    if (!prototype[methodName]) return

    Object.defineProperty(prototype, `UNSAFE_${methodName}`, {
      configurable: true,
      value: prototype[methodName],
      writable: true,
    })
    Reflect.deleteProperty(prototype, methodName)
  })

  return Component
}

const ImageFallback = renameUnsafeLifecycleMethods(ReactImageFallback)

@martinfoakes
Copy link

Just created a PR for this issue: #59

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants