Modals use unsafe lifecycle methods

[Joald]

• components: Modal
• reactstrap version #6.3.1
• import method umd
• react version #16.4.1
• bootstrap version #4.0.0

What is happening?

When displaying a Modal in React.StrictMode, a warning is shown.

What should be happening?

The component should not use deprecated lifecycle methods.

Steps to reproduce issue

1. Render a Modal inside React.StrictMode

Error message in console

Warning: Unsafe lifecycle methods were found within a strict-mode tree:

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Modal

componentWillUpdate: Please update the following components to use componentDidUpdate instead: Modal

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

Code

Open the rendered page to see the error in the console.

[edmorley]

The offending usage is here:

reactstrap/src/Modal.js

Lines 116 to 126 in 07ec4b5

	componentWillReceiveProps(nextProps) {
	if (nextProps.isOpen && !this.props.isOpen) {
	this.setState({ isOpen: nextProps.isOpen });
	}
	}
	componentWillUpdate(nextProps, nextState) {
	if (nextState.isOpen && !this.state.isOpen) {
	this.init();
	}
	}

React docs on migrating:
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles
https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate
https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

[datenreisender]

I think this was fixed by c844ab1.

[iegik]

Related to reactjs/react-transition-group#429

[iegik]

https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js#L213
Here is used unsafe ReactDOM.findDOMNode method. Could we replace it with reference and pass it to TransitionGroupContext.Provider in render?

[lid3rs]

any updates?

[armenzg]

Any updates?

[GoPro16]

This is fixed in v8.

[illiteratewriter]

I am still seeing the error. To replicate, wrap a Modal in React.StrictMode

Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: Transition

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
in div (created by Transition)

react v16.13.1
reactstrap v8.4.1

On digging, this is an open issue in react-transition-group reactjs/react-transition-group#429

[aqeebimtiaz]

According to this, seems like the issue has been resolved. But weirdly enough, when I installed reactstrap, my package-lock.json has "react-transition-group": { "version": "2.9.0"

manually updating the react-transition-group to latest version (4.4.1) didn't resolve this...

any idea what else can I do? Thanks in advance!

[illiteratewriter]

@aqeebimtiaz I'm not sure if I'll be doing a PR, kind of busy, but I took a jab at it. The issue is you have to add nodeRef to the Transition component.

So I tried it and it worked but the issue now is, if you don't pass a ref it will again throw that error, so innerRef becomes kind of a mandatory prop.

So inside Fade.js it should be something like

<Transition {...transitionProps} nodeRef={innerRef}>
      {(status) => {
        const isActive = status === 'entered';
        const classes = mapToCssModules(classNames(
          className,
          baseClass,
          isActive && baseClassActive
        ), cssModule);
        return (
          <Tag className={classes} {...childProps} ref={innerRef}>
            {children}
          </Tag>
        );
      }}
    </Transition>

[aqeebimtiaz]

@aqeebimtiaz I'm not sure if I'll be doing a PR, kind of busy, but I took a jab at it. The issue is you have to add nodeRef to the Transition component.

So I tried it and it worked but the issue now is, if you don't pass a ref it will again throw that error, so innerRef becomes kind of a mandatory prop.

So inside Fade.js it should be something like

<Transition {...transitionProps} nodeRef={innerRef}>
      {(status) => {
        const isActive = status === 'entered';
        const classes = mapToCssModules(classNames(
          className,
          baseClass,
          isActive && baseClassActive
        ), cssModule);
        return (
          <Tag className={classes} {...childProps} ref={innerRef}>
            {children}
          </Tag>
        );
      }}
    </Transition>

Hi, Thanks for the fast reply, I tried to use your suggestions & follow this documentation. Unfortunately, nothing worked.

[illiteratewriter]

@aqeebimtiaz I'm not sure if I'll be doing a PR, kind of busy, but I took a jab at it. The issue is you have to add nodeRef to the Transition component.
So I tried it and it worked but the issue now is, if you don't pass a ref it will again throw that error, so innerRef becomes kind of a mandatory prop.
So inside Fade.js it should be something like

<Transition {...transitionProps} nodeRef={innerRef}>
      {(status) => {
        const isActive = status === 'entered';
        const classes = mapToCssModules(classNames(
          className,
          baseClass,
          isActive && baseClassActive
        ), cssModule);
        return (
          <Tag className={classes} {...childProps} ref={innerRef}>
            {children}
          </Tag>
        );
      }}
    </Transition>

Hi, Thanks for the fast reply, I tried to use your suggestions & follow this documentation. Unfortunately, nothing worked.

You have to pass an innerRef, if you don't pass it, it'll throw an error. So if you put something like

if(!innerRef) return

before the return <Transition> it will stop throwing that error. I think the Transition component is being called twice or something.

[dzmitry-kankalovich]

Should it be reopened?

I see the same issue with the following deps in my package.json:

    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "reactstrap": "^8.5.1"

[mikebridge]

Still getting the warning in reactstrap 8.9.0

[javierpal]

experiencing the same error in "reactstrap": "^8.10.1",