DEV Community: Shaik Dawood

Post 5: 🚀 From Slow Load to Lightning Speed: Quantifying Our React Performance Wins!

Shaik Dawood — Fri, 18 Apr 2025 17:26:23 +0000

Hey Devs! 👋

This is the final post in our series on optimising React applications, and it's time to reveal the juicy results! We've been hard at work, and the performance improvements are pretty dramatic. Let's dive into the numbers and see how much faster our app has become.

**
📊 The Results and Impact: Quantifying a 70% Faster Load and 80% Quicker Build**

We started with a set of initial performance metrics, and after implementing code splitting, lazy loading, and caching strategies, the difference is night and day.

Here's a quick recap of what we set out to improve:

Page Load Time: How long it takes for users to see and interact with our app. ⏳
React Build Time: How long it takes for us, as developers, to build the app. 🛠️

📈 Performance Metrics Comparison

⚡️ Page Load Time: A User's Delight

We've achieved an approximate ~70% reduction in page load time! 🚀 To measure this, we used a combination of browser developer tools and performance testing tools. This improvement means:

Lower bounce rates: Users are less likely to leave a site that loads quickly. 📉
Increased conversion rates: A faster site improves user experience, making them more likely to complete desired actions. ✅
Happier users: Nobody likes waiting for a slow website! 😊

A faster loading time translates directly to a better user experience and improved business metrics. It's a win-win! 🏆

⚙️ React Build Time: A Developer's Dream

Our React build time has been slashed by approximately 80%! 🤯 We measured this using our build tools, and the impact on our development workflow is significant:

Faster iteration cycles: We can see the results of our code changes much more quickly. ⏩
More frequent deployments: Shorter build times enable us to deploy updates more often. 🚀
Reduced CI/CD pipeline duration: Our overall software delivery process is now more efficient. ⏱️
More productive developers: Less time waiting for builds means more time for coding! 🧑‍💻

🛠️ Key Tools and Technologies

To achieve these gains, we leveraged several key tools and technologies:

CRACO: To customize our Create React App configuration. ⚙️
webpack: For optimizing our JavaScript modules. 📦
React's lazy loading: To load components on demand. ⚛️

🎉 Conclusion: A Faster Future for Our App

Our performance optimisation journey has been a resounding success. We've significantly improved both the application's performance and our development team's efficiency. By focusing on key areas like code splitting, lazy loading, and caching, we've created a faster, more enjoyable experience for our users and a more efficient workflow for our developers.

Now it's your turn! Share your own performance optimisation experiences and ask any questions you have in the comments below. Let's make the web a faster place, one React app at a time! 🚀✨

Happy Coding!

Post 4: Caching and Cache Busting - Ensuring a Smooth User Experience:

Shaik Dawood — Fri, 18 Apr 2025 17:06:41 +0000

Hello Devs! 👋

Welcome to the fourth post in our series, where we'll dive into the crucial world of caching and cache busting. These techniques are essential for delivering a consistently fast ⚡️ and reliable user experience.

Browser Caching: The Speed Booster 🏎️

Browser caching is like giving your users' browsers a super-short-term memory. It stores copies of static assets (think JavaScript, CSS, and images 🖼️) locally on their computers.

Why is this awesome? 🤔 When a user revisits your application, the browser can grab these assets from its local cache instead of downloading them again from your server. This results in significantly faster load times for those return visits. Think of it as giving your users a VIP pass 🎫 to your site!

Effective use of browser caching is key 🔑 to improving the perceived performance of web applications, especially for those loyal, returning users.

The Cache Challenge: When Updates Go Missing 🕵️‍♂️

Here's the catch: what happens when you update your application and deploy new versions of those static assets? If the browser is still using the old cached versions, users won't see the latest and greatest changes. This can lead to inconsistencies, errors, and a generally confusing experience. Imagine releasing a hotfix 🔥, but no one sees it! 😱

Cache Busting to the Rescue! 🦸

This is where cache busting comes in. It's a set of techniques we use to make sure the browser fetches the new versions of assets when they're updated, while still taking advantage of caching for the assets that haven't changed. It's like giving the browser a gentle nudge 😉 to update its memory.

Our Weapon of Choice: Filename Hashing 💥

One of the most common and effective cache busting strategies is to incorporate hashing into the names of our code chunks.

How it works: We include a hash of the file's content in its name.
The magic: If the file's content changes, the hash changes, and therefore the filename changes.
The result: The browser sees it as a new file and downloads it. If the content doesn't change, the filename stays the same, and the browser uses the cached version.

