DEV Community: KaRthick

Common React performance mistakes 💣

KaRthick — Wed, 20 Oct 2021 13:04:15 +0000

Performance optimisation is one of the challenges of a software developer.

It is a big burden when you start to optimise the application after months | years of development. No other go actually we need to somehow visit the code back to optimising the application performance wise.

But the burden can be minimized by following some performance optimization & best practices while writing the code.

At the same time optimization is a "two edged sword" .

Performance-related changes applied incorrectly can even harm performance.

Here I'll explain some things that I've seen and faced in react applications.

React.memo

If you're using react, you'll be aware of this particular HOC. It is mainly used to memoize the whole component.

this is a memoized child component that receives handleOnClick as the props . So as per the memoization logic this component should re-render only if any of the props changes rit ?? that's how React.memo works but wait let's create a parent component and check.

perfect so during every onClick trigger in the child component parent state value changes but the props received in the child didn't change, so child component won't re-render since we memoized.

But wait here's where the real issue comes in if you try the above code in any editor or there's a codesandbox below you can see that the React.memo is broken!, child component will re-render for every state change even though the prop is same.

Is something wrong with the React.memo 🤯 ?

Nope ! every time when the parent component re-renders a new instance of the handleOnClick function is created. Hence is leads to break the memoization and re-renders the child component every time.

So, If you just wrap the child component with React.memo there's no assurance that I will just memoize and work.

But cool hook useCallback can come in to help you out ! . Wrap the handleClick function inside the useCallback hook and try the same code React.memo will just work as expected.

but the above one is also overratted I would say , will explain this why later in the article
play here

Don't use the React.memo in a component that props is frequently changing, it will result to an extensive calculations.

Inline functions

return (
 <div>
  <button onClick={()=>setState(state+1)}>Increment</button>
 </div>
 )

whenever a developer caught this code everyone (including myself 🤩) update the following code and will be like !

const handleIncrement = () => setState(state+1);
return (
 <div>
  <button onClick={handleIncrement}>Increment</button>
 </div>
 )

yeah I've fixed a dam performance issue I going to get 100 performance score in lighthouse.

but inline is acutally fine in this case !! if you have a concern try working with this

useEffect(()=>{
console.log('Executing')
},[setState])

you cannot use a user defined function inside the useEffect if you're using eslint it will warn you !! but the above code will just work fine because react is smart in this case it knows that setState will never change !.

Caution❌ : In-line functions shouldn't be called without arrow functions

<button onClick={handleIncrement()}>Increment</button>

❌ this might result your code to an infinite loop

useCallback

Does it make sense using this hook here??🤔

this is the first question you should think off before use using these performance hooks like useCallback and useMemo .

The same example used above is also a overrated one , don't get confused here above example is just to explain you how things works ! but imagine the child component just re-renders a "div" and a "p" tag . There's no expensive calculations or any CPU affecting operations here, So why useCallback here ?

If the child component consist of large amount of data or a extensive calculations, the callback function that you're passing can be wrapped up using useCallback .

Remember Even useCallback() returning the same function object, still the inline function is re-created on every re-rendering useCallback() just skips it. So the re-render will be less commutated than using the useCallback here !

The same set of rules can be applied to useMemo too

Manage your Work From Home 🏡 issues using this [kit] a helper site I've made (https://dev.to/karthick3018/manage-work-from-home-effectively-using-wfh-kit-6bc)

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe

Creating a chrome extension using React & Typescript 🚀

KaRthick — Tue, 31 Aug 2021 16:30:40 +0000

Creating a chrome extension is a check box I didn't check for a long , thought it would be much tougher and need to know much things. But trust me it's way simple than I thought.

A framework or library knowledge that you're working on is more than enough to make a chrome extension. Here I've used react and typescript.

This chrome extension is the thing I've been needed for a while , so I thought of solving my issue with a extension.

There are few things that are extension specific , basic knowledge of these things are required to build an extension.

Aspects of Chrome Extension

