DEV Community: Jayant Khandelwal

Re-rendering in react

Jayant Khandelwal — Mon, 24 Jul 2023 17:05:26 +0000

A child component is re-rendered in react in three cases:
1.) If the parent component is re-rendered, then the child will be re-rendered.
2.) If the state of the parent component is updated using useState or useReducer. -> then parent component will re-render, then the child will be re-rendered.
3.) If the props of child component is updated, it will be re-rendered. (It is the main point, all other point are related to this point only.)

we can make use of React.memo or passing child as a prop to prevent form unnecessary re-rendering.
(passing child as a prop will also work beacuse apart from React.memo because a component can not change its own prop)

Also, when we pass objects or function as a prop which remains same, then to avoid unnecessary rendering of child component, we can make use of useCallback and useMemo hook.

This is because when we pass objects or function as prop from parent component, when the parent component re-renders due to some state change, a new refernce to object and function is created, which will be treated as a new prop that to be passed to the child component. So to prevent that, we make use of useMemo(for non primitive values like object and arrat) and useCallback(for functions)

What the hell is CDN?

Jayant Khandelwal — Sun, 10 Jul 2022 09:12:21 +0000

Recently, the Cloudflare outage knocked many popular services such as Coinbase, Discord, Udemy etc. But do you know what Cloudflare is? 🤔

Cloudflare is a CDN company.✔️

Ok But, What do you mean by CDNs

A content delivery network (CDN) refers to a geographically distributed group of servers that work together to deliver Internet content quickly.

CDN allows the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.

Major giants like Meta, Netflix, and Amazon etc serve the majority of their traffic through CDNs.

🤔Ok, so what are the benefits of CDN?

Improving website load times. - By distributing content closer to website visitors by using a nearby CDN server, visitors experience faster page loading times.

Reducing bandwidth costs- Bandwidth consumption costs for website hosting are a primary expense for websites. CDNs are able to reduce the amount of data an origin server must provide through caching and other optimizations, thus reducing hosting costs for website owners.

Increasing content availability and redundancy - Large amounts of traffic or hardware failures can interrupt normal website function. A CDN can handle more traffic and withstand hardware failure better than many origin servers due to its distributed nature.

🤔Now tell me, how do CDN works?

CDN is a network of servers linked together with the goal of delivering content as quickly, cheaply, reliably, and securely as possible.

In order to improve speed and connectivity, a CDN will place servers at the exchange points between different networks.

Internet exchange points (IXPs) are the primary locations where different Internet providers connect in order to provide each other access to traffic originating on their different networks.

By having a connection to these high-speed and highly interconnected locations, a CDN provider is able to reduce costs and transit times in high-speed data delivery.😉

CDNs are Best!😉

The Box Model

Jayant Khandelwal — Fri, 04 Feb 2022 13:20:20 +0000

Whether you're a rookie, an experienced developer or someone in the center of the stack, one of the most crucial CSS concepts to comprehend is "𝐓𝐡𝐞 𝐁𝐨𝐱 𝐌𝐨𝐝𝐞𝐥."

Q.) What Is "The Box Model"?

➡️ "According to the box model concept, every element on a page is a rectangular box and may have width, height, padding, borders, and margins."

𝐊𝐞𝐞𝐩 𝐢𝐧 𝐌𝐢𝐧𝐝: Every element on a page is a rectangular box.

Every element is a rectangular box, and there are several properties that determine the size of that box.

The core of the box is defined by the width and height of an element, which may be determined by 🧵:

The 𝙙𝙞𝙨𝙥𝙡𝙖𝙮 property, or 2.The 𝙘𝙤𝙣𝙩𝙚𝙣𝙩 of the element, or 3.The specified 𝙬𝙞𝙙𝙩𝙝 and 𝙝𝙚𝙞𝙜𝙝𝙩 properties.

𝙥𝙖𝙙𝙙𝙞𝙣𝙜 and 𝙗𝙤𝙧𝙙𝙚𝙧, expand the dimensions of the box outward from the element’s width and height.

𝙢𝙖𝙧𝙜𝙞𝙣 we have specified will follow the border.

Each part of the box model corresponds to a CSS property: 𝙬𝙞𝙙𝙩𝙝, 𝙝𝙚𝙞𝙜𝙝𝙩, 𝙥𝙖𝙙𝙙𝙞𝙣𝙜, 𝙗𝙤𝙧𝙙𝙚𝙧, and 𝙢𝙖𝙧𝙜𝙞𝙣!

The size of the box itself is calculated like this:

𝗪𝗶𝗱𝘁𝗵 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

𝗛𝗲𝗶𝗴𝗵𝘁 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Happy Coding!!

Performance optimization Hook: useCallback and useMemo hook!

Jayant Khandelwal — Thu, 24 Dec 2020 12:13:24 +0000

What is useCallback hook?

useCallback hook is a hook that will return a memorized version of the callback function that only changes if one of the dependencies has changed.

Why do we use useCallback hook?

It is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders!

What is useMemo hook?

useMemo hook is very similar to useCallback hook but the difference is that useMemo hook invokes the provided function and caches its results.

