React/19/Remove Legacy Context

Made for

React

Last update

Jul 24, 2024

Removes legacy context methods childContextTypes and getChildContext from react class component. Wraps rendered children with Context.

Example

Before

import PropTypes from 'prop-types';
import React from 'react';

class Parent extends React.Component {
  static childContextTypes = {
    foo: PropTypes.string.isRequired,
  };

  getChildContext() {
    return { foo: 'bar' };
  }

  render() {
    return <Child />;
  }
}

After

import PropTypes from 'prop-types';
import React from 'react';

const Context = React.createContext();

class Parent extends React.Component {
  render() {
    return <Context value={{ foo: 'bar' }}><Child /></Context>;
  }
}

Removes legacy context methods childContextTypes and getChildContext from react class component. Wraps rendered children with Context.

Example

Before

import PropTypes from 'prop-types';
import React from 'react';

class Parent extends React.Component {
  static childContextTypes = {
    foo: PropTypes.string.isRequired,
  };

  getChildContext() {
    return { foo: 'bar' };
  }

  render() {
    return <Child />;
  }
}

After

import PropTypes from 'prop-types';
import React from 'react';

const Context = React.createContext();

class Parent extends React.Component {
  render() {
    return <Context value={{ foo: 'bar' }}><Child /></Context>;
  }
}

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now