There are 4 major aspects while building the chrome extension

Popup UI

This is the thing that renders the root file when you click on the extension icon in the browser . Any UI related change for the popup can be added here .

Background script

As like the name this script will be running and listening in the background. It can be used as a place to include the listening events which you might need. Like you can listen an event during the extension icon click on the browser . In my case I need to have the same icon click listener that I've mentioned.

This can also used for state management thing.

Content Script

This will be executed in the body of the extension. You can inject a function or listner in this file to work when the extension is alive . In this extension I've added a listner event to listen the event emitted from the background script . Also to create an iframe in the body of the extension.

Options UI

Renders the stuff when you right click on the icon and click options. You can use it like a settings or admin panel sort of things for the extension .

Manifest json

This is the first file you need to create for an extension but I thought this will make sense explaing it after the above four , because all the above four needs to be configured here to make them work. Like the other manifest files does this also has the details of icon, app name , description etc. Specially here it has some additional access like adding background file , handling browser actions , content scripts .

Making it in react

You can make start doing the extension buy initiating the CRA itself , but I found this super awesome boiler plate which supports react with and without typescript .

https://github.com/VasilyShelkov/create-react-extension

It's same as like building an app using react , you can install third party packages , connect to a database using an api call. Only things is you need to slightly play with the 4 things that I've mentioned above.

Also check this offical link for plain javascript . https://developer.chrome.com/docs/extensions/mv3/getstarted/

About my extension : blogs-helper

The Problem statement I took was simple and weird , not sure how many of them faced it but to be honest I faced a lot.

While reading the technical blogs there will be a code snipet at the starting of the blog which will be referenced and explained till the bottom of the blogs. As we go on scrolling the page the actual code snipet which is referenced will be hidden in the viewport.

Now while reading the explanation I've forgot the actual code snipet.

....What is this blog explaining 🤔 ....

So to overcome that I've used multiple window one for the code snipet and other one is for the explanation . This is not the perfect way right ? Why not stickys ? Not sure how to use without minimizing the browser. So to overcome that I've made Blogs helper.

This is how it looks! , hanging at the right side you can drag it down and expand.

It's in the initial version PR's are most welcomed 🚀. Share your thoughts and ideas.

Get the extension here

Fork it in github

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe

Make your Website accessible for people with eye👁 disablities

KaRthick — Wed, 26 May 2021 16:42:56 +0000

Before getting in to the article I would like to ask you all a question !

How people with eye disablities use your website ? is the website you've made is accessible for them ?

wait ! what ? is there a scenario like that ? 😳 🙄 🤔 😲 these were my reactions and questions I got soon after this question was thrown over me. Come on I'm doing stuff's on web for over 4 years but never thought of this scenario and I'm clueless to answer this .

But the reality is big "YES" there's a way ! to be frank this was the most shocking thing more than the question . Again the same set of reactions but this time they've doubbled 😳 🙄 🤔 😲 😳 🙄 🤔 😲 .

Ok if yes then how ?? many of us would have used those things without knowing their use cases .

Aria Tags

Yeah Aria tags are the game changer here they has the capacity to handle this tricky use case .

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. stated in MDN

Have you researched the usage of these tags while using ? I didn't 🙋🏾 ! I thought they are only used for SEO kind of things . Another thing is other attributes we use can be accessed somehow like using

document.getElementById("demo");
document.getElementsByClassName("demo-class");
document.getElementsByName("demo-input");
document.getElementsByTagName("input"); or you can access the values during the event handle like onChange using e.target.value , e.target.name

but have you tried of accessing these aria tags ?? just try ! they can't be accessed like the other attributes ! these are not they've built for . Why because ARIA doesn't augment any of the element's inherent behavior.

ARIA works by changing and augmenting the standard DOM accessibility tree .

Screen Reader

So we've added the aria tags but how it will be helpful to read for the people with disablities?. Here comes the next life saver Screen Reader . Screen Reader is an app which make use of these aria tags and make a helpful voice commands for the people to use the website. They are available as an desktop app and also as a chrome extension. Check one of them here