useCallback vs useMemo

If you need to cache a function, then use useCallback hook whereas,
If you need to cache the result of the invoked function use useMemo hook.

Happy Coding!

-Jayant Khandelwal

The best Couple: useContext + useReducer !

Jayant Khandelwal — Wed, 23 Dec 2020 18:14:42 +0000

Disclaimer:

This is going to be one of the best post you have ever come across in search of useContext + useReducer hooks!

Why do we use useContext and usereducer together?

Reason: To share states between the components i.e. Global State
Management

In the previous posts, we have seen how to make use of useContext and useReducer hooks.

So, in this post, we will see how to make use of them together!

In this example, we are going to share the state of the counter between Component A , Component D and Component F!

Also, the Components hierarchy in our example is as follows:

1.)Component A
2.)Component B -> Component D
3.)Component C -> Component E -> Component F

Steps:

1.) Create React context in the main component

2.) Make reducer function in the main component

3.) Make use of the useReducer function.

4.) Send context value using Context Provider

5.) Consume Context Value using useContext hook.

6.) Transfer action from the components using dispatch

Okay so let's get started!

Step1: Create React Context and reducer() function:

Step2: In the functional component, call useReducer(reducer,initialState) hook :

Here, you can see that we have passed the state i.e. counter and dispatch method as the value in the Context Provider.

Step 3: Now, in order to access the global state in Component A, Component D, and Component F, we need to make use of the useContext Hook to consume the context value passed by the Context Provider.

(component A)

(component D)

(component F)

Step 4: In order to change the global state through Components A, D, and F, we have passed action (i.e. increment, decrement, or reset) through the dispatch function.

This is all you need to manage the global state using useReducer and useContext hook!

I hope it might have helped you!

Do share your thaughts!

*Happy Coding, Thank you! *

-Jayant Khandelwal

Fetch using useReducer!

Jayant Khandelwal — Wed, 23 Dec 2020 12:18:20 +0000

In this post, we will gonna see how to make a Fetch request with the help of the useReducer hook.

This is our reducer function,

Let's have a look at our functional component,

Complete Code:

I hope it might help you!

Happy coding!

-Jayant khandelwal

useReducer Vs useState (The War)

Jayant Khandelwal — Tue, 22 Dec 2020 18:46:57 +0000

In this post, we are going to see the difference between useReducer and useState hooks and when to use them.

Hope it might help you guys

Happy Coding!

Thank You

-Jayant Khandelwal

useReducer final destination (Signing Off):

Jayant Khandelwal — Tue, 22 Dec 2020 18:39:39 +0000

Welcome Back devs!

We have talked about useReducer hook, its usage, and its implementation in the previous post of this series.

First of all, let us have a recap,

Roles:

action: Action is a plain JavaScript string or object that contains information. Actions tell the reducer what kind of action to perform and all other fields contain information or data.

initialState: defines the initial state of the component.

currentState: defines the current state of the component

reducer: reducer() function accepts the currentState and action and then returns a new state based on that action

useReducer hook returns the currentState and the dispatch method.

dispatch: dispatch method is capable of accepting an action to execute the code specified in the render function i.e. it accepts the action and transfers it to the reducer function.

Note: initialization of initialState and reducer() is always made outside the functional component.

Now, in this post, we are going to see another method that can be used to use the useReducer hook.

Let's have look at our reducer,

Reducer function is the same as we have implemented in the first post of usReducer hook

Now, let's see our functional component,

Here, we have implemented two different useReducer hook using the same reducer() function.
This is another way to make use of the useReducer hook.

Let's have a look at the complete code,

output:

So with this, we come to the end of the useReducer hook.

We have seen three different methods to use and implement the useReducer hook.

Feel free to leave a comment if you face any doubt!

Happy Coding!

Thank you,

- Jayant Khandelwal

useReducer (The Intermediate):

Jayant Khandelwal — Tue, 22 Dec 2020 17:51:52 +0000

Welcome back devs!

We have talked about useReducer hook, its usage, and its implementation in the previous post of this series.

Now in this post, we will make use of useReducer in a slightly complex manner.

First of all let us have a recap,

Roles

action: Action is a plain JavaScript string or object that contains information. Actions tell the reducer what kind of action to perform and all other fields contain information or data.

initialState: defines the initial state of the component.

currentState: defines the current state of the component

reducer: reducer() function accepts the currentState and action and then returns a new state based on that action

useReducer hook returns the currentState and the dispatch method.

dispatch: dispatch method is capable of accepting an action to execute the code specified in the render function i.e. it accepts the action and transfers it to the reducer function.

Note: initialization of initialState and reducer() is always made outside the functional component.

First of all, let's initialize our initialState and implement our reducer function as follows:

You can see that this time we have two states to maintain that is firstCounter and secondCounter. So, in order to maintain two states, we have used an object to initialize the state.

We have used spread operator because useReducer does not automatically merge and update the object i.e. useReducer does not merge the state automatically.

Now let's take a look at the functional component,

Here we have passed action as an object. We generally pass action as an object when we have more than one property to be accepted by the reducer function.

