Legacy context API has been detected within a strict-mode tree.

[nicolashedoire]

• components: Transition
• reactstrap version ^8.4.1"
• react version ^16.13.1
• bootstrap version ^4.5.0

What is happening?

Warning: 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

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.

What should be happening?

I used the Alert component and I have the message described above

Steps to reproduce issue

Just create a page in React and use Alert component.

Error message in console

index.js:1 Warning: 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

Learn more about this warning here: https://fb.me/react-legacy-context
    in Transition (created by Fade)
    in Fade (created by Alert)
    in Alert (at signup.tsx:84)
    in div (at signup.tsx:75)
    in Signup (created by Context.Consumer)
    in Route (at App.tsx:21)
    in Switch (at App.tsx:16)
    in Routes (at App.tsx:32)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.tsx:31)
    in Provider (at App.tsx:30)
    in App (at src/index.tsx:10)
    in StrictMode (at src/index.tsx:9)
console.<computed> @ index.js:1
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
(anonymous) @ react-dom.development.js:11432
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushLegacyContextWarning @ react-dom.development.js:11418
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23109
commitRootImpl @ react-dom.development.js:22396
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
index.js:1 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)
    in Transition (created by Fade)
    in Fade (created by Alert)
    in Alert (at signup.tsx:84)
    in div (at signup.tsx:75)
    in Signup (created by Context.Consumer)
    in Route (at App.tsx:21)
    in Switch (at App.tsx:16)
    in Routes (at App.tsx:32)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.tsx:31)
    in Provider (at App.tsx:30)
    in App (at src/index.tsx:10)
    in StrictMode (at src/index.tsx:9)

Code

this is an example

import React, { useEffect } from 'react';
import { Alert } from 'reactstrap';
import styles from './styles.module.scss';
import { useHistory } from 'react-router-dom';

export default function SignupSuccess() {
    const history = useHistory();

    useEffect(() => {
        setTimeout(() => {
            history.push('/login');
        }, 3000)
    }, [history]);

    return (
        <div className={styles.signup}>
            <h1>Créer votre compte</h1>
            <div className={styles.dividerContainer}>
                <div className={styles.divider}></div>
            </div>
            <Alert color="success">
                Le compte à bien été créé !
         </Alert>
        </div>
    )
}

[iamandrewluca]

This is a known problem. Closing in favor of #1833