Usage of legacy context API

[thetric]

• components: TabPane, Dropdown(,Item,Menu,Toggle), Manager, PopperTargetHelper, CarousellItem (see https://github.com/reactstrap/reactstrap/search?q=contextTypes&unscoped_q=contextTypes)
• reactstrap version 6.5.0
• import method: es
• react version 16.7.0
• bootstrap version 4.2.1

What is happening?

When using <React.StrictMode> Reacts advises against using the legacy context API:

Warning: Legacy context API has been detected within a strict-mode tree: 
    in StrictMode (at App.tsx:27)
    in App (at src/index.tsx:7)

Please update the following components: Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Manager

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

From https://reactjs.org/docs/context.html#legacy-api:

React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React version. [...]

What should be happening?

Reactstrap should be using the new Context API.

Steps to reproduce issue

Wrap an example app using some of the components mentions at the beginning in React.StrictMode and start it in development mode.

Code

https://stackblitz.com/edit/reactstrap-saxswj?file=Example.js

[thetric]

The Modal component uses deprecated lifecycle hooks:

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

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

[gergely-nagy]

I'll submit a PR for it!

[iegik]

Duplicate of #1159

[armenzg]

@gergely-nagy any progress?

[jonathan-richer]

Same thing on Collapse:

[sumanthratna]

I got this warning with Tooltip, if that helps.

[MA-Ahmad]

I got this warning with Carousel.

[iamandrewluca]

Anyone interested in fixing this?
Here Is a starting point #1866
One test is failing. I can't alocate more time.

[kindyALkindy]

I got this warning with Tooltip

[rmlevangelio]

Also happening in Fade component

[ka-dev12]

I got this warning with Collapse navbar.

[hauchongtang]

Got this warning in
in Transition (created by Collapse) in Collapse (at AppNavbar.js:24) in div (created by Container) in Container (at AppNavbar.js:21) in nav (created by Navbar) in Navbar (at AppNavbar.js:20) in div (at AppNavbar.js:19) in AppNavbar (at App.js:10) in div (at App.js:9) in App (at src/index.js:8) in StrictMode (at src/index.js:7)

[iamandrewluca]

We know about this issue.

Legacy context is used only in Carousel right now, no other places.

All other warnings come from components that use react-transition-group, if you enable StrictMode, because it uses deprecated findDOMNode API

There is no more reasons to post about it.

[vishaloswal]

Same thing on Collapse:

Even I get similar warning, is there a work around or fix for this?

[SumitJadiya]

Workaround:
Remove strictMode from index.js

[xreider]

It is not resolved yet

[iamandrewluca]

@xreider do you want to help fixing it?

[manhddse03539]

In index.js change React.StrictMode toReact.Fragment @@

[chauger]

Alert is causing this issue for me

[adamf1631]

switch to <React.Fragment> in index.js

[iamandrewluca]

React.Fragment is not an alternative for React.StrictMode 🙂

[d3ce1t]

@iamandrewluca CMIIW the problem comes from react-transition-groups (as you said). Reactstrap is using that library at version 2.9.0. But last version is 4.4.1. Would it still happen in a more recent version? What's blocking reactstrap from updating?

[thetric]

My guess is that the author wants to support React < 16.3 which has no the new Context API. But react-transition-groups@3 requires the new Context API

[iamandrewluca]

We don't have time to allocate for this. And because this will be a breaking change, we thought of making multiple breaking changes at a time. But for that we have to allocate a lot of time, which we don't have.

[adamf1631]

Yes, I found this warning as well, if you boys have any suggestions please step up and suggest. Thanks!

[mazharvai007]

Same problem I'm facing when using Collapse from reactstrap. Is there any solution? Thanks

[CleverOscar]

Has this issue really been on for more than two years? I keep getting an error when using the Carousel component

[dogukankutluay]

İndex.js değişikliklerinde React.StrictModeiçin React.Fragment@@

thankx :)

[musasahinkundakci]

React.Fragment if you are beginner you can use it temporily :)

[fsogutcen]

Deleting "<React.Fragment>" in the index.js file may also be effective.
I chose to use it this way to solve it; " ReactDOM.render(,document.getElementById('root')); "

But since I'm newbie to React, I'm not sure how the right step is

[dogukankutluay]

İndex.js dosyasında "<React.Fragment>" i silmek de etkili olabilir.
Bunu çözmek için bu şekilde kullanmayı seçtim; "ReactDOM.render (, document.getElementById ('root'));"

Ama React için acemi olduğum için doğru adımın nasıl olduğundan emin değilim

selamlar , direkt olarak bütün dosyalar için fragment verilmesi en mantıklısı. İhtimale dayalı bir kod aslında. Araştırdım biraz

[sbaechler]

@iamandrewluca Can the removal of the legacy APIs be part of the 9.0 release?

[Allakazan]

This issue still are going on ? Isn't unsafe and dangerous to disable StrictMode ?

[bestguy]

@sbaechler , @Allakazan yes we have an opportunity now with the upcoming 9.x release.
However FYI there are no full time maintainers so any PRs for this off bootstrap5 branch would be appreciated.
(A few of us are helping out to get Reactstrap 9.x Bootstrap 5.x stable and released.)

[bestguy]

I've updated rtg to v4 in linked PR, but need to test if addresses everything in this issue. I don't see direct usages of old context API, but catching up here..

Carousel looks like still uses legacy context, but the RTG bump will help in most cases. If Carousel can be updated easily before 9.x release we can do it, but seems could also be a point fix after that too. PRs are welcome: https://github.com/reactstrap/reactstrap/blob/master/src/Carousel.js#L27

[bestguy]

Also updated Carousel context issue in #2268
We'll do another pre release this week for you all to try out.