Forem: varunprashar5

Optimization may overkill Performance (React)

varunprashar5 — Thu, 02 Sep 2021 06:25:02 +0000

𝗝𝘂𝗻𝗶𝗼𝗿 𝗗𝗲𝘃: 𝗪𝗲 𝘀𝗵𝗼𝘂𝗹𝗱 𝘄𝗿𝗮𝗽 𝗲𝘃𝗲𝗿𝘆 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝗻𝘀𝗶𝗱𝗲 "𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸" 𝗵𝗼𝗼𝗸 𝘁𝗼 𝗯𝗼𝗼𝘀𝘁 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲.

𝗦𝗲𝗻𝗶𝗼𝗿 𝗗𝗲𝘃: 𝗦𝗲𝗿𝗶𝗼𝘂𝘀𝗹𝘆 (𝘄/𝘁 𝗰𝗵𝗲𝗰𝗸𝗶𝗻𝗴 𝗽𝗿𝗼𝗳𝗶𝗹𝗶𝗻𝗴)? 𝗜 𝘁𝗵𝗶𝗻𝗸 𝗶𝘁 𝘄𝗶𝗹𝗹 𝗯𝗲 𝗮 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗸𝗶𝗹𝗹!

^ ^ In continuation to the last post (React.memo):

When a component gets a function as a prop from its parent, then whenever a parent is rendered, its child component will get re-rendered every time no matter even if you have used React.memo().

Do checkout the video for more details:
https://youtu.be/5aH_b5pUAHI

<𝗕𝗶𝗴𝗟𝗶𝘀𝘁 𝗶𝘁𝗲𝗺𝘀={𝗶𝘁𝗲𝗺𝘀} 𝗶𝘁𝗲𝗺𝗖𝗹𝗶𝗰𝗸={𝗶𝘁𝗲𝗺𝗖𝗹𝗶𝗰𝗸} />

In above line, even if is passed via React.memo, It will still re-render because itemClick function will get re-created every time the parent component is rendered.

𝗜 𝗵𝗮𝘃𝗲𝗻'𝘁 𝗰𝗵𝗮𝗻𝗴𝗲𝗱 𝘁𝗵𝗲 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻, 𝗯𝘂𝘁 𝘄𝗵𝘆 𝘄𝗶𝗹𝗹 𝗶𝘁 𝘀𝘁𝗶𝗹𝗹 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿?

This is how Javascript works, you should know that two references are never equal.

[1,2] === [1,2] //false
1==1 //true (primitives are equal)

Primitive values will be the same on every re-render but objects will be different (functions are objects in Javascript).

To prevent this, just wrap your function with useCallback hook.

𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸(𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻, [𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝗶𝗲𝘀])
//Here we are saying to use the same function on re-renders
//If you pass an array of dependencies, then whenever any of the dependencies change, then a new function will be used.

𝗗𝗼𝗲𝘀 𝗶𝘁 𝗺𝗲𝗮𝗻 𝘁𝗵𝗮𝘁 𝗜 𝘀𝗵𝗼𝘂𝗹𝗱 𝘄𝗿𝗮𝗽 𝗲𝘃𝗲𝗿𝘆 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝗻𝘀𝗶𝗱𝗲 𝗺𝘆 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝘄𝗶𝘁𝗵 𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸?

You should 𝗡𝗘𝗩𝗘𝗥 do that, Here are the reasons:

Optimisation always does come with a cost, it's a special function that will never be garbage collected and will always have a reference in the memory.
Extra check for the different values in the array of dependencies to see if these dependencies are changed then they have to recreate the newer function.
Don’t forget that useCallback() hook is called every time the parent component renders. Even useCallback() returns the same function object, still the inline function is re-created on every re-rendering (useCallback() just skips it).

𝗛𝗼𝘄 𝘁𝗼 𝗱𝗲𝗰𝗶𝗱𝗲 𝘄𝗵𝗲𝘁𝗵𝗲𝗿 𝘁𝗼 𝘂𝘀𝗲 𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸() 𝗼𝗿 𝗻𝗼𝘁?

There will never be a single answer to this problem, So always run your profiler and see what performance gain you will get and then decide.

Don't overoptimize your React App

varunprashar5 — Tue, 24 Aug 2021 06:04:09 +0000

