reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.36k stars 809 forks source link

Warning about the component #649

Open arcifius opened 6 years ago

arcifius commented 6 years ago

Steps to reproduce:

Just include the lib and add it to render method... You should see: Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

Modal uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles: componentWillReceiveProps componentWillUpdate

The above lifecycles should be removed.

diasbruno commented 6 years ago

Hi @arcifius, don't know if this warning should be present. We are in a process of adapting the library for react 16.3+ and 17.

cc @Hypnosphi, if you can comment on this.

Hypnosphi commented 6 years ago

@arcifius Which react-modal and react versions is it?

LeonardoGentile commented 6 years ago

I'm experiencing the same issue: react@16.3.2 react-modal@3.4.2

Hypnosphi commented 6 years ago

Weird, I can't reproduce it (console is empty): https://codesandbox.io/s/m5xo3xz96j

akonyer commented 6 years ago

I am able to reproduce this warning as well.

React 16.3.2 and react-modal 3.4.2

diasbruno commented 6 years ago

Can you try to downgrade react to 16.3.0 or 16.3.1?

Hypnosphi commented 6 years ago

@arcifius @LeonardoGentile @akonyer Can some of you please create a GitHub repo with minimal reproduction of the issue?

ignatiusreza commented 6 years ago

I'm having this issue when using react-modal together with react-hot-loader.. need to dig deeper, but, I think the issue is caused by react-hot-loader depending on v2 of react-lifecycles-compat, while react-modal depends on v3..

The issue went away if I provide custom yarn resolutions like

"resolutions": {
  "react-lifecycles-compat": "^3.0.2"
}
ignatiusreza commented 6 years ago

react-hot-loader updated their dependencies and the warning no longer there, even without custom yarn resolutions mentioned above..

larabr commented 6 years ago

I get similar errors as well by wrapping the Modal@3.4.4 with React.StrictMode component (From React@16.3.2):

main.bundle.js:200868 Warning: Unsafe lifecycle methods were found within a strict-mode tree:
componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Modal, ModalPortal

componentWillUpdate: Please update the following components to use componentDidUpdate instead: Modal
am-you commented 4 years ago

Using react 16.3.1 getting similar issue Screenshot from 2020-05-11 00-15-12