This allows us to cache files indefinitely, because the filename will only change when the content changes. It's like having a self-updating memo! 📝

How we did it: In our project, we added hashing to the chunk names using webpack configuration within CRACO. Here's a simplified example of the kind of modification we made:

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.output.filename = 'static/js/[name].[contenthash:8].js'; // Added contenthash
      webpackConfig.output.chunkFilename = 'static/js/[name].[contenthash:8].chunk.js'; // Added contenthash
      // ... other webpack configurations
      return webpackConfig;
    },
  },
};

In this example, [contenthash:8] adds an 8-character hash to the filename. When the file content changes, the hash, and thus the filename, will be different.

Beyond Hashing: Other Cache Busting Techniques 🛠️

While filename hashing is powerful, there are other techniques, such as:

Versioning: Adding a version number to the asset URL (e.g., style.css?v=1.2).
Query parameters: Appending a unique query parameter to the asset URL (e.g., script.js?t=1678886400).

Our Project's Approach: We implemented filename hashing in our project to address chunk loading errors. This approach provided the most robust and automated solution, ensuring that users always get the correct version of our code. We found it to be less error-prone than manual versioning or query parameter manipulation.

Handling the Unexpected: Chunk Loading Errors 😬

Even with the best cache busting, sometimes things can go wrong. Chunk loading errors can still occur due to network issues, incomplete deployments, or other unforeseen circumstances.

To handle these situations gracefully, we implemented strategies such as:

Retry mechanisms: Automatically retrying to load the chunk after a delay.
Fallback UI: Displaying a user-friendly message or a simplified version of the application if a chunk fails to load.

A robust error handling strategy ensures that your application remains resilient, even when things don't go as planned. Think of it as having a backup plan 🛡️ in place.

The Dynamic Duo: Caching and Cache Busting Together 🤝

Caching and cache busting work together to give your users the best of both worlds:

Fast initial load times: Caching ensures that static assets are loaded quickly on subsequent visits.
Up-to-date content: Cache busting guarantees that users always see the latest version of your application.

By implementing these techniques effectively, you can optimize your application's performance, improve user satisfaction, and create a truly seamless and up-to-date user experience. It's a win-win! 🎉

Key Takeaways:

Browser caching speeds up repeat visits.
Cache busting ensures users get the latest updates.
Filename hashing is a powerful cache busting technique.
Robust error handling is crucial for a resilient application.

I hope this post has helped you understand the importance of caching and cache busting. Let me know if you have any questions or want to share your own caching strategies in the comments below! 👇

Happy coding! 🚀💻

Post 3: Strategic Lazy Loading in React - Naming and Optimising Chunks

Shaik Dawood — Fri, 18 Apr 2025 16:35:44 +0000

Hey Devs! 👋

Welcome to the third post of our blog series on Optimising React applications! Today, we're diving deep into a powerful technique: Lazy Loading. This is a game-changer for performance, so buckle up! 🏎️

What is Lazy Loading?

Imagine your app as a big house 🏠. You don't need to load everything at once, right? Lazy loading is like only loading the furniture when you enter a specific room. In React, it means loading components only when they're actually needed. This is super useful for components that aren't immediately visible, like those in different routes or behind user interactions (think modals or tabs).

Why is this important? 🤔

Faster Initial Load: Smaller initial bundle = quicker first paint. 🎨
Improved User Experience: Users can start interacting with your app sooner. 🤩
Reduced Overhead: Less code to process upfront. 🧹

React.lazy() and to the Rescue!

React provides two awesome tools for lazy loading:

React.lazy(): This function lets you dynamically import components. Think of it as saying, "Hey React, load this component later when I need it." ⏳
: This component lets you show a fallback UI (like a loading spinner 🌀) while the lazy-loaded component is being fetched. It prevents your app from freezing.

Here's a simplified example:

import React, { Suspense } from 'react';

const MyLazyComponent = React.lazy(() => import('./MyComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading... ⏳</div>}>
      <MyLazyComponent />
    </Suspense>
  );
}

Naming Your Chunks: Why It Matters 🏷️

When you lazy load, webpack (or your bundler) creates separate "chunks" of code. By default, these chunks have generic names. But, giving them custom names is super helpful!

Why ?

Better Organization: Makes your code easier to manage. 🗂️
Easier Debugging: You can quickly identify which chunk belongs to which component in your browser's network tab. 🕵️‍♀️
Improved Analysis: Tools like webpack-bundle-analyzer become much more useful. 📊