𝗢𝗽𝘁𝗶𝗺𝗶𝘀𝗶𝗻𝗴 𝘆𝗼𝘂𝗿 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽

Do checkout the video for more details:

https://youtu.be/2woSmgfUjC8

If you have a parent-child component structure then Whenever the parent state changes it will re-render.
Do you know it will even re-render your child? No matter if your child uses any prop or not it will still re-render.

Ideally, Child should re-render only if: parent prop or method used inside the child is changed.

𝗛𝗼𝘄 𝘁𝗼 𝗽𝗿𝗲𝘃𝗲𝗻𝘁 𝘂𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀 ?
The solution is "𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼"

React.memo (is a higher-order component) takes the component and memoizes the rendered output of the wrapped component.

So whenever there is a re-render in the parent, For a child it will compare the props and if all the props are the same it reuses the memoized result skipping the next rendering.

𝗢𝗯𝘀𝗲𝗿𝘃𝗮𝘁𝗶𝗼𝗻:

Pressing the "click" button, updates the state due to which re-renders
is re-rendered every time "Parent" is re-rendered (even it is not using any parent state)
is not re-rendered when "Parent" is re-rendered (As it is using memoised result)

𝗜𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 𝗽𝗼𝗶𝗻𝘁𝘀:

If you are using function as a prop in your child, it will still re-render even if props are the same in comparison (let's discuss it in the next post)
If you are thinking to have every component to use React.memo then it may overkill the performance in some scenarios where it will first compare the props if they are not the same it will still do the re-rendering (extra comparison check)
Do check the profiler to actually figure out if it will be worth using it
If a child is re-rendering it doesn't mean it is costly unless it is doing the "commit" phase which actually does the real DOM changes.
Before preventing re-renders, Do fix your SLOW renders.

Do share your thoughts in the comments

How Javascript Engine's Work?

varunprashar5 — Tue, 29 Jun 2021 07:29:03 +0000

𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗘𝗻𝗴𝗶𝗻𝗲 is a program that executes the javascript code. These days relevant modern engines use just-in-time compilation for improved performance. (As per Wikipedia)

𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝘀𝘁𝗲𝗽𝘀 𝗼𝗳 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗲𝗻𝗴𝗶𝗻𝗲 𝗽𝗶𝗽𝗲𝗹𝗶𝗻𝗲 𝗮𝗿𝗲 (Generic for any JS Engine):

Javascript source code is passed to "Parser"
Parser divides the code into multiple tokens
It is converted into AST (Abstract Syntax Tree), a tree-like structure that represents functions, conditionals, scopes etc.
This AST is passed to the interpreter which converts the code into Bytecode.
At the same time engine is actually running the Javascript code
Bytecode is used by optimizing compiler along with profiling data
"Optimizing compiler" make certain assumptions based on profiling data and produces highly optimized machine code.

Sometimes there is a case where the 'optimization' assumption is incorrect and then it goes back to the previous version via the "Deoptimize" phase (where it actually becomes the overhead to us)

JS Engine usually optimizes "hot functions" and uses inline caching techniques to optimize the code.

𝗟𝗲𝘁'𝘀 𝘀𝗲𝗲 𝘁𝗵𝗲𝘀𝗲 𝗶𝗻 𝗩𝟴:

Interpreter is called "Ignition".
Optimizing compiler is called "TurboFan".
Apart from Parser, there is a "pre-parser" that checks for syntax and tokens

𝗔 𝗿𝗲𝗰𝗲𝗻𝘁 𝘂𝗽𝗱𝗮𝘁𝗲 𝗶𝗻 𝗩𝟴: "Sparkplug" is introduced which is present between "Ignition" & "TurboFan" which is also called Fast Compiler.

𝗡𝗼𝘁𝗲: These are high-level step's that most of the JS engines goes through and every engine goes through their own set of steps for further optimizations.

They do have stack, heap, garbage collector and is out of scope for this post.

Do share more about JS engines in the comments

Checkout my youtube channel for more such content:
https://www.youtube.com/channel/UCJErruzdazYFQfDdb6avbtA

𝗛𝗼𝘄 𝘁𝗼 𝗳𝗶𝗻𝗱 "UNUSED' 𝗝𝗔𝗩𝗔𝗦𝗖𝗥𝗜𝗣𝗧 𝗮𝗻𝗱 𝗖𝗦𝗦 𝗰𝗼𝗱𝗲 𝗼𝗻 𝘆𝗼𝘂𝗿 𝗽𝗮𝗴𝗲? 🤔

varunprashar5 — Thu, 17 Jun 2021 09:45:35 +0000

You can find it using Chrome via "Dev Tools" 😊

Open dev tools (F12)
Type: Ctrl + Shift + P
Type: "Coverage" and select "show coverage" from the result.
New window with the "Coverage" tab will be shown
Click Icon "Start Instrumenting Coverage And Reload Page"

So it will reload the page and show the information in the table
with "Url", "Type", "UnusedBytes", "Usage Visualization"

𝗨𝘀𝗮𝗴𝗲 𝗩𝗶𝘀𝘂𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻:

Red section of the bar is unused bytes
Green section is used bytes.

𝗦𝗼 𝘄𝗵𝗮𝘁 𝘁𝗵𝗲 𝗻𝗲𝘅𝘁 𝘀𝘁𝗲𝗽? 🤨
Refactoring your codebase so that each page only ships the Javascript and CSS that it needs (this can be a tricky part 🙃)

Do share your thoughts and other suggestions in the comments

What is AbortController in Javascript?

varunprashar5 — Wed, 09 Jun 2021 18:53:00 +0000

Do you know what is AbortConroller?

It is a Web API provided by DOM Standard.

The "AbortController" interface represents a Controller object that allows you to abort one or more Web requests as and when desired.

Properties: signal
It returns "AbortSignal" object instance to communicate with DOM request

const controller = new AbortController();
const signal = controller.signal;

Controller has one method:

controller.abort();

When you abort an async operation, the promise rejects with a DOMException named "AbortError"

Do checkout the code snippet where it is aborting the request if it takes more than 3 seconds.

//create a new AbortController object 
const controller = new AbortController();
const options = {
  method: 'POST',
  signal: controller.signal, 
  body: JSON.stringify({
    name:'Varun',
    work:'Dev'
  })
};  

// Abord the request after 3 seconds
setTimeout(() => controller.abort(), 3000);

//Send API Request to the server
fetch('/saveUser', options)
.then(response => {
  console.log(response.status);
})
.catch(error => console.error('Request Timeout'));

So what's the other alternative? Do share in comments.

Do you know React Hooks Flow?

varunprashar5 — Sun, 06 Jun 2021 11:47:27 +0000

Understanding "Hooks Flow" is very important and sometimes even experienced React developers miss a few points.

Thanks to "Donavon" for sharing the beautiful flow diagram.

React Hooks flow includes:

Mount
Update (when state changes based on any event)
UnMount

Mount:

Run the lazy initializer (functions passed to useState or useReducer)
Continue the rest of the render function
React updates the DOM
It runs LayoutEffects
Browser paints the screen to reflect
Runs the effects

Update: (When the user make any event it update the state)

Runs the render phase
React updates DOM
Cleanup LayoutEffects first
Run LayoutEffects
Browser paints the screen
Cleanup the effects first
Run the effects in the render

Unmount: Component gets removed from the screen (navigate to other screen or from user event)

Cleanup LayoutEffects
Cleanup Effects

Note: Never confuse them with lifecycle methods in Class Components.

Let's share more about hooks in the comments below.

What is Prop Drilling in React? Understanding Context API - Part 1

varunprashar5 — Sun, 23 May 2021 16:58:56 +0000

If you have started learning or exploring react then you must have come to a situation where you are passing your props down to 3rd - 4th or Nth level in your components hierarchy.

Prop Drilling by Example

The intermediary components need not do anything with those props but are acting as a pathway to pass those props to the child which actually needs them.

This particular problem is called "Prop Drilling".

In the cover image, you can see that I am actually passing "Complete Todo" and "Delete Todo" from my TodoApp component down to the "Todo" Component.

TodoList component needs nothing to do with these props and is acting as an intermediary here.

Few problems with Prop Drilling:

Useless re-renders will be there in case that prop is changed from the parent via an event
Easy to maintain the code in case there is a change request and is prone to errors
Becomes very difficult when we have a deeper level of nesting and we are passing the props

How can we prevent this Prop Drilling?

We can prevent it by using "Context API" in React. It has two components named:

Context.Provider
Context.Consumer

Apart from that, we can even use the "useContext" hook instead of Context. Consumer and is a preferred way.

If we can combine Context API with useReducer Hook, It can be a powerful tool for having our own central state management.

But it is suggested by React team that we should only use "Context API" in case we have less frequent updates in these props.

Do follow me on:

Linkedin: https://www.linkedin.com/in/varunprashar5/

Twitter: https://twitter.com/Varunprashar

Different React Patterns for Enterprise Apps

varunprashar5 — Wed, 05 May 2021 08:51:46 +0000

Are you a React Developer?

If you want to Simplify large React applications by separating your component logic, state and display properties to make React components more flexible then do explore more about different patterns & approaches you should follow:

Compound Components
Render Props
Provider Pattern
Combining Pattern
Component Injection

What is your strategy, approach and thought process in creating such enterprise React Apps?

Let me know if you want to learn more about any pattern or topic in React.

Do you know javascript?

varunprashar5 — Mon, 12 Oct 2020 18:06:17 +0000

Can you guess the output? Do explain it in the comment section

What the heck is RPC ?

varunprashar5 — Wed, 09 Sep 2020 06:54:03 +0000

Do you know about RPC ?

Background:

For communication between front-end client and back-end server we have different ways :

REST APIs
GraphQL
RPC

These days GraphQL is being quite used due to lower network hits & less communication between mobile team, front-end and back-end developer. Still we don’t make the whole app using graphQL but try to follow hybrid approach of using REST APIs + GraphQL as per use-cases.

What is it ?

RPC (Remote Procedure call) is same as calling a function in Javascript, Python etc taking a method name and arguments. It is like executing a block of code on another server.
RPC is just a bunch of functions, but in the context of an HTTP API, that entails putting the method in the URL and the arguments in the query string or body.

There are few specifications for it like:

XML-RPC
JSON-RPC

Slack has provided its RPC based Web API :

https://api.slack.com/web

Its is most often used in “Microservices” based architecture where these microservcies communicates with each other via RPC calls.

Do you think if there are any performance gains if we are using it ?
Is there any limitation or challenges of using it ?
Do share in comments

Best way to learn any programming language

varunprashar5 — Tue, 08 Sep 2020 17:51:46 +0000

I remember when I was fresher and how difficult it was to acquire new technology without any guidance. I use to take random steps and try to do everything based on my understanding.
There were:

No plan
No mentor
No consistency
lack of maturity

Due to this I faced multiple problems and it took me may be triple time in grasping a particular technology.

So considering this, I would suggest the below strategy before you dive into learning any new tech:

Create a road-map and action plan first (get it verified by experts in that tech)

Understand the core concepts of the language
Practice those core concepts with multiple real time small tasks
Create at least 5-6 small applications to grasp more understanding (predecided in your road-map)
Find the best practices for that particular language
Play with all your learning & try to make one good project (making sure you are using most of your learning)
Find out the concepts which are complex and difficult to get in 1 go and make proper plan to practice it until you are comfortable with them.
Dive deeper into understanding the language behaviour , its insights and do in-depth analysis
Once you reach there, Check stack-overflow and see the kind of questions other devs are asking in same tech and see if you are able to provide solution
Practice Practice & Practice (this is the whole essence at the end)

Before that must connect with guys who are master in that language over

Linkedin
Join discord servers
Join their slack channels

Be consistent (2-3 hrs/day) and try to live with this whole journey, at the end you must be between beginner to intermediate to this new tech or programming language

Do share your experiences and thoughts on the same in comments.

Boost Web Performance: content-visibility (chrome 85)

varunprashar5 — Wed, 05 Aug 2020 04:41:45 +0000

To boost web app performance, A new css property is introduced with the launch of chrome 85.

content-visibility allows the element's rendering work, including layout and painting, until it is needed.
If heavy part of your content is not visible to the screen, using this property will make the initial load much faster.
You have control to make it automated or via a script to handle it.
The 'auto' keyword allows for the user-agent to manage content visibility based on proximity to the viewport.
Whereas 'hidden' keyword allows full script control of content visibility.