As here we are maintaining two states, therefore we are sending two different type property (eg: increment and increment2) for
firstCounter and secondCounter respectively.

Let's have a complete look at the code,

Output:

We will see one more way to use the **useReducer* hook in the upcoming posts of this series.*

Stay Tuned!

Happy Coding!

Thank you!

-Jayant Khandelwal

Getting started with useReducer Hook!

Jayant Khandelwal — Tue, 22 Dec 2020 13:26:35 +0000

useReducer Hook is also used for state management!

-> It is an alternative to useState (useState is built using useReducer)

-> What's the difference between the two?

-> When to useReducer v useState?

Have you ever came across the reduce() function in JavaScrpt?

Let us make a contrast between reduce and useReducer hook.

Syntax

-> reducer(currentState,action)
-> useReducer(reducer,initialState)

Roles

action: Action is a plain JavaScript string or object that contains information. Actions tell the reducer what kind of action to perform and all other fields contain information or data.

initialState: defines the initial state of the component.

currentState: defines the current state of the component

reducer: reducer() function accepts the currentState and action and then returns a new state based on that action

useReducer hook returns the currentState and the dispatch method.

dispatch: dispatch method is capable of accepting an action to execute the code specified in the render function i.e. it accepts the action and transfers it to the reducer function.

Now, let us have a look at our code!

First of all, let's make the reducer() function and initialize an initialState.
Note: initialization of initialState and reducer() is always made outside the functional component.

Now let's make use of the useReducer hook.

Call a useReducer hook inside the functional component and pass reducer and initialState as arguments in it.

let's have a look at the complete code:

Following is the output for the above code,

We will see two more ways to use useReducer hook in the upcoming posts.
Stay Tuned!

Happy Coding!

Thank you!

-Jayant Khandelwal

Making use of useContext Hook!

Jayant Khandelwal — Tue, 22 Dec 2020 11:24:08 +0000

Welcome back devs!

We have talked about using ContextAPI, how to create context, how to Provide context value, and how to Consume context value in the last post of the series.

In this post, we are going to see how to make use of useContext Hook.

Description:

useContext accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest above the calling component in the tree.

When the nearest above the component updates, this Hook will trigger a rerender with the latest context value passed to that MyContext provider

Following are the changes you need to make to our previous code in our earlier code in order to use useContext hook:

Now,

Before,

Only this code you have to change, the rest all remains the same as it is.

Note: useContext(MyContext) only lets you read the context and subscribe to its changes. You still need a above in the tree to provide the value for this context.

Stay tuned for the upcoming posts of the Series!!

I hope it might help you, Feel free to leave a comment if you have any doubt!

Feedbacks are always welcome!

Happy Coding!

-Jayant Khandelwal

Context ApI + useContext Hook (The deadly Beast)!!

Jayant Khandelwal — Tue, 22 Dec 2020 10:59:04 +0000

Fun Fact:
Context API to State management in React, is Hammer to Hulk!

Don't you agree?
Check it out yourself :

"Context provides a way to pass data through the component tree without having to pass props down manually at every level."

Consider a Scenairo:

In the above Tree, if we need to access the username in Component A, Component D, and Component F then these can be the following ways:

Method 1.)
Pass it down through all the components as props i.e (B -> D) and (C -> E -> F). The Problem with this method is that we need to unnecessarily pass props through Component B, Component C, and Component E as they are the Parent Component of Component D and F. It decreases the efficiency of our software.

Method 2.) Use Context API

We will make use of Method 2:

Steps to Create Context

1.) Create the context
2.) Provide the context value
3.) Consume the context value

Let us consider only the case from (C -> E -> F).

Step 1:) Create the Context:

In the first Step, we have made a context using React.createContext().

Step 2.) Provide the context value:

Now, we have used the Context Provider to pass the value to the components.

Note: value passed in Provider will be passed to all the components (and their Child Components) present inside the Provider Tag. In our case, the value will be passed to Component C and its child Components (i.e Component E and Component F).

Step 3.) Consume the context value:

Now we need to Consume the context value which we have passed down to Component C and its child Components. We will consume it in Component F.

In the return statement, place a Consumer tag and enclose the JSX function in it having the context value as arguments (username as an argument in our case).

Output:

This is how you can make use of Context API.

It can be noted that there is a little bit of hassle in order to consume context value

In order to make consumption of context value an easy task, we will make use of the useContext hook in the upcoming post!

Stay tuned for the upcoming posts of the Series!!

I hope it might help you, Feel free to leave a comment if you have any doubt!

Feedbacks are always welcome!

Happy Coding!

-Jayant Khandelwal

DEV Community: Jayant Khandelwal

Re-rendering in react

What the hell is CDN?

The Box Model

Performance optimization Hook: *useCallback* and *useMemo* hook!

The best Couple: useContext + useReducer !

Fetch using useReducer!

useReducer Vs useState (The War)

useReducer final destination (Signing Off):

useReducer (The Intermediate):

Getting started with useReducer Hook!

Making use of useContext Hook!

Context ApI + useContext Hook (The deadly Beast)!!

Performance optimization Hook: useCallback and useMemo hook!