DEV Community: Amr Guaily

DOM vs Virtual DOM

Amr Guaily — Mon, 06 Mar 2023 11:47:31 +0000

⏩ What is DOM❓

DOM stands for => Document Object Modal
DOM is a Programming Interface for the HTML document that allows us to create, change, add, or remove elements from the HTML document.
DOM is represented as a tree data structure.

🤔 At this point you may be wondering, and ask yourself Why can't update HTML document directly.. Why DOM is Required ❗❓
✅ We need DOM because JS doesn't natively understand HTML document. So the browser creates DOM. therefore we could say that DOM is an API that represents the same HTML document but in different format (object format).
For example: JS can't understand the <h1></h1> tag in HTML documents ,it only understand h1 object in DOM.

Updating DOM is Expensive, WHY ❗❓

✅ Whenever DOM changes it causes browser to run two expensive operations: Reflow and Repaint

Because of how updating DOM is expensive - React is using Virtual DOM.

⏩ What is Virtual DOM❓

React uses virtual DOM which is a lightweight copy of the actual DOM, the only difference is the ability to directly change the layout of the document.

How DOM updates in React❓

On the first run, both virtual DOM and real DOM are created.
Whenever state changes:
- React creates a new virtual Dom and compare it with the previous one.
- The compression is done by Diffing Algorithm.
- After compering react creates a new virtual Dom with the changes.
- Then React updates the real DOM without rendering the entire DOM, and this is how virtual DOM is helping to enhance performance.
This entire process of transforming changes to the real DOM is called Reconciliation.

🤔 Suppose we have new data similar to the previous one?

✅ In that case React compares previous and new structures and sees that it has no change, so nothing gets rendered to the Browser. This is how the Virtual DOM is helping to enhance the Browser performance.

🤔 Is Virtual DOM the only way to reduce costly DOM operations?

✅ Not necessarily, other frameworks like ember.js, angular, and svelte uses different approaches to solve the very same problem.

⏩ Recap:

⏩ Learn Further:

https://www.geeksforgeeks.org/reactjs-virtual-dom/
https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg
https://www.geeksforgeeks.org/reactjs-reconciliation/

useEffect: some issues with data fetching in Effects?

Amr Guaily — Mon, 24 Oct 2022 15:48:54 +0000

In this tutorial we will discuss some issues with data fetching in useEffect:
1. Race Conditions
2. No Caching
3. No content in initial HTML
4. Slow network waterfalls.

1️⃣ Race Condition

You have a component that accepts an id as a prop, uses that id to fetch corresponding data and display it.

I made a Sandbox . to make it more clear for you, And i also use setTimeOut() to add random wait period.

Now, Where is the Problem ⁉
If you rapidly click the Fetch data! button several times. The app will make several requests with different ids which will finish randomly out of order. And as a user, I expect to see the result of the last request. but this may not be the case, our app displays a different result depending on which request completes first. Try it yourself.

For Example: Here I expect to see the result of last request which id == 58, but the request with id == 10 finishes after the last request, So our app display its result.

How can I fix Race Conditions ⁉
To fix the race condition, we need to add a clean-up function to ignore stale responses - There are 2 main approaches:
1. Use Boolean flag.
2. Use AbortController.

⏩ Clean-up Function with Boolean Flag

According to React's official Docs:

If a component renders multiple times The previous effect is cleaned up before executing the next effect.

So, In the above code:
• Changing id will cause a re-render.

• On every re-render the clean-up function gets run first to clean-up effects from the previous render before executing the next effect.

• ignore is set to true in the clean-up function, so the previous requests won't be able to update our state.

• Now, We still send a request with each click on fetch data! button, But only the results from the last request will be used. check out the code in snadbox

⏩ Clean-up Function with AbortController

In the above code:
• We initialize a new AbortController instance.

• Then pass the signal from the controller to our fetch as a signal property.

• As we did before - call the abort function inside the clean-up function. check out the code in snadbox

✅ Using AbortController is the preferred way to cancel API requests, because it avoids wasting user bandwidth.

2️⃣ No Caching

🧐 Problem:
There is no-caching, so if the user navigate to another page and then clicks back, He will see the loading spinner again until the data is re-fetched. And this would be a bad user experience.

🤔 What we want?
When the user navigate to another page and then clicks back, He Should see the previous screen instantly instead of a spinner.

✅ Solution:
We can use third-party solution like React Query or useSwr

3️⃣ No content in initial HTML

🧐 Problem:
Fetching in useEffect means React components render, then fetch.

In the above code Snippet:
• The function passed to useEffect will be executed after the component renders. So this means: In the initial render the data is null.

• Then, the effect function will be executed and update state with actual data.