How to Name Your Chunks

You can use "magic comments" within your dynamic imports:

const MyLazyComponent = React.lazy(() =>
  import(/* webpackChunkName: "my-custom-component" */ './MyComponent')
);

In this example, the lazy-loaded chunk will be named "my-custom-component". 🎉

Lazy Loading Strategies: Route vs. Component

There are two main strategies:

Route-Based Splitting: Lazy load components for different routes. This is great for multi-page applications. 🗺️
Component-Based Splitting: Lazy load individual components within a route (e.g., a large modal or a tab). This is useful for optimizing single-page applications. 🧩

Advanced Optimisation: Preloading and Prefetching

For even more speed, consider:

Preloading: Tells the browser to download a resource as soon as possible during the page load.
Prefetching: Tells the browser that a resource might be needed in the future.

Conclusion: Faster Apps with Smarter Loading!

Strategic lazy loading, especially with custom chunk names, is a powerful way to significantly reduce page load times and improve the overall user experience. By loading code only when needed, you create a faster, more efficient application. 🚀

Key Takeaways:

Use React.lazy() to dynamically import components.
Use to provide a fallback UI.
Use "magic comments" to name your chunks.
Choose the right lazy loading strategy (route-based or component-based).
Consider preloading and prefetching for extra performance.

Happy coding! 👨‍💻👩‍💻

Post 2: Mastering Code Splitting with Webpack and CRACO - A Deep Dive:

Shaik Dawood — Fri, 18 Apr 2025 16:14:12 +0000

Hey Devs! 👋 Welcome back to our series on optimizing your React apps. In this second post, we're diving deep into a crucial performance-enhancing technique: Code Splitting.

What is Code Splitting? 🤔

Imagine you're loading a huge website. 🐌 Everything loads at once, even the parts you don't see immediately. That's inefficient, right? Code splitting solves this!

It's the process of breaking down your application's code into smaller chunks. 📦 These chunks are then loaded on demand, only when the user needs them. This leads to:

🚀 Faster initial load times.
⚡ Improved performance.
📱 Reduced resource consumption.

Think of it like ordering pizza 🍕 slice by slice, instead of getting the whole pie at once!

Webpack and CRACO: The Dynamic Duo 🦸‍♂️🦸

Under the hood, Create React App (CRA) uses Webpack to bundle your code. Webpack takes all your JavaScript, CSS, and assets and transforms them into optimised bundles for the browser.
CRA provides a default Webpack configuration, which is great for getting started. But what if you want to customise it? That's where *CRACO (Create React App Configuration Override) * comes in! 🛠️
CRACO lets you tweak Webpack's configuration without ejecting from CRA. This is a game-changer! 🤩 It gives you the power to implement advanced techniques like code splitting.

Splitting node_modules: A Performance Boost 🚀

One of the most effective code-splitting strategies is to split your node_modules directory. 📦 This directory often contains a ton of third-party libraries. Bundling them all into one massive file can significantly slow down your initial load time. 🐢

By splitting node_modules into separate vendor chunks, you achieve:

✅ Improved caching: Browsers can cache these less frequently changing dependencies separately.
📉 Reduced main bundle size: The initial download is smaller and faster.

Here's a simplified example of how you might configure this in your craco.config.js:

Explanation:

We're modifying the splitChunks configuration in Webpack.
The cacheGroups option lets us define how chunks are created.
We create a vendor chunk that includes modules from node_modules.
We also create a common chunk for modules used in multiple places.

*Important Note: * This is a simplified example. Webpack configuration can be complex, and the optimal setup will depend on your specific project. Always test thoroughly!

Build Time Considerations ⏱️

Keep in mind that code splitting might slightly increase your initial build time. 👷‍♀️ This is because Webpack has to do more work to create multiple bundles.

However, the long-term benefits of improved caching and faster initial load times usually outweigh this initial trade-off. ⚖️

Conclusion: Split It Up! 🎉

Splitting your node_modules and other parts of your code is a powerful way to optimise your React applications. 🚀 By using Webpack and CRACO, you can effectively implement code splitting and deliver a faster, more efficient experience to your users. 💯

Key Takeaways:

Code splitting improves performance by loading code on demand.
Webpack bundles your code, and CRACO lets you customize its configuration.
Splitting node_modules enhances caching and reduces initial load time.
Analyze your bundles with tools like webpack-bundle-analyzer.
Be aware of potential build time increases.

