how to fix Legacy context API has been detected within a strict-mode tree on react js

Question

I was try using react.strict mode but the warning still appear on console.log chrome browser It's so anoying for me

the message like this: The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

import React, { Component } from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';
import axios from 'axios';
import Navigation from './partials/navbar'

class Index extends Component {
    state = { 
        list: []
     }

    componentDidMount = () => {
        axios.get('http://localhost:4230/').then(res => console.log(res.data) ).catch( err => console.log())
    }

    render() { 
        return (
        <React.Fragment>
            <Navigation />
            <h1 className="display-4 text-center mt-5" style={{fontSize: '3vw'}}>Welcome Admin</h1>
            <div className="container">
                <ListGroup>
                    <ListGroupItem active>List employee Name</ListGroupItem>
                    <ListGroupItem tag="a" href="#" action>Hello this is danill</ListGroupItem>
                    <ListGroupItem tag="a" href="#" action>daddsss</ListGroupItem>
                    <ListGroupItem tag="a" href="#" action>dsadsadda</ListGroupItem>
                </ListGroup>
            </div>
        </React.Fragment> 
        );
    }
}
 
export default Index;

Answer 1

Your using Legacy Context API https://reactjs.org/docs/legacy-context.html

use new Context API instead see https://reactjs.org/docs/context.html

Answer 2

For me, this error occurred when I tried a listener for graphQl subscriptions using the following:

• client-side: import { ApolloProvider } from "react-apollo";
• server-side: const { SubscriptionServer } = require("subscriptions-transport-ws");

so I went about changing my front-end from react-apollo to the new @apollo/client ;

old graphQL client side with react-apollo

import React from "react";
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";

import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";
import { split } from "apollo-link";

import { ApolloProvider } from "react-apollo";
import SubComp from "./Subscriptions";

/**
 * uses `react-apollo` !!!
 */

const LOCAL_ENDPOINT = "localhost:4000/graphql";

const PubSub = (props) => {
  const { refetchCall = () => {} } = props;

  const httpLink = new HttpLink({
    uri: `http://${LOCAL_ENDPOINT}`,
  });
  const wsLink = new WebSocketLink({
    uri: `ws://${LOCAL_ENDPOINT}`,
    options: {
      reconnect: true,
    },
  });
  const link = split(
    // split based on operation type
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query);
      return kind === "OperationDefinition" && operation === "subscription";
    },
    wsLink,
    httpLink
  );
  const client = new ApolloClient({
    link,
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <SubComp refetchNow={refetchCall} />
    </ApolloProvider>
  );
};

export default PubSub;

new graphQL client side with @apollo/client

import React from "react";
import {
  split,
  HttpLink,
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
} from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
import { SubscriptionViaHook } from "./subscriptions";

import { SubscriptionClient } from "subscriptions-transport-ws";
import { WebSocketLink } from "@apollo/client/link/ws";

/**
 * wants to avoid using `react-apollo` !!!
 */

const LOCAL_ENDPOINT = "localhost:4000/graphql";

const PubSubWHooks = (props) => {
  const httpLink = new HttpLink({
    uri: `http://${LOCAL_ENDPOINT}`,
  });

  const wsLink = new WebSocketLink(
    new SubscriptionClient(`ws://${LOCAL_ENDPOINT}`, {
      options: {
        reconnect: true,
      },
    })
  );

  const splitLink = split(
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query);
      return kind === "OperationDefinition" && operation === "subscription";
    },
    wsLink,
    httpLink
  );

  const client = new ApolloClient({
    link: splitLink,
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <SubscriptionViaHook />
    </ApolloProvider>
  );
};

export default PubSubWHooks;