import React from 'react';
import Chart from './Chart';

function App() {
  return (
    <div>
      <Chart />
    </div>
  )
}

import React, { lazy, Suspense } from 'react';
const Chart = lazy(() => import('./Chart'));

function App() {
  return (
    <Suspense fallback={<SomeLoader />}> {/* Anywhere up the tree, can have many */}
      <div>
        <Chart />
      </div>
    </Suspense>
  )
}

function MyComponent(props) {
  /* only rerenders if props change */
};

export default React.memo(MyComponent)

const Query = ({ children, ...props }) => children(useQuery(props))

function useMounted() {
  const ref = useRef(false);
  useEffect(() => {
    ref.current = true;
    return () => (ref.current = false);
  }, []);
  return ref.current;
}

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value
  });
  return ref.current;
}

function useEffectAfterMount(cb, dependencies) {
  const justMounted = useRef(true);
  useEffect(
    () => {
      if (!justMounted.current) {
        return cb();
      }
      justMounted.current.false
    },
    dependencies
  )
}