Happy coding! 💻

Post 1: The Performance Optimisation Journey - Setting the Stage with CRACO:

Shaik Dawood — Fri, 18 Apr 2025 15:49:03 +0000

Introduction

In today's fast-paced digital landscape, application performance is paramount 🚀. A sluggish application can lead to frustrated users 😡, decreased engagement 📉, and ultimately, a negative impact on business outcomes 💸. Similarly, long build times can significantly hinder developer productivity 👨‍💻 and slow down the entire development lifecycle ⏳.
This This blog post is the first in a series that will delve into how we tackled performance challenges in our React application ⚛️, focusing on improving both page load times ⏱️ and build durations 🛠️. We'll explore how we used CRACO ⚙️ to customise our Create React App (CRA) configuration, and the strategies we employed to achieve significant performance gains 💪.

The Performance Challenge

We began with an application that, while functional, suffered from performance bottlenecks 😫. Users experienced slow page load times 🐌, leading to a less-than-ideal user experience 😞. Studies have shown that a large percentage of users abandon a website if it takes more than a few seconds to load ⏳. Beyond the user-facing issues, our development team was also grappling with prolonged build times 🏗️. These extended builds slowed down our iteration cycle 🔄, making it more time-consuming to deploy updates and new features 🚀.

Why Performance Matters

The importance of optimal performance cannot be overstated 💯. For end-users, a fast and responsive application translates to a smooth and enjoyable experience ✨. Faster loading times lead to increased user engagement 📈, higher conversion rates 💹, and improved user satisfaction 😊.
For developers, efficient build times are crucial for maintaining productivity and agility ⚡. Shorter builds mean faster feedback loops 🔄, quicker deployments 🚀, and reduced development costs 💸. This allows teams to iterate more rapidly 🏃‍♂️, respond to user needs more effectively 🎯, and deliver value more quickly 🏆.

