React Native – Hot Reloading vs Live Reloading

React Native Lesson 3 (Hot Reloading vs Live Reloading)

Are you working on a Live React Native Application? so you must have seen 2 developers options given by React Native to us for Making our work easier. these 2 options are –

  1. Hot Reloading
  2. Live Reloading

These Options are provided to developers to make their work easy. as with these options, we don’t need to reload our app manually to see changes we have just made. so let’s just jump into details.

so, first of all, we must know what these 2 words mean.

  • Live Realoding – Live Reloading is a feature in React Native Application Development which when enabled watches for our changes we are making in our files. and whenever we click “ctrl + s” to save our document it just read our files, compiles these files and provide new files to the server which then reloads our application automatically so that we can see our changes. but the only drawback we can see in Live Reloading is that it Reloads our application from starting point again and again. so if suppose we are working on an application and I am deep inside some pages or screens then I need to go again there to see my changes works or not. it may be annoying usually whenever we are tweaking our UI part because to see ever color changes we need to go to that screen by following all procedures/ clicking on all screens which comes before that change screen. so to overcome this problem Facebook include HMR Functionality in React Native Architecture to make our life easier when developing React Native applications. now let’s see what Hot Reloading can do for us!
  • Hot Reloading – Hot Reloading is introduced after Live Reloading in React Native Application Development Environment. so basically Hot Reloading is based on HMR (Hot Module Replacement) which was first introduced by WebPack we commonly use in React JS Applications to make Changes loads on run time. so what basically this HMR does in React Native?

HMR in React Native Uses a watcher (we can think of this as a person), watcher watches our app continuously and look out for changes we are making in our application. as soon as we press“ctrl + s” to save our files it just read our files, Compiles these files, Transforms these files into simple JavaScript and then gives these files to HMR intermediator which just Insert our new files while the server is running. so it prevents App Reloading and we can see our changes live in front of our eyes. like it’s a magic trick. but actually, it’s not it’s a quality thing to make our life easier while Developing React Native Applications.

To better understand the basic difference between Live Realoding and Hot Reloading you can see our video on this. as a video is much better than Reading Thousands of words.

Please don’t forget to Like and Subscribe our channel we will be making more videos on React Native so stay tuned there.


So that’s all about Live Reloading vs Hot Reloading. if you have any doubt regarding this you can comment below I will answer all your queries.


Happy Coding

You may also like...

3 Responses

  1. Anonymous says:

    Hi! I’m at work browsing your blog from my new iphone!

    Just wanted to say I love reading through your blog
    and look forward to all your posts! Keep up the outstanding
    work!

  1. August 19, 2017

    […] Applications build using React Native are same as native applications build using Objective-C or Java. React Native comes with several features of React JS like Hot Reloading. in short terms Hot Reloading keeps your app running in current state and inject new versions of files on VM that were edited by us seconds ago. React Native Hot Reloading Helps developers to avoid reloading app every time after making a change which may take a long time totally depending on your application size and state. to Read More on React Native Hot Reloading or want to know about the difference between Live Remoading and Hot Reloading Click Here. Live Reloading vs Hot Reloading […]

Leave a Reply to Anonymous Cancel reply

Your email address will not be published. Required fields are marked *