adamhenson

import React from 'react';
import ReactChartkick, { LineChart } from 'react-chartkick';
import Chart from 'chart.js';

ReactChartkick.addAdapter(Chart);

export default props => (<LineChart {...props} />);

adamhenson

import loadable from '@loadable/component';

export default loadable(() => import(
  /* webpackChunkName: "ApiVisualizationChart" */
  './ApiVisualizationChart'
), { ssr: false });

adamhenson

import loadable from '@loadable/component';

export default loadable(() => import(
  /* webpackChunkName: "Page" */
  './Page'
));

adamhenson

import webpack from 'webpack';
import path from 'path';

const common = {
  // imagine your configuration here
};

const plugins = [
  // imagine your Babel plugins here
];

adamhenson

import React from 'react';
import { render } from 'react-dom';
import { loadableReady } from '@loadable/component';
import App from './somewhere/out/there/App';

loadableReady(() => render(
  <App />,
  document.getElementById('root'),
));

adamhenson

/* global LOADABLE_STATS: true */
import React from 'react';
import { renderToString } from 'react-dom/server';
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
import { Provider } from './somewhere/out/there/Provider';
import App from './somewhere/out/there/App';

const extractor = new ChunkExtractor({
  statsFile: LOADABLE_STATS,
});

adamhenson

post-deploy:
  docker:
    - image: circleci/buildpack-deps:jessie-curl
  steps:
    - run:
        name: Run a performance audit
        command: |
          curl -X POST "https://www.foo.software/v1/queue/items" --insecure \
            -H "accept: application/json" -H "Content-Type: application/json" \
            -d "{ \"pages\": \"$FOO_PAGE_TOKENS\", \"tag\": \"Build %23$CIRCLE_BUILD_NUM\" }"

adamhenson

import React, { useEffect, useRef, useState } from 'react';
import { debounce } from 'throttle-debounce';

const DEBOUNCE_MS = 200;

export default () => {
  const [value, setValue] = useState('');
  const [finalValue, setFinalValue] = useState('');

  // we use `useRef` so that we don't redefine the function on every update

adamhenson

import React, { memo } from 'react';

const EmojiImages = ({ list }) => {
  return (
    <>
      {list.emojis.map(current => (
        <img alt="emoji" src={current} key={current} />
      ))}
    </>
  );

adamhenson

import React, { useMemo } from 'react';
import EmojiImages from './EmojiImages';
import emojiList from './emojis.json';
import styles from './Emojis.module.css';

// all de-duped emojis
const getAllEmojis = emojis => ({
  id: Date.now(),
  emojis: Array.from(new Set(Object.values(emojis)))
});