pomber

import React from "react"
import { globalHistory } from "@reach/router"
import Zoom from "./Zoom"
import Slide from "./Slide"
import Pre from "./Pre"
import Clock from "./Clock"

// based on https://github.com/streamich/react-use/blob/master/src/useSpring.ts
import { SpringSystem } from "rebound"
import { useState, useEffect } from "react"

pomber

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

pomber

function lazyWithPreload(factory) {
  const Component = React.lazy(factory);
  Component.preload = factory;
  return Component;
}

const StockChart = lazyWithPreload(() => import("./StockChart"));

// somewhere in your component 
...

pomber

class App extends React.Component {
  state = {
    selectedStock: null
  };
  render() {
    const { stocks } = this.props;
    const { selectedStock } = this.state;
    return (
      <React.Suspense fallback={<div>Loading...</div>}>
        <StockTable

pomber

const stockChartPromise = import("./StockChart");
const StockChart = React.lazy(() => stockChartPromise);

pomber

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

pomber

import React from "react";
import StockTable from "./StockTable";

import StockChart from "./StockChart";

class App extends React.Component {
  state = {
    selectedStock: null
  };
  render() {

pomber

import React from "react";
import ReactDOM from "react-dom";
import fetchWithCache from "./cache";

function Post({ postId }) {
  const post = fetchWithCache(
    "https://jsonplaceholder.typicode.com/posts/" + postId
  );
  return (
    <div>

pomber

import React from "react";
import ReactDOM from "react-dom";

class Post extends React.Component {
  state = {
    loading: true,
    post: null
  };
  componentDidMount() {
    const { postId } = this.props;

pomber

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}