ajcrites

export class TimesTableApp extends React.Component {
  changeValue = valueName => value => {
    if (isFunction(value)) {
      this.setState({ [valueName]: value(this.state[valueName]) });
    else {
      this.setState({ [valueName]: value });
    }
  };

  ...

ajcrites

export const TimesTableControls = () => {
  const playTimer = useRef(null);
  const { timesTable, setTimesTable } = useContext(TimesTableContext);

  const pause = () => clearInterval(playTimer.current);

  const play = () => {
    playTimer.current = setInterval(() => {
      setTimesTable(timesTable + 0.1);
    }, 100);

ajcrites

export class TimesTableApp extends React.Component {
  changeValue = valueName => value => {
    this.setState({ [valueName]: value });
  };

  state = {
    pointCount: 10,
    timesTable: 2,
    lineColor: '#000000',

ajcrites

export interface TimesTableContextProps {
  pointCount: number;
  timesTable: number;
  lineColor: string;

  setPointCount: value => void;
  setTimesTable: value => void;
  setLineColor: value => void;
}

ajcrites

export const TimesTable = props => {
  ...

  useEffect(() => {
    redraw();
    window.addEventListener('resize', redraw);
    return () => window.removeEventListener('resize', redraw);
  }, []);

  ...

ajcrites

export const TimesTable = props => {
  const [, forceUpdate] = useState(null);
  
  const redraw = () => {
    const canvas = canvasRef.current;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    forceUpdate(true);
  };

ajcrites

export const TimesTable = props => {
  const canvasRef = useRef(null);

  const redraw = () => {
    const canvas = canvasRef.current;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  };

  let viz;

ajcrites

export class TimesTable extends React.Component<{ timesTable, pointCount, lineColor }> {
  canvasRef = React.createRef();
  
  redraw = () => {
    this.canvasRef.current.height = window.innerHeight;
    this.canvasRef.current.width = window.innerWidth;
    this.forceUpdate();
  };
  
  componentDidMount() {

ajcrites

export class About extends React.Component {
  contentRef = React.createRef();
  async animate(show) {
    ...
    this.setState({ show });
  }
  render() {
    return this.state.show ?
      <AboutContent ref={this.contentRef} /> :
      null;

ajcrites

export class About extends React.Component {
  ...
  contentRef = React.createRef();

  render() {
    return <AboutContent ref={this.contentRef} />;
  }
}