Purging TailwindCSS without ejecting Create-React-App

Jimmy Hung — Sat, 06 Jun 2020 08:33:32 +0000

What's Purging: Purging is a term for eliminating unused css code. It decreases css file size in production to help browser load files faster. You may hear the term, tree shaking , normally used in the context of eliminating unused libraries to decrease js bundle size. Purge is the same concept.

There's an official doc to configure purge feature, but it doesn't go into the setup in the create-react-app environment. So if you want a step by step guide on using purge feature without ejecting your create-react-app, keep reading:

TailwindCSS 1.4.0+ has added PurgeCSS natively, users can now directly configure tailwind.config.js to eliminate unused css code in production.

First, you need to create a tailwind.config.js file.
Second, add all the js or jsx files that contains Tailwindcss classes under content property.
You also have the option to add "whitelist" for a list of class Names to not be purged

module.exports = {
  purge: {
    content: [
      './src/*.js',
      './src/*.jsx'
    ],
    options: {
      whitelist: ['bg-color-500']
    }
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],

}

Once the config file is done, we need to run the build.

The only way to trigger purge is by setting NODE_ENV=production.
You can either export NODE_ENV=production in the console first or you can add it as a prefix before run script in package.json,

  "scripts": {
  "build:tailwind": "tailwindcss build src/index.css -o src/tailwind.css",
    "prestart":"npm run build:tailwind",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "prod:build": "NODE_ENV=production npm run build:tailwind react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject
  },

When you run npm run prod:build

first it will set production as NODE_ENV variable
run build:tailwind which then will trigger purge feature
and build your React app with the purged version of tailwind.css

Make sure in your index.js, you are referencing the compiled Tailwind css file instead of index.css.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './tailwind.css';
import * as serviceWorker from './serviceWorker';

For more questions DM me on Twitter @jmhungdev

React fetching data before rendering in 2020

Jimmy Hung — Sun, 10 May 2020 15:23:03 +0000

TLDR:
Do not fetch data in ComponentWillMount, do it in ComponentDidMount

There are few use cases in React project where you think you need to fetch data before rendering.

When you quickly google 'fetching data before first rendering in React', this is the first answer that popped up from StackOverlflow.

The most voted answer which suggests to do in componentWillMount(), a method fired off before render() in React lifecycle will be completely deprecated in React v17 (as of current writing on 5/10/2020 React is at version 16.13.1).

The mechanism of data lifecycle in React is complex enough that Facebook created Relay and Suspence in React 16.6 to address it. Read the second article to fully understand all use cases.

Here I present some issues that one think they need to fetch data before rendering, but it's not always the case.

It is best to keep your data fetching in componentDidMount()
(it's okay to have first renders with no data)

Issues:

The render gets compile error when data is not found
A child component render relies on data response from parent component
A child component that has heavy synchronous code relies on data response from parent component

Cases such as 1 and 2. You can implement an if statement to conditionally render based on if your data returned or not.


  if( dataIsReturned === true) {
    <RenderYourData/> 
  } else {
   <h1> Loading </h1>
  }

or you can simplify by using a ternary statement:

 {
  dataIsReturned ? <RenderYourData/> : <h1> Loading </h1>
 }

In case #3 usually comes from a design fault to start with. But because it is legacy code, take too much resource to refactor, etc. It Usually the problem is presented this way.


   //start of LegacyChild.js

   let initiator = init(data);

   // 5000 lines of code

   function LegacyChild () = {
     return initiator;
   }

   export LegacyChild;
   //end of LegacyChild.js




   //start of Parent.js

   import <LegacyChild/> from './LegacyChild';

   class Parent extends React.Component {

     componentDidMount(){
      fetch()
       .then(this.setState(data));
     }

     render() {
        <LagacyChild/>
     }
   }

   React.render(<Parent/>, document.getElementById('root');
   //end of Parent.js

Notice two things:

LegacyChild.js contains code outside of exported function, in this case there are 5000 lines of synchronous javascript code that is impossible to refactor and they depend on an external data source outside of legacyChild.js. The function LegacyChild's definition depends upon those 5000 lines of code, by leveraging the power of closure.
In Parent.js, LegacyChild.js is imported at the top of Parent.js, it will result in a compiled error because it reads LegacyChild.js which depends on the data response in Parent component.

In this case you can delay the import of LegacyChild.js by using dynamic import.

 class Parent extends React.Component {

     constructor() {

      this.state = {
        dataIsReturned : false ;
      }
      this.LegacyChild = null;
     } 

     componentDidMount(){
      fetch()
       .then(async (data) => {
          let obj = await import('./legacyChild');
          this.LegacyChild = obj.default;
          this.setState({dataIsReturn : true});
       ).catch( err => console.error(err);)
     }

     render() {
        if dataIsReturned ? <this.LegacyChild/> : <h1> Loading </h1>
     }
   }

Here we only changed the order of importing legacyChild.js, we still got to fetch the data inside componentDidMount().

Let me know other use case in the comment that I didn't mentioned where you think you are forced to fetch data before rendering.

Forem: Jimmy Hung

Purging TailwindCSS without ejecting Create-React-App

React fetching data before rendering in 2020