Enter CRACO: Customising CRA Without Ejecting (https://craco.js.org/)

Create React App (CRA) provides a fantastic foundation for building React applications ⚛️, offering a pre-configured build setup that simplifies development 😌. However, the default configuration can sometimes be limiting when it comes to performance optimization ⚙️. While CRA is great, many teams, including ours, prefer to avoid "ejecting" from CRA 🙅‍♂️. Ejecting provides full control over the configuration, but it also means losing the benefits of CRA's managed build process and automatic updates 📦. We wanted a solution that would allow us to customise the configuration without sacrificing these advantages 💡.
This is where CRACO (Create React App Configuration Override) comes in ✨. CRACO allows us to customise the underlying Webpack configuration ⚙️ and other build settings of a CRA application without ejecting 🥳. This approach provides the flexibility we need to optimise performance 💪, while still allowing us to benefit from CRA's ease of use and ongoing updates 🔄.

Why CRACO?

We chose CRACO over other options, such as ejecting from CRA or using other configuration management tools, for several key reasons:

Maintainability: CRACO allows us to customize the configuration while still benefiting from CRA's updates and improvements 🔄. Ejecting would have placed the burden of maintaining the entire build process on our team 👨‍🔧.

Simplicity: CRACO is relatively easy to set up and use 😌. It provides a clean and intuitive way to modify the configuration without requiring deep knowledge of webpack 🧠.

Flexibility: CRACO provides the necessary flexibility to customize Webpack and other build settings to address our specific performance needs ⚙️.

CRACO allowed us to fine-tune our build process for optimal performance 🚀, addressing both page load times ⏱️ and build durations 🏗️, without sacrificing the benefits of the CRA ecosystem ⚛️.

Looking Ahead

This post has set the stage for our performance optimisation journey 🗺️. We've outlined the challenges we faced 😫, explained the importance of performance 💯, and introduced CRACO as our tool of choice ⚙️. In the upcoming posts in this series, we will dive into the specific optimisation techniques we implemented, including:
Code splitting and lazy loading ✂️
Bundle analysis and optimization 📦
Caching strategies 🗄️
Build process optimizations 🛠️

We'll share our experiences, code examples 💻, and the results we achieved 💪, providing a practical guide for improving the performance of your own React applications ⚛️. Stay tuned! 📣

🔥JavaScript Interview Questions for Machine Coding rounds⚡

Shaik Dawood — Wed, 11 Aug 2021 11:25:27 +0000

Hello everyone,👋

In this article we'll discuss about JavaScript Interview questions that will be asked in the Machine Coding Rounds or Code Assignment Rounds.

🔥 I've listed out some of the questions which may ask in the UI interviews.

Comments Widget: 👉 We need to develop a comments widget with functionality as shown below:
- Able to comment.
- Edit the comment.
- Delete the comment.
- Like the Comment.
- Nested Comments.
Todo App:
👉 We need to develop a Todo App with functionality as shown below:
- Create, Edit, Delete Lists.
- DND (Drag and Drop Cards ) feature.
Food Ordering App:
👉 We need to develop a Food Ordering App with functionality as shown below:
- Able to display Restaurants information using an API or create a JSON.
- Display menu of Food Items.

We'll discuss this questions one by one in this Blog only. Stay tuned for it.😎

{ .....
..
... to be continued.
}

🔥 Advanced JavaScript Concepts.😎

Shaik Dawood — Wed, 11 Aug 2021 11:19:09 +0000

Hello everyone,👋

If you are new to JavaScript, it can be little bit of challenging to understand some core and Advance topics 🤷‍♂️. But don't worry keep your fingers crossed🤞 because in this article you'll get full information regarding Advanced JS Topics😁.

⚡ 1. Closures:

👉 MDN Def: A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

Doesn't sound great to you???🤔 Don't worry. Stay tuned.🔥

So, Basically a function bind together with its lexical environment or lexical scope is known as Closer. Let's see what exactly is lexical scope.

⚡The word lexical refers to the fact that lexical scoping uses the location where a variable is declared. Nested functions have access to variables declared in their outer scope.

⚡ Running this code has exactly the same effect as the previous example of the x() function above.
⚡ What's different (and interesting) is that the displayName() inner function is returned from the outer function before being executed. The reason is that functions in JavaScript form closures. A closure is the combination of a function and the lexical environment within which that function was declared.

✅ Every closure has three scopes:

Local Scope (Own scope).
Outer Functions Scope.
Global Scope.

✅ Let's say a function can access some variables of it's lexical environment or parent scope, the function actually remembers the reference of variable but it's value.

Let's look at the code:

Now you might have a bit understanding of Closures right.😎

✅ let's see some of uses of Closures:

Module design pattern.
Currying.
Functions like once.
Memoize.
Maintaining state in Async World.
setTimeouts.
Iterators.
and so on.......!.

{ .....
..
... to be continued.
}

🔥 React Hooks.😎

Shaik Dawood — Wed, 11 Aug 2021 07:23:38 +0000

Hello everyone,👋

In this article we'll discuss about React Hooks. Before the release of React Hooks, its functional components were a bit limited in usage. I mean, when it comes to working with State, context API, and some Lifecycle methods there was nothing we could do.
But, starting from React 16.8, we have a lot more flexibility to reuse an existing piece of code.

✨Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components.

✨ Hooks don't work inside class components. They let you use React without the class.

✨ Hooks will reduce your component size significantly and have many other benefits.

🔥 3 Rules of using Hooks:

You can use hooks only inside a function components. Not inside class components because classes already have features what hooks enable you to do.
You should call hooks only at the Top Level of the function. Don't call Hooks inside loops, conditions, or nested functions.
There is just one other valid place to call Hooks is your Custom Hooks.

Let's get Started with the top most great React Hooks.🔥

⚡ 1. useState( ) Hook:

👉 The useState( ) hook lets you add react state to function components. So function components are no longer stateless.

👉 The useState( ) is the most commonly used Hook that allows you to create, read and update simple internal state variables in your react function component.

Sounds great right, Stay tuned then.😎

🤷‍♂️ Why useState( ) is not named as createState( ) ?🤔

👉 Create would imply that the state was created for the first time when the component renders. But the useState( ) executes every time the function component re-renders.

👉 During the subsequent re-renders, the useState( ) hook will give us the Current State.

👉 So "use"State( ) is appropriate name.

Let's look at the syntax of useState( ):

👉 useState hook always returns an array with 2 values.

The State variable itself.
A function to update the state variable.

👉 If you use this state variable inside JSX, the component re-renders every time the value changes.

👉 The setVariable function is used to update the state variable whenever needed in the component.

👉 The "setVariable" name doesn't really matter. You can name it anything you want.

Let's look at few examples of the useState( ):

⚡ 2. useEffect( ) Hook:

👉 The Effect Hook lets you perform side effects in function components. If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

👉 It is like a Functional programming concept, where we try to encapsulate side effects in other functions so that other Functions can stay pure/unaffected.

👉 useEffect hook must declare inside the component (top-level, don't declare them in the block), it will give several advantages (Thanks to closure):

It will have accessibility to those data that are required to use in side effects.
It can also update the data later, based on the dependencies and changes.

The syntax of Effect hook is below:

Syntax:

The first argument in useEffect is to give side effects function.
The second argument is the dependencies array which gives instructions to useEffect hook when to run and when to not. Let's see this more closely:
- If you don't give dependences array, only pass the first argument, then useEffect runs whenever your component renders/re-renders.
- If you give an empty dependences array, then useEffect runs once(when your component renders the first time, after that, it will not run unless you refresh the page).
- If you give something in the dependencies array, then useEffect will run once by default after the component finish rendering. After that, whenever the value of elements in the dependences array change, then useEffect will run again. Example: [isItemHidden].

👉 Well, whenever your components finish rendering, useEffects run unless you specified dependencies in the dependencies array.

🤷‍♂️ Why should we use useEffects( )? 🤔

There are several cases where you should consider useEffects. Some of them are:

Suppose you are fetching some data online to display movie titles, ratings & you have used handler(Function with the synthetic event) or used inline Functions to get that data. So, what will happen is your component rendering will be stuck when the thread of execution reaches this point until you get the data from outside of the world.
By seeing the first point, we can move those side effects to the useEffect hook so that our components can load/render. After completing the rendering process, React Engine will fire the useEffect hook to run the side effects code and update the component data.
We should useEffect, when your component depends on the outside world data, and we can not guarantee that data will come or not (maybe the server is down there). So, Instead of throwing errors and stop other components from being rendered, move them into useEffect hook.
When you are using browser API (including Timer function, fetch API, local storage and for more browser API, refer to this: MDN Browser API).

🌈 Some use cases of React useEffect hook:

Always run whenever component renders/re-renders.
Run once after that if component re-renders, then it will not run.
Run once by default after that if prop values changes, then run.
Run once by default after that if state changes than run.

⚡ 3. useContext( ) Hook:

👉 To understand the useContext( ) hook properly, first we have to understand what "Context" stands for...🤔

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

👉 In a typical React application, we have components from Parent to children and grandchildren. Let's say we have to pass some data from parent component to grandchild component, to do that we need to pass the data from each and every component to the last component. This is known as prop drilling.

In this one the data is passed top-down (parent to child) via props. But that method can be clumsy for certain data.

👉 So to overcome that Context comes into the picture. The context provides a way to share values between components without having to explicitly pass a prop through every level of component tree.

🤷‍♂️ When should we use Context ? 🤔

👉 If the data is supposed to use as "Globally" then we should use context. Basically, context is designed to share data that can be considered "global" for a tree of react components.

🌈 So in order to apply the methods of context, we have React Context API.

React.createContext:

👉 It is used to create a context object. When React renders a component that subscribes to this context object it will read the value of this context.

Context.Provider:

👉 Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.

👉 Basically once we wrap our parent component with the context provider the parent component and as well as child component can access to the prop value given by the Context Provider using useContext( ) hook.

Summarization of useContext: 🔥

👉 The useContext( ) hook is used to store the context for a React component through a context provider.
👉 Wrap the provider to the component like below

👉 Access the context like below inside myComponent
👉 The value of the context will be the value passed to the nearest parent provider.
👉 When the nearest parent provider updates, will get re-rendered with the latest context value.

And Much More…🔥😎

👉 There are other Hooks as well in React. Will try to continue it as series. Stay Tuned.

If you liked this post, please react and let me know what you think in the comments! See you in next Article. Goodbye.

🔥EcmaScript 6 (2015 Edition) Top Features.🔥

Shaik Dawood — Wed, 11 Aug 2021 03:24:35 +0000

Hello everyone,👋
In this article we'll list out the top features of EcmaScript6 (2015 Edition). ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.

Let's get Started with the top most great features of the ES6.🔥

⚡ 1. Default Parameters in ES6:

Functions can now be defined with default parameters. Missing or undefined values are initialized with the default value.
The syntax of Default Parameters in ES6 is below.

In JavaScript, function parameters default to undefined. However, it's often useful to set a different default value. This is where default parameters can help.

In the past, usually for setting defaults was to test parameter values in the function body and assign a value if they are undefined.

Let's have a look at example below, if no value is provided for b when multiply is called, b's value would be undefined when evaluating a * b and multiply would return NaN.

To handle this situation the Default Parameters of ES6 comes into the picture. Checks in the function body are no longer necessary. Now, you can assign 1 as the default value for b in the function head.
Have a look at example below.

👉 The default values can be more than just values, they can be expressions or functions.

Let's move to another feature of ES6.

⚡ 2. Template Literals in ES6:

Template literals make working with string so much easier than before. They're started with a back tick and can have variables inserted using ${variable}. So in ES5 we had to break the string like this:

Luckily, in ES6 we can use a new syntax ${NAME} inside of the back-ticked string:

😎This makes life far simpler and code easier to read. You can put anything inside of the curly braces: variables, equations, or function calls.

👉 Expression Interpolation:

In order to embed expressions within normal strings, usually we use the following syntax:

But now, with template literals, you are able to make use of the syntactic sugar, making substitutions like this more readable:

👉 Multi-Line Strings:

Another yummy syntactic sugar is multi-line string. In ES5, we had to use one of these approaches:

While in ES6, simply utilize the backticks:

⚡ 3. Destructuring in ES6:

Destructuring is the process of taking apart the array or object on the left hand side of the equal sign. The array or object can come from a variable, function or equation.
Let's have a look at below.

With objects destructuring the keys of the object can be listed inside curly braces to extract that key-value pair.

Sometimes you want to extract the values but assign them to a new variable. This is done using a 'key: variable' pairing on the left of the equals sign.

Another thing that object destructuring allows is assigning a value to multiple variables.

⚡ 4. Arrow Functions in ES6:

Arrow functions have 2 main ways: their structure and their 'this' binding.
They can have a much simpler structure than traditional functions because they don't need the 'function' key word and they automatically return whatever is after the arrow.
The fat arrows are amazing because they would make your this behave properly, i.e., this will have the same value as in the context of the function—it won’t mutate. The mutation typically happens each time you create a closure.

Using arrows functions in ES6 allows us to stop using that = this or self = this or _this = this or .bind(this). For example, the following code in ES5 is weird:

Luckily due to ES6 feature this code can be written as below.

👉 The parenthesis () are optional for single params in an arrow function signature. You need them when you use more than one param.

👉 One of the most useful places for arrow functions is in array functions like .map, .forEach or .sort.

⚡ 5. Spread Operator in ES6:

ES6 introduces the ... operator which is referred to as the spread operator. It has two main uses: spreading an array or object into a new array or object, and joining multiple parameters into an array. The first use case is the one you'll probably encounter most so well look at that first.

This can be very useful for passing in a set of variables to a function from an array.

An object can also be spread, inputting each of the key value pairs into the new object.

👉 Rest Syntax(Parameters):

Rest syntax looks exactly like spread syntax. In a way, rest syntax is the opposite of spread syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element.

⚡ 6. Number Literals:

ES5 code handled decimal and hexadecimal number formats well but octal form wasn't specified, and was actively disallowed in strict mode. ES6 has added a new format, adding an 'o' after the initial 0 to declare the number an octal. They've also added a binary format.

⚡ 7. The “let” and “const” keywords:

Let and Const are different ways of creating variables. We all are very well familiar with the var keyword which is used to create variables. Right!? Although, you can still use var to create variable although, you are highly encouraged to use let and const instead.

👉Let and const are different in terms of the use and scope.

👉Let is actually used for variable use where you need to reassign the value of variable but const is used when you don’t need to change its value once it is declared. Reassigning the value to the const type variable will trigger an error.

👉Moreover, difference between let and var is function scoped while let is blocked scoped.

And Much More…🔥😎

👉There is much, much more that ES6 offers us to make our code cleaner, shorter, easier to read and more robust.🔥

If you liked this post, please react and let me know what you think in the comments! See you in next Article. Goodbye.

Asynchronous JavaScript 🔥😎

Shaik Dawood — Tue, 10 Aug 2021 18:05:47 +0000

Hello everyone,👋
If you are new to JavaScript, it can be little bit of challenging to understand its async nature🤷‍♂️. But don't worry keep your fingers crossed🤞 because in this article you'll get full information regarding asynchronous JS😁.

To understand asynchronous JavaScript, firstly we need to understand what is Synchronous JavaScript🤔. The term Synchronous defines the only one task can be done at a time. So in JavaScript, in a particular block of code the lines ate executed one by one. While each operation is being processed, nothing else can happens because the rendering is paused🥴. This happens because the JavaScript is a single threaded language, only one thing can happen at a time on single main thread and everything else is blocked until an operation completes.

⚡So, in simple terms the Asynchronous JavaScript is Start something now and finish it later. So it governs how we perform the tasks which takes some time to complete. Many Web API features now use asynchronous code to run, especially those that access or fetch some kind of resource from an external device, such as fetching a file from the network, accessing a database and returning data from it.

Still confusing why we need Asynchronous ??🤐. Let's look at the following Image to get a clarity.

Alright folks, now we know that how asynchronous code works right. Let's head over to another topic.

⚡HTTP Requests: We generally used to make the HTTP requests to get the data from another server. We make these requests to API Endpoints.
🌈Look at the following Image.

Most of the data is grabbed in the JSON Format.
Wondering how to make the HTTP request?. Observe the following code:

Now we got to know that how to make request right. But how do we access the response data?🤔. Well in our code we can track the progress of request using an Event Listener and a specific event called readystatechange . Let's implement that in our code.

So by using this code we can make a HTTP request.🤜🤛
Sounds Overwhelming ?? 🤷‍♂️ Well hold on there's lot more to go.✌

Let's move on to the next topic:

⚡Callbacks:
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of task.🌈

Let's look at the example code below.

However, that callbacks are often used to continue code execution after an asynchronous operation has completed — these are called Asynchronous Callbacks. A good example is the callback functions executed inside a ".then()" block chained onto the end of a promise after that promise fulfills or rejects. This structure is used in many modern web APIs, such as "fetch()".
⚡Definition of Async Callback: The Asynchronous Callbacks are the functions that are specified as arguments when calling a function which will start executing code in the background. The best example for Async Callback is the Second Parameter of the .addEventListener .

Let's deep dive into some more topics now.

⚡Promises:

👉Def: A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.
Sounds tedious right?🥴. Well don't worry let's understand it in simple way.

⚡👉"Producing Code" is code that can take some time.
⚡👉"Consuming Code" is code that must wait for the result.
⚡⚡ A promise is a JavaScript object that links Producing code and consuming Code.

So Technically a promise is simply an object in JavaScript. A promise is always in one of the three states:

➡️ pending: which is initial state, neither fulfilled nor rejected
➡️ fulfilled: meaning that the operation completed successfully.
➡️ rejected: meaning that the operation failed. So basically we cannot access the properties state and results, we must use promise method to handle promises.

How to implement that is shown below:

Now why we need Promises?🤔

Promises help us to deal with asynchronous code in a far more simpler way compared to callbacks.
Callback hell can be avoided with Promises.

Look at the below image to get a idea about Promises.

Let's jump into another topic:

⚡Async / Await: Async and await make promises easier to write.

Async makes a function return a promise.
Await makes a function wait for a promise.

The await keyword can only be used inside an Async Function. Async / await is another way of handling promises in JavaScript. One of the main advantage of using it is clean code.
In general, we use .then().catch() to handle promises right, but now let's handle it using async / await. We can write using function statement or function expression. Both will be valid, only difference is use of anonymous function in function expression.

To handle error in async await, we can use 'try and catch'

Look at the code below for the same:

Conclusion:

The web browsers define functions and APIs that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs. If we're running an operation that takes time however, like querying a database and using the results to populate templates, it is better to push this off the stack and complete the task asynchronously. Over time, you'll learn when it makes more sense to choose an asynchronous technique over a synchronous one.

See you in next article. Goodbye 🖐.

Data Structures & Algorithms in JavaScript -- PS-1.

Shaik Dawood — Wed, 04 Aug 2021 06:20:13 +0000

Given an array, find the first pair whose sum is equal to zero?

Input = [-5, -4, -3, -2, 0, 2, 4, 6, 8].

Output = [-4, 4].

Solution:
Check the given array is sorted or not. If not sort the array.

Approach 1:

We need to traverse the each and every element of the array and compare it with other elements of the array.
We have to apply two loops in it. The first loop (outer one) will start traversing from 0 index of the array and the second loop (inner one ) will start traversing from 1 index of the array. If the sum of 0th index of array and 1st index of array is equal to ZERO then return the pair.
By using this approach we will get Quadratic Time Complexity O(n²).

Approach 2:

Let's assume to variables and assign them with 0 index and last index of array:

let left = 0;
let right = array.length - 1 ; We need to run a single loop in which we will check if the sum of the left index value and right index value of the given array is equal to Zero, then return that Pair. If sum (left, right) > 0 then decrement the right variable (right--). If sum (left, right) < 0 then increment the left variable(left++). By this approach we can get the Pair of Sum Zero in only one loop.

By using this approach we will get Linear Time Complexity O(n).