Home Code Introducing Hot Reloading · React Native

Introducing Hot Reloading · React Native

by TM

React Native aims to provide the best possible developer experience by minimizing the time it takes to see changes after saving a file. They have achieved this through three main features. First, they use JavaScript as the language, which has a short compilation cycle time. Second, they implemented a tool called Packager that transforms various types of files into JavaScript that the VM can understand. This tool keeps intermediate state in memory for fast incremental changes. Third, they built a feature called Live Reload that automatically reloads the app on save.

However, the current bottleneck for developers is not the reload time, but the loss of app state. To address this, React Native introduced Hot Reloading. Hot Reloading allows developers to make changes to their code and inject new versions of the files at runtime without losing their app state. It is built on top of a feature called Hot Module Replacement (HMR), which was implemented inside React Native Packager. HMR watches for file changes and sends updates to a runtime included in the app.

Hot Reloading is not a perfect solution due to JavaScript’s statefulness, but it works well for most common use cases. It can be enabled in React Native version 0.22 and onwards. The implementation of Hot Reloading is based on Webpack’s HMR API and extends React Native’s module system with a hot object. React components and Redux stores can also be hot reloaded using specialized techniques.

Source link

You may also like

Leave a Comment

Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?
-
00:00
00:00
Update Required Flash plugin
-
00:00
00:00