Here I've created a small form using react that supports aria tag install the extension mentioned above , close your eyes and try submitting the form ! let me know If you've made it !

These attributes starting with aria- are the thing we're talking about !!

That's it ! So next time when you build an application make sure your application supports aria tags , Technology is not for particular people, Make the technology accessible for everyone 💪🏽

Get into these docs before starting aria tags

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
https://developers.google.com/web/fundamentals/accessibility/semantics-aria

Manage your Work From Home 🏡 issues using this kit

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe

Make your Website accessible for people with eye👁 disablities

KaRthick — Wed, 26 May 2021 05:41:08 +0000

Before getting in to the article I would like to ask you all a question !

How people with eye disablities use your website ? is the website you've made is accessible for them ?

Ok if yes then how ?? many of us would have used those things without knowing their use cases .

Aria Tags

Yeah Aria tags are the game changer here they has the capacity to handle this tricky use case .

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. stated in MDN

document.getElementById("demo");
document.getElementsByClassName("demo-class");
document.getElementsByName("demo-input");
document.getElementsByTagName("input"); or you can access the values during the event handle like onChange using e.target.value , e.target.name

ARIA works by changing and augmenting the standard DOM accessibility tree .

Screen Reader

Here I've created a small form using react that supports aria tag install the extension mentioned above , close your eyes and try submitting the form ! let me know If you've made it !

These attributes starting with aria- are the thing we're talking about !!

That's it ! So next time when you build an application make sure your application supports aria tags , Technology is not for particular people, Make the technology accessible for everyone 💪🏽

Get into these docs before starting aria tags

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
https://developers.google.com/web/fundamentals/accessibility/semantics-aria

Manage your Work From Home 🏡 issues using this kit

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe

🧨Never thought this way of using p/React inline/embedded 🧐

KaRthick — Tue, 27 Apr 2021 12:29:35 +0000

Let me give you a quick explaination about the concept of this article have you heard/thought of embedding a react application as CDN in a wordpress or in an angular or in a vue application ?

is it possible ? if yes is it something about a micro-frontend application ?

yeah it's possible to embeed a react application like a CDN with out the complexity of a micro-frontend architecture. Wait what ? how it is possible ? will be the next questions will explain clearly .

Micro-frontend is a concept of integrating two or more large applications like each will application will have its own route , states etc .

What we're going to do is not a large application but a small one. For example think of a chat bot that will have its own independent usage right ? can you write a single chat bot logic and use it in two different applications ? This way can really help you for this . If not clear i'll give you a another example think of a financial tech site that has each one or two calculators in its pages. The text,route pictures and others can be in a wordpress(or any) and embeed the calculator using this approach.

So like these smaller concepts can be done using this and can result in a minature of micro-frontend concepts like

resuablity across different application
work can be splited and different domain team can work on the same application without any clash or dependency.

Things used in this process

Preact
Preact-habitat
webpack
babel

Preact what the heck is that do I need to learn that too ? come one preact is just react nothing else the bundle size of react is reduced by 3x times and created as preact . Check out about preact here you'll find preact as a twin brother of react .

Why & what is Preact🧐 ?

But why we need to do this using preact ? why not react ? to address this point I'll ask a silly question your website needs to load fast to slow ? obviously faster ! so that is the point i've choosen preact the resultant build of plain react application is over to 30-40kb where preact is 3kb . I think these number are enough to choose preact but don't worry preact is just react and it can still do most of the things what react can .

Preact-habitat

This is the library that will make plugging in Preact components and widgets in any CMS or website. So this is the big and only thing you need to learn of use as a new but cool this is even simpler . It's a HOC and what you need to do is just pass your main component inside this HOC and all your things will be done out the box . Check this out here

webpack

We need to make a minor change in the output of the bundle this need to be done in the webpack file . The libraryTarget in the output must be of type umd

