React/19/Remove Legacy Context

1.0.0Last update Jul 24, 2024

Codemod verified

Regularly tested and maintained by our engineers and codemod expert community.

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