bitttttten

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

bitttttten

export default function transformer(file, api, options) {
  const j = api.jscodeshift;
  const root = j(file.source);

  const removeIfUnused = (importSpecifier, importDeclaration) => {
    const varName = importSpecifier.value.local.name;
    if (varName === "React") {
      return false;
    }

bitttttten

SPOTIFY_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxx
SPOTIFY_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxx
SPOTIFY_REFRESH_TOKEN=aaaaaaaaaaaaaaaa-bbbbbbbbbbbbbbbb-cccccccccccccccc-dddddddddddddddd-eeeeeeeeeeeeeeee

bitttttten

# CSS-in-JS

## Avoid facepaint, just use object syntax.

{
  color: `blue`,
  [mq.large]: {
    color: `red`,
  },
}

bitttttten

import { useEffect, useRef, useState } from 'react';

export default function AjaxToggle() {
  const [checked, setChecked] = useState(false);
  const firstRender = useRef(true);

  function syncWithServer(checked) {
    // ...
  }

bitttttten

image: node:7.7.1

stages:
  - test

before_script:
  - npm set progress=false
  - npm install > npm-install.log 2>&1

transaction testing:

bitttttten

const App = observer(({ store }) => {

    const { authenticated } = store 
    if (!authenticated ) {
        return <Login
          doLogin={store.login}
          postLogin={store.showHomepage}
        />
    }

bitttttten

module.exports = [
  {
    test: /\.jsx?$/,
    loader: 'babel',
  },
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader',
  },
  {

bitttttten

const webpack = require('webpack');

const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const loaders = require('./loaders.js')

module.exports = {
  entry: [
    require.resolve('webpack-dev-server/client') + '?/',

bitttttten

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const loaders = require('./loaders.js')

module.exports = {
  bail: true,
  target: 'web',
  entry: './app/client.js',