UMD - This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD and as global variable.

babel

Babel is just to use jsx react elements this is realated with preact you can just copy paste .

that's it about the setup you just need to create the logic and pass the component via habitat HOC and your requirement will be done !

Habitat usage

I've imported the habitat and render is the component I've created . Inside the init function i've sent my Render component inside the habitat HOC and stored the value in a variable habitatApp. Now using the value i've received I can modify the type of render using the render function provided.

inline -> if this is true this will be rendered inside the particular div that you're mentioning else if it is given as false it will be rendered globally.
clientSpecified -> this can be used to specify the identification for the div where the app needs to be rendered. Will explain this more clear later.

Now we're all set to launch , npm run build comment will give you the production build that contains assests (if any) , a index.html,bundle.js,bundle.map.js file . We need to move the bundle folder to any of the cloud like netlify , vercel or any other.

All done we need to embeed our current application to any of the other html,wordpress page or application.

How to embeed in other application?

This one is even more simpler !

tada🎉 that's it you've sucessfully embeeded your preact application inside of a plain html page ! let me decode things

async --> is used to avoid blocking of other scripts
src --> is the cloud link of my build folder 🔴 note: you should point /bundle.js file not your bundle folder as a whole
data-mount-in=".mine" is the things i've mentioned earlier as inline in the preact-habitat . It is the place you can mention the identification of a div where it needs to render . Here I've given .mine ie render the application inside a html element that has a classname of mine so it will render inside div class="mine"/> Here I've used class as a identifier you can use id as well.

so that's it we've rendered our application using the CDN in the plain html page.

Have you noticed a thing without any express or react environment the application is running how ? just think! will reveal this later here 😉

Limitations of this approach

Will only recommend this for smaller applications .
Routes are not provied . It can be used but there needs to be a react enivronment to run the application where without route it's not needed.
assets needs to be used inline or as a cloud url since we don't map it bundle folder we only point to bundle.js file .

Thats it ! let me know your thoughts about this !!

Check the complete project here

Manage the Work From Home 🏡 using this kit

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe

🧨Embed p/React app inside any other sites that are made using angular/wp/...

KaRthick — Tue, 27 Apr 2021 05:49:57 +0000

Let me give you a quick explaination about the concept of this article have you heard/thought of embedding a react application as CDN in a wordpress or in an angular or in a vue application ?

is it possible ? if yes is it something about a micro-frontend application ?

Micro-frontend is a concept of integrating two or more large applications like each will application will have its own route , states etc .

So like these smaller concepts can be done using this and can result in a minature of micro-frontend concepts like

resuablity across different application
work can be splited and different domain team can work on the same application without any clash or dependency.

Things used in this process

Preact
Preact-habitat
webpack
babel

Why & what is Preact🧐 ?

Preact-habitat

webpack

We need to make a minor change in the output of the bundle this need to be done in the webpack file . The libraryTarget in the output must be of type umd

UMD - This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD and as global variable.

babel

Babel is just to use jsx react elements this is realated with preact you can just copy paste .

that's it about the setup you just need to create the logic and pass the component via habitat HOC and your requirement will be done !

Habitat usage

inline -> if this is true this will be rendered inside the particular div that you're mentioning else if it is given as false it will be rendered globally.
clientSpecified -> this can be used to specify the identification for the div where the app needs to be rendered. Will explain this more clear later.

All done we need to embeed our current application to any of the other html,wordpress page or application.

How to embeed in other application?

This one is even more simpler !

tada🎉 that's it you've sucessfully embeeded your preact application inside of a plain html page ! let me decode things

async --> is used to avoid blocking of other scripts
src --> is the cloud link of my build folder 🔴 note: you should point /bundle.js file not your bundle folder as a whole
data-mount-in=".mine" is the things i've mentioned earlier as inline in the preact-habitat . It is the place you can mention the identification of a div where it needs to render . Here I've given .mine ie render the application inside a html element that has a classname of mine so it will render inside div class="mine"/> Here I've used class as a identifier you can use id as well.