Since React is a Clint-Side JS library, all these renders happens on The browser. As a result the initial HTML is pretty empty. And if you try to use server-side rendering, you'll notice that useEffect doesn't run on the server. So we will end with a big problem with SEO..

🤔 What we want?
We want to pre-render the content of a page on the server instead of on the Browser.

✅ Solution:
We can use Next.js, Next.js has Built-in server-side rendering(SSR).

4️⃣ Slow network waterfalls

🧐 Problem:
If you have parent and child components both doing fetching in useEffect, then the child component can't even start fetching until the parent component finishes fetching. And This can lead to slow network waterfalls.

🤔 What we want?
The child component doesn’t have to wait for its parent to finish fetching their data before it can start.

✅ Solution:
Stop fetching in child component. Instead, "lift" fetch calls to a parent so they can be handled in parallel via promise.all.

Then, pass the data down via props.

Main Resources

• https://beta.reactjs.org/learn/you-might-not-need-an-effect#fetching-data

• https://www.reddit.com/r/reactjs/comments/vi6q6f/comment/iddrjue

• https://www.youtube.com/watch?v=QQYeipc_cik

• https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect

Hash Tables - full guide

Amr Guaily — Thu, 20 Oct 2022 15:49:02 +0000

Hash Table is a data structure that maps keys to values. You can then retrieve a certain value by using its key.

The way Hash Table Work?

• It takes a Key and then runs it through a Hash Function.
• A Hash Function maps strings to numbers and these numbers
correspond to indices in an Array.

How to implement a Hash Table in JavaScript?

We will talk about 3 ways to implement a Hash Table in JS:

1. Using Object data type.
2. Using a Map Object.
3. Implement your own Hash Table.

1️⃣Using `Object` data type - simplest implementation

There are some downsides to this approach:

1. The Object comes with its own properties and methods. The problem here is JS doesn't block an attempt to overwrite these methods, which may cause an error.

2. The keys are limited to String or Symbol data type.

3. The size of Object is not tracked, you need to manually determine it.

2️⃣Using `Map` object

The Map object is created to implement Hash Table without downsides that appeared on basic Object.

Unlike Object:

• Maphave sizeproperty to track its contents.
• Keys can be any data type.
• You can't overwrite built-in properties/methods.
• You must use the set() and get() methods to define and retrieve data.

3️⃣Implement your own Hash Table

You'll probably never have to implement Hash Table yourself, But writing your own Hash Table implementation is one of the most common JS interview questions.

Alright, all method work as expected. Let's try another insertion:

😨!! When I call table.get('name'); it should retrieve ['name', 'Amr'], So why is it not working as expected!?

• hash() function uses ASCII code to convert key to an index. So if the keys are the same set of letters (name == mane) the index will be the same. And this will cause overwriting the previous value with the new one.

• This is called Collision and needs to be handled in our implementation.

How to Handle Collision?

Collision occurs when hash() function generate the same index for different keys.

There are 2 main ways to handle collision:

1. Separate Chaining
2. Open Addressing

Here we'll just learn Separate Chaining..

⏩ Handle Collision - Separate Chaining

If multiple keys map to the same index, start a new Array at this index.

Now, Let's improve our set() method to avoid collision:

Also, update get() method

and remove() method:

Now, as a bonus let's add a display() method:

Conclusion

You have learned what Hash Table is and different ways to implement it in JavaScript.

You've also learned how to implement your own Hash Table class as well as how to Handle Collisions.

You'll commonly use a Hash Table because of its fast search, insertion, and delete operations:

Main Resources

• Grokking Algorithms Book
• https://www.codecademy.com/resources/docs/javascript/hashtables
• https://www.youtube.com/watch?v=y3CcHKEM8r8

DEV Community: Amr Guaily

DOM vs Virtual DOM

⏩ What is DOM❓

Updating DOM is Expensive, WHY ❗❓

⏩ What is Virtual DOM❓

How DOM updates in React❓

🤔 Suppose we have new data similar to the previous one?

🤔 Is Virtual DOM the only way to reduce costly DOM operations?

⏩ Recap:

⏩ Learn Further:

useEffect: some issues with data fetching in Effects?

1️⃣ Race Condition

⏩ Clean-up Function with Boolean Flag

⏩ Clean-up Function with AbortController

2️⃣ No Caching

3️⃣ No content in initial HTML

4️⃣ Slow network waterfalls

Main Resources

Hash Tables - full guide

The way Hash Table Work?

How to implement a Hash Table in JavaScript?

1️⃣Using Object data type - simplest implementation

There are some downsides to this approach:

2️⃣Using Map object

Unlike Object:

3️⃣Implement your own Hash Table

How to Handle Collision?

There are 2 main ways to handle collision:

⏩ Handle Collision - Separate Chaining

Conclusion

Main Resources

1️⃣Using `Object` data type - simplest implementation

2️⃣Using `Map` object