React18 Class Surgeon

#tool:memory read repository "react18-class-surgery-progress"

#tool:memory write repository "react18-class-surgery-progress" "completed:[filename]:[patterns-fixed]"

# Load audit report - this is your work order
cat .github/react18-audit.md | grep -A 100 "Source Files"

# Get all source files needing changes (from audit)
# Skip any already recorded in memory as completed
find src/ \( -name "*.js" -o -name "*.jsx" \) | grep -v "\.test\.\|\.spec\.\|__tests__" | sort

componentWillMount() {
  this.setState({ items: [], loading: false });
}

constructor(props) {
  super(props);
  this.state = { items: [], loading: false };
}

componentWillMount() {
  this.subscription = this.props.store.subscribe(this.handleChange);
  fetch('/api/data').then(r => r.json()).then(data => this.setState({ data }));
}

componentDidMount() {
  this.subscription = this.props.store.subscribe(this.handleChange);
  fetch('/api/data').then(r => r.json()).then(data => this.setState({ data }));
}

componentWillMount() {
  this.setState({ value: this.props.initialValue * 2 });
}

constructor(props) {
  super(props);
  this.state = { value: props.initialValue * 2 };
}

componentWillReceiveProps(nextProps) {
  if (nextProps.userId !== this.props.userId) {
    this.setState({ userData: null, loading: true });
    fetchUser(nextProps.userId).then(data => this.setState({ userData: data, loading: false }));
  }
}

componentDidUpdate(prevProps) {
  if (prevProps.userId !== this.props.userId) {
    this.setState({ userData: null, loading: true });
    fetchUser(this.props.userId).then(data => this.setState({ userData: data, loading: false }));
  }
}

componentWillReceiveProps(nextProps) {
  if (nextProps.items !== this.props.items) {
    this.setState({ sortedItems: sortItems(nextProps.items) });
  }
}

static getDerivedStateFromProps(props, state) {
  if (props.items !== state.prevItems) {
    return {
      sortedItems: sortItems(props.items),
      prevItems: props.items,
    };
  }
  return null;
}
// Add prevItems to constructor state:
// this.state = { ..., prevItems: props.items }

componentWillUpdate(nextProps, nextState) {
  if (nextProps.listLength > this.props.listLength) {
    this.scrollHeight = this.listRef.current.scrollHeight;
  }
}
componentDidUpdate(prevProps) {
  if (prevProps.listLength < this.props.listLength) {
    this.listRef.current.scrollTop += this.listRef.current.scrollHeight - this.scrollHeight;
  }
}

getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.listLength < this.props.listLength) {
    return this.listRef.current.scrollHeight;
  }
  return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot !== null) {
    this.listRef.current.scrollTop += this.listRef.current.scrollHeight - snapshot;
  }
}

componentWillUpdate(nextProps) {
  if (nextProps.query !== this.props.query) {
    this.cancelCurrentRequest();
  }
}

componentDidUpdate(prevProps) {
  if (prevProps.query !== this.props.query) {
    this.cancelCurrentRequest();
    this.startNewRequest(this.props.query);
  }
}

class ThemeProvider extends React.Component {
  static childContextTypes = {
    theme: PropTypes.string,
    toggleTheme: PropTypes.func,
  };
  getChildContext() {
    return { theme: this.state.theme, toggleTheme: this.toggleTheme };
  }
  render() { return this.props.children; }
}

// Create the context (in a separate file: ThemeContext.js)
export const ThemeContext = React.createContext({ theme: 'light', toggleTheme: () => {} });

class ThemeProvider extends React.Component {
  render() {
    return (
      <ThemeContext value={{ theme: this.state.theme, toggleTheme: this.toggleTheme }}>
        {this.props.children}
      </ThemeContext>
    );
  }
}

class ThemedButton extends React.Component {
  static contextTypes = { theme: PropTypes.string };
  render() { return <button className={this.context.theme}>{this.props.label}</button>; }
}

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() { return <button className={this.context.theme}>{this.props.label}</button>; }
}

render() {
  return <input ref="myInput" />;
}
handleFocus() {
  this.refs.myInput.focus();
}

constructor(props) {
  super(props);
  this.myInputRef = React.createRef();
}
render() {
  return <input ref={this.myInputRef} />;
}
handleFocus() {
  this.myInputRef.current.focus();
}

import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
  handleClick() {
    const node = ReactDOM.findDOMNode(this);
    node.scrollIntoView();
  }
  render() { return <div>...</div>; }
}

class MyComponent extends React.Component {
  containerRef = React.createRef();
  handleClick() {
    this.containerRef.current.scrollIntoView();
  }
  render() { return <div ref={this.containerRef}>...</div>; }
}

import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

import { createRoot } from 'react-dom/client';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

echo "=== UNSAFE lifecycle check ==="
grep -rn "componentWillMount\b\|componentWillReceiveProps\b\|componentWillUpdate\b" \
  src/ --include="*.js" --include="*.jsx" | grep -v "UNSAFE_\|\.test\." | wc -l
echo "above should be 0"

echo "=== Legacy context check ==="
grep -rn "contextTypes\s*=\|childContextTypes\|getChildContext" \
  src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | wc -l
echo "above should be 0"

echo "=== String refs check ==="
grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | wc -l
echo "above should be 0"

echo "=== ReactDOM.render check ==="
grep -rn "ReactDOM\.render\s*(" src/ --include="*.js" --include="*.jsx" | wc -l
echo "above should be 0"

#tool:memory write repository "react18-class-surgery-progress" "complete:all-deprecated-count:0"