so that's it we've rendered our application using the CDN in the plain html page.

Have you noticed a thing without any express or react environment the application is running how ? just think! will reveal this later here 😉

Limitations of this approach

Will only recommend this for smaller applications .
Routes are not provied . It can be used but there needs to be a react enivronment to run the application where without route it's not needed.
assets needs to be used inline or as a cloud url since we don't map it bundle folder we only point to bundle.js file .

Thats it ! let me know your thoughts about this !!

Check the complete project here

Manage the Work From Home 🏡 using this kit

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe

🚀🚀Manage Work From Home effectively using wfh kit

KaRthick — Wed, 06 Jan 2021 05:30:34 +0000

First post of 2k21 let this be a successful year for everyone😄

COVID-19 the thing that changed the pattern of the whole world. It's almost been a year since we (exception for those who already went to office) visited the office. But then it's a sudden and dramastic change for the people like me who not used of working from home.

Ok but working from home is nice is'nt ? spending more time with family , pets . A mixed yes and no will be the answer for this question. People saying no will be the one who's missing the office coffee and snacks. Yeah WFH can be both productive and life balancer when you manage it correctly.

WFH Benefits

Late wake up
Break time is not fixed
you can deside the working time
network issue,rebooting issue these lies can be a life saver
spending time with your loved ones
no costume issues

Simply you work from home rest all are benefits😁

WFO Benefits

fixed work timing
provided snacks & coffee
break & fun time with collegues

So Everything seems to be good in WFH ! what's the concern ? yeah ! everything will have it's own downside too. Mainly we're going to address the health related things.

WFH Concerns

Extended work
Dehydration
Sitting in a same position for a longer period

I think if we address these 3 concerns work from home can be a great thing to enjoy. Chill it can be easily done using the wfh-mate ,wfh-mate is the helper application i've created to solve these things.

How wfh-mate helps you ?

wfh-mate can help you with the following,
Measure your working time.
Make your notes.
Manage your todo lists for the day.
Get to know the date, plan for upcoming days.
Helps you to take a quick & accurate break.
Remains you to take efficient water and stay hydrated.
Allows you to follow 20-20-20 rule (Take a 20 second break! * Look at a 20 feet object for 20 seconds).
Finally shows the total hours worked , total break taken.

https://karthick3018.github.io/wfh-mate/

It has 3 layers

1.Work timer, calender

this layer has the start button to start the work for the day and end button to end the work at end of the day.

timer

The timer updates each second and displays how long you've worked for the day. This can help you to finish your after the actual hours of work (8 hrs is official working time here!). After the time you can close your official work and start spending time for your personal things.

calendar

This is one of the thing i've searched often. Even in the holidays i've logged-in to the office system since I don't know what day it is ! So wfh-mate has a calendar that displays the current date,month and formatted date. You can click that to get the detailed calendar.

2.Notes & todo's

We should not test our memory skills in the list of work todo. If you're correct at 9/10 times that one failed can let you in a difficult situation. So mark your list of works to be completed in the particular day using the todo / textarea provided.

3.Water & break timer

Here comes the most important part or the main line based on which i've created the application.
Break timer - Break is the one which we will less or may be morley use😉 during the WFH. Should avoid taking break ? definitely not!

Taking a quick break can really help you to fix the things you've been stuck with

my most the toughest debugging occurs during the break time , but that must be controlled break as well ! So this timer helps you to take a quick controlled break when the break ends it alerts you by sending a desktop notification or a alert tone or both.

Water break - This is the main one we're missing during the WFH even in office too since we're surrounded by air conditioners we get less thirst ! but that can't be a reason . As per U.S. National Academies of Sciences, Engineering, and Medicine , the intake should be

About 15.5 cups (3.7 liters) of fluids a day for men
About 11.5 cups (2.7 liters) of fluids a day for women

so how many of u following this ? myself not ! so this timer can execute every 20/30 minutes and remain you to intake water. Using that break make sure you're drinking the above mentioned level.

