React/19/Remove Legacy Context

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