DEV Community: Atul Sharma

A question I usually ask in interviews..

Atul Sharma — Fri, 30 Jun 2023 19:55:05 +0000

"Do you understand React's life cycle"? The answer is very often a confident "yes".
But maximum students failed to explain to them when it comes to the functional component.

Some common questions that one can prepare on useEffect hook:-

What are side effects, and how can we perform side effects in React?
How can we perform unMounting in functional components, and why is it required?

Check the image to see six ways one can use useEffect() hook.

Are you preparing for a JavaScript interview? 🤔🤔

Atul Sharma — Sun, 25 Jun 2023 13:34:28 +0000

Here are some commonly asked JavaScript questions to help you shine in your frontend interview! 💻

➡️ What are the different data types in JavaScript?
➡️ Explain the concept of hoisting in JavaScript.
➡️ What is the difference between null and undefined in JavaScript?
➡️ How does prototypal inheritance work in JavaScript?
➡️ What are closures in JavaScript and how are they used?
➡️ Explain the concept of event delegation in JavaScript.
➡️ How does the "this" keyword work in JavaScript?
➡️ What are higher-order functions in JavaScript?
➡️ Explain the difference between synchronous and asynchronous programming in JavaScript.
➡️ How do you handle errors in JavaScript? What is the purpose of try-catch blocks?
➡️ What are the different ways to create objects in JavaScript?
➡️ Explain the concept of callback functions in JavaScript.
➡️ What is the difference between let, const, and var in JavaScript?
➡️ How does the event loop work in JavaScript?
➡️ What are arrow functions in JavaScript? How do they differ from regular functions?
➡️ Explain the concept of closures and their practical uses.
➡️ What is the purpose of the bind, call, and apply methods in JavaScript?
➡️ How do you handle asynchronous operations in JavaScript? What are Promises and async/await?
➡️ Explain the concept of debouncing and throttling in JavaScript.
➡️ What are the different ways to manipulate the DOM in JavaScript?

The Secret to High-Performance React Applications !

Atul Sharma — Sun, 11 Jun 2023 11:10:37 +0000

Have you ever wondered how React manages to update the user interface so seamlessly, only rendering the necessary changes without reloading the entire page?
That's where React Reconciliation and DOM Diffing come into play!🌟

⚡ React Reconciliation:
React Reconciliation is the powerful algorithm behind React's virtual DOM, making it lightning-fast and incredibly efficient. When a component's state or props change, React uses Reconciliation to analyze the difference between the previous and new virtual DOM representations.

💡 DOM Diffing:
DOM Diffing, a key part of Reconciliation, is the process of determining the minimum set of changes required to update the actual DOM based on the changes in the virtual DOM. Instead of re-rendering the entire UI, React identifies the specific parts of the DOM that need updating, reducing unnecessary computations and optimizing performance.

🔬 How does it work?
React compares the old and new virtual DOM trees, identifying the differences or "diffs" between them. It then applies only those specific changes to the actual DOM, resulting in efficient updates and minimal rendering. This approach eliminates redundant operations, dramatically improving performance even in complex UIs.

It allows for a smooth user experience, even with large-scale applications, as updates are intelligently handled without disrupting the entire UI. Understanding these concepts empowers developers to write cleaner, more efficient code.

Source

Why it's so hard to write a single page application(SPA) with just vanilla JavaScript?

Atul Sharma — Wed, 07 Jun 2023 17:10:29 +0000

Front-end web applications are all about
-> Handling data + displaying data in a user interface.
-> User interface needs to stay in sync with data

Building a complex frontend with vanilla javascript alone requires a large amount of direct DOM manipulation and traversing .

1.Our code would be extremely complex and really hard to understand and we will probably just end up with a huge mess of entangled spaghetti code.
2.Typically in vanilla javascript apps state such as simple text or numbers are oftentimes simply stored right in the DOM. So right in the HTML elements itself rather than in a central place in the application.

The result is that we end up with many parts of the app accessing and changing that Dom state directly, which makes the spaghetti code even harder to understand and it will most certainly introduce many bugs into our application.

So basically frameworks like Angular, React or Vue take this hard work of synchronizing data with the user interface away from developers.
Source

React developer - Interview Experience

Atul Sharma — Sat, 27 May 2023 11:04:16 +0000

Interview questions are:-

1)To create form in html and javascript
2)What is DOM?
3)HTML tags
4)Flex properties
5)What is component and write it. How to call components from one component to another
6)What is ES6 and properties
7)What is redux?
8)What is callback and promises
9)How many ways to give style in html document
10)How to use style in javascript
11)Write is different between class and function components
12)Write one class component and function components...
13)What is different between let const and var
14)Brief explanation about project you done

Love to see the answers of this in comments 🥸

React Redux - Lets Do It

Atul Sharma — Sat, 27 May 2023 10:47:06 +0000

When you finally understand and confident in React-Redux .

Stay tuned, I will come back with Project implementation using React-redux.

Comment out your ideas for Redux project.