20-20-20 rule!

Ever heard of this rule ? this is the one we need to follow to avoid CVS (Computer Vision Syndrome) stress caused to eyes by looking at the monitor for a long time.
So here 20-20-20 rule comes to play every 20 mins take a break for 20 seconds and look at a 20 feet away object. Whenever the water break alerts , you can follow this rule too!

End stats

Once you're done for the day you can press end task and that will give you the exact hours of work you've done after pressing the start work button along with a approx break time taken !

These are the things i've taken to solve and given a solution using the following site. It's like a step ahead of POC . You can use this site to achiveve the above mentioned things . The funky this in the site needs to be replaced by a functionality in the upcoming release.

leave the improper design stuff's i'm not that good in that

Project fetures

OK this project solves somethings that all ? can i close ?
Nope ! not only as a website it can help you with some of the react patterns( add-ons to it !)

Compound Components (intresting stuff this year credits @kentcdodds)
Custom hooks
Reusable UI elements
Sticky notes and neumorphism effects using pure css

so that's all about wfh-mate use this in your regular day work. Let me know your feedbacks ! forgive me if any error occurs 😉

Use the wfh-mate here

Check the complete project here

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

*cover image illustration credits https://dribbble.com/udhaya

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe

Achieve Drag & Drop in react by building a GUI

KaRthick — Tue, 17 Nov 2020 05:33:22 +0000

Drag and drop (D&D) is one of the feature that users of the application like to have and developers feels difficult to implement.

So the best experience a site can give a user is drag and drop specially when your application has things like

  --> list of things to go
  --> work manager
  --> project management

Sites like asana ,atlassian, google task are some of the notable sites that uses the D&D feature the most

These things must be followed carefully while implementing D&D

flickers
smothness

No worries as usall there are n number of libraries that takes care of the above things for you.

One of my favourite package is react-beautiful-dnd by atlassian. It is one of the package that does the work quite simple.

It is the first choice when your requirement is based on the dragabble list of items as in the above gif. I also implemented the other thing using this package (i'll show u latter).

DragDropContext

It uses the DragDropContext wrapper where the things that needs the D&D feature must be inside that wrapper

Draggable

Draggable is the another things that is imported from react-beautiful-dnd which can be used to wrap the items that are draggable

draggableId should be unique it is the representation of the item that is dragged currently.

Droppable

Droppable is the place where the dragged items are dropped you can see in the gif that the items are moved from right to left and left to right.

droppableId is used to identify the place where the items are dropped.It can used as a string for better clarification.

onDragEnd

You can see the onDragEnd function that is used in first image.It is the main function that used to fullfil the D&D functionality. This function receives a parameter which has the information about source , destination , draggableId which can be used to find from which source to destination the item is moved.

Ok is this only for list of items ? for what other it can help ??

It depends on how you play with the given stuff's. Here is the GUI builder which I developed using react-beautiful-dnd.

So instead of just list items the GUI builder will generate the html elements that is selected from the left sidebar . Each side has it's own D&D feature.

Each side is wrapped under both Droppable & Draggable since both need act as draggable and droppable area.

Both Draggable & Droppable follows the render props pattern providing the props like provided, snapshot you need not to worry about these props just spread and pass them accordinly to the wrapper as in the below example.

That's it by this D&D achieved easily in react using react-beautiful-dnd .

Note: Even without any other packages drag and drop can be achieved by doing <htmltag draggable /> but that won't give the result as crisp like any packages could do

Check the complete project here

react-beautiful-dnd

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe

Understanding Code Splitting in React

KaRthick — Fri, 16 Oct 2020 05:59:00 +0000

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

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 ?

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 ?

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

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.

This is how we use that function

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 😢
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

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

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

with out code splitting

this will have a single chunk as a whole

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

Check this offical docs

Get the code here

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe

Code Splitting in React

KaRthick — Wed, 14 Oct 2020 19:30:47 +0000