The React Component Lifecycle

Coming from the ASP .NET background the idea of a page life cycle is pretty well known to me. I was relieved to discover that React components follow a similar model: The Component Lifecycle. Briefly, these are defined methods that are always called during the life of a component and can be overridden with custom logic.

The similarities lie in the idea that there are specific events for the creation, use and termination of a Page or Component. Because ASP .NET is a server side rendered page it has a more complicated life cycle. If you want to compare take a look at this ASP .NET Page Life Cycle Overview.

The React Component is simplified and as such can be broken down into three phases:

  • Creation and initial rendering – When a component is used it will need to be instantiated and rendered on the page. For this there are several methods which are executed in the following order:
    • constructor(): If you’re familiar with object oriented programming this is the method that instantiates your component. Useful for setting up initial state of the component and binding your call backs.
    • componentWillMount(): This is called immediately before mounting the component and rendering. This is useful because any logic in this method won’t trigger a re-render.
    • render(): This is the real heart of a component where the actual output is specified (what will show up on the screen). This method is required. Also note that the render function should not modify state directly.
    • componentDidMount(): Invoked immediately after the component is mounted. Any updates in this method will cause a re-render. This is a good location to fetch data from a remote source because the component will have rendered before the data is fetched.
  • Using and updating the component – Once the component is mounted it will be interacted with. This is where the user gets a chance to use the component. The following methods are executed in order when the component is being re-rendered:
    • componentWillReceiveProps(): This is called when the component props change (maybe being reset). This is not called during initial mounting and will only be called if some props update.
    • shouldComponentUpdate(): React’s default behavior is to re-render on any state change. This method can be used to override that if there’s cases when an update shouldn’t cause the component to re-render.
    • componentWillUpdate(): Similar to componentWillMount() this can be used for perparing before a re-render. Keep in mind that you can’t call this.setState() within this method.
    • render(): Same as above. This is what outputs the component. All updates have been captured and pushed to the screen.
    • componentDidUpdate(): Called immediately after the re-render. Similar to componentDidMount() and can be used for updating DOM elements or calling network resources.
  • Disposing the component – At the end of the lifecycle the component is removed from the DOM. Here we have one useful method:
    • componentWillUnmount(): This is called immediately before the component is unmounted and destroyed. Us this to clean up anything outstanding (network requests, DOM elements, timers etc.).

 

As you get into more complicated use cases your components will inevitably require the use of these lifecycle methods to handle complicated logic, data requirements and interactivity. Getting to know them will help in understanding React better.

Creat-React-App on Azure

The create-react-app boilerplate is pretty good. It’s easy to get up and running in react with this package. It also provides useful tools for compiling the application into a production ready deployment.

Unfortunately this doesn’t fit perfectly into the Azure pipeline because Microsoft wants to build things on the server. The Azure platform is great and they’ve got good support for Node.js apps. But with the create-react-app in particular a few steps need to be completed in order to get this up and running properly. There’s documentation for this out there but I ran into a couple small snags along the way.

  • Obviously you want to have a create-react-app set up in a repository.  You can clone the project from this Github Repo. Read the documentation on setting it up
  • You’ll need custom deployment scripts for this app. Install azure-cli then use

    azure site deploymentscript --node --sitePath build

    where “build” is the output directory from the npm run build command

  • The deploy.cmd must be modified to properly build the app then copy it over to the actual wwwroot. This Stack Overflow Answer helped point me in the right direction

kudu

  • In my case I’m doing “npm install” then “npm run build” and finally using the kudu sync to copy the compiled app to the wwwroot folder.
  • Connect your Azure web app to your repository. Microsoft provides support for a variety of source control repos for this. It’s fairly straightforward and well documented at here
  • Properly set the node version: I had some problems where my node and npm versions were incorrect. The version can be set in the package.json file or the application settings. This blog post explains both.
  • I needed to install the create-react-app and babel packages globally to handle proper transpiling. Log into Kudu from the Azure portal and run the npm install -g commands

If all goes well doing a commit and push to remote will kick off a build on the azure web app. From there the custom script will kick in and build the app using the create-react-app build script. Finally it should copy this to the wwwroot folder leaving you with a clean website.

The nice thing with the custom script is I’ll be able to get my unit tests running in there making it all automatic. The deploy will fail if the tests fail leaving the environment untouched. I’m excited to get this working for a very simple and streamlined CI pipeline.

 

Another useful post by Jeff Wilcox describing setting up custom builds on an Azure web app