Understanding Code Splitting in React
Tags: react, javascript, webdev, beginners
Published: 2020-10-16 05:59:00

Code splitting is one of the best thing on every programming aspect that you use. It is the process of breaking a larger number of codes into smaller blocks.

##Why Code Splitting ? 
  Code spliting can always be useful , It is 
   --> *easy to abstract*
   --> *easy to debug*
   --> *easy to unit test*
   --> *easy to reuse and avoid duplication of code*

##How it can be achived in react ? 
 If you're using of **NextJs** you might be aware of it's one of the advantage that nextjs provides code-splitting out the box. 

 So is this not possible in react? Definitely possible why not? with a minimal modification we can achieve the thing provided in nextjs in react too. 

let us take a submit function which validates the submitted values as a valid email or not 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nzl2duoa9ihxgibl06uy.png)

works fine ok now I need to check the given value as email or not in other place of the application! What will you do ? 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e9n1iimc74lzgiigw4q9.png)

works fine no issues ! but wait is this a standard way to do same code is written in two places if that looks ok for you , but your code reviewer will catch you   how we can reuse this ? 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/surggslfh1frj7c3ae4z.png)

looks fine `isEmail` is the common function that holds all the logic for checking a given value in email or not . 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rpk0lty68xy6h5x2rc06.png)

this is great now you can reuse this logic anywhere and your code reviewer fill make a ✅ for your code

*This is a common behaviour and this how many of us use what's new here* ? ? ok if your using like above that's fine keep doing along with the following , else do both

let me explain the things with the a bot that i've made for the HR's . This app generates reply messages for the hr that is generates using some of the commonly used keywords . 
`generateReplyMessage` is the common helper function that can be used to generate messages.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/twxn1889kawph1bfjfaj.png)
This is how we use that function
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jogvqdd0knnnfvolwwvk.png)

so seems normal like the previous one ! chill here comes the intresting part .

###Why it is important ? 
_believe it or not a greater MNC rejected me offer by telling Code Splitting as a reason!! even though I did some but not fully_ :cry: 
not because of that it can be a life saver when your application size increases by a large amount.

###Question bytes

*Have you ever had a question when will the imported files will be called?*
--> *option A : During the imported function/Component execution*  
--> *option B : Before parent component render* 

if your answer is A then make a console and check you'll get it . Even before the parent render the import statements are loaded !

Oh oh !! then how can I load the files only when it needs ??

##React Provides

React provides a better and easy way to achieve this.You can achieve this by just modifying the import like 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vzv3hupvumiex9codleg.png)

by doing so the `generateReplyMessage` will be imported from the `helper` functions only during the call of `generateReplyMessage` uhhh this is how it should execute. By this method we can achieve the **Code-Splitting** in react. 

Wait how it will be evidenced in browser ? 

**_with code splitting_**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8i57uuklzpevfc3js268.png)

_you can see two chunk files are loaded second one is loaded only when the `generateReplyMessage` is called._

**_with out code splitting_**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x3byyvq6dqmoboer9n4h.png)

_this will have a single chunk as a whole_ 

this shows some splitting process has been done .That's it !

Check this offical [docs](https://reactjs.org/docs/code-splitting.html)

Get the code [here](https://github.com/karthick3018/my-bot) 

 ------------
 *check my dev projects on* [github](https://github.com/karthick3018)
 *Follow me on* [twitter](https://twitter.com/Karthick_R_30)
*connect with me on* [linkedIn](https://www.linkedin.com/in/karthick-raja-dev/)
*check my styles on* [codepen](https://codepen.io/karthick30)

-------------
*Thanks for your time*
*Happy coding ! Keep Sharing*
*Stay Safe*