Usage of legacy context API

thetric commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

I'll submit a PR for it!

iegik commented 5 years ago

Duplicate of https://github.com/reactstrap/reactstrap/issues/1159

armenzg commented 4 years ago

@gergely-nagy any progress?

jonathan-richer commented 4 years ago

Same thing on Collapse:

sumanthratna commented 4 years ago

I got this warning with Tooltip, if that helps.

MA-Ahmad commented 4 years ago

I got this warning with Carousel.

iamandrewluca commented 4 years ago

Anyone interested in fixing this? Here Is a starting point https://github.com/reactstrap/reactstrap/pull/1866 One test is failing. I can't alocate more time.

kindyALkindy commented 4 years ago

I got this warning with Tooltip

rmlevangelio commented 4 years ago

Also happening in Fade component

ka-dev12 commented 4 years ago

I got this warning with Collapse navbar.

hauchongtang commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Same thing on Collapse:

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

SumitJadiya commented 4 years ago

Workaround: Remove strictMode from index.js

xreider commented 3 years ago

It is not resolved yet

iamandrewluca commented 3 years ago

@xreider do you want to help fixing it?

manhddse03539 commented 3 years ago

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

chauger commented 3 years ago

Alert is causing this issue for me

adamf1631 commented 3 years ago

switch to in index.js

iamandrewluca commented 3 years ago

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

d3ce1t commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

mazharvai007 commented 3 years ago

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

CleverOscar commented 3 years ago

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

dogukankutluay commented 3 years ago

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

thankx :)

musasahinkundakci commented 3 years ago

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

fsogutcen commented 3 years ago

Deleting "" 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 commented 3 years ago

İndex.js dosyasında "" 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 commented 3 years ago

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

Allakazan commented 3 years ago

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

bestguy commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

reactstrap / reactstrap