🌟 The `useMemo` hook in React! 🌟

🧐 What is useMemo used for?
`useMemo` is fantastic tool that allows you to optimize your React applications by memoizing expensive computations. It helps you avoid unnecessary re-rendering and boosts the overall performance of your components.

🔍 Real-life Use Case:

Let's say you have a data-heavy component that performs complex calculations or filters a large dataset. By using `useMemo`, you can store the computed result and prevent the component from recomputing it on every render.

This saves precious CPU cycles and enhances your app's responsiveness. ⚡️🚀

📝 Here's a code example to demonstrate its power:


In this example, we're using `useMemo` to store the filtered result of the `data` prop. By providing `data` as a dependency, we ensure that the filtered data is recomputed only when the `data` prop changes, avoiding unnecessary calculations on subsequent renders. 🤩

#ReactJS #PerformanceOptimization #useMemo #ReactHooks

You can read the unrolled version of this thread here: https://typefully.com/Vanshsh2701/qkptJcC

Optimizing React Performance with useMemo

🖊️How to send data from Child 👶 Component to Parent 👪 Component.

📃To send data from Parent --> Child Component in React we use Props to send data but when we want to send data from Child --> Parent component we can not use props because React uses unidirectional data flow.

We can only send data from Parent --> Child.
But sometimes we need to pass data from the Child --> Parent component. To solve this issue we can create the function in the parent component and call the function and pass the relevant data as an argument in the function.

Step 1: Create the state in the parent component.

Step 2: Now create the function in the parent component that will take the parameters and this function will use the state updating function to update the state in the parent component.

Step 3: Now call the Child Component in the parent component and pass this function as the props in the child component.

Step 4: Now on any event call this function and pass the relevant data as the argument in the function.

Step 5: Now go back to the Parent component and use the value coming from the Child component.

Link to Live Code: https://stackblitz.com/edit/vitejs-vite-l66tfh?embed=1&file=src/components/Child.jsx&theme=dark&view=preview

#React #Javascript

Passing Data from Child to Parent in React Components.

🧵 JavaScript Promise methods 🧵 

In this thread we will learn how to compile the results from the multiple async operations using the following methods: ⬇️ 

▶️ Promise.all()
▶️ Promise.race()
▶️ Promise.any()
▶️ Promise.allSettled()

▶️ Promise.all()

It takes the array of the promises and gives the following output 👇 

- If all promises are resolved then output is the array of resolved promises.

- If even one of the promises is rejected it gives the output of the first rejected promise.

▶️ Promise.race()

It takes an array of promises and returns the promise's value, depending on which one is resolved or rejected first.


 ▶️  Promise.any()

It returns the value of the promise that is resolved first even if there is some promise which is rejected. It will return the value of the first resolved promise.

▶️  Promise.allSettled()

It returns a new promise that resolves when every input promise has settled with an array of objects that describes the result of each promise in the iterable object.



You can read the unrolled version of this thread here: https://typefully.com/Vanshsh2701/orir55C

JavaScript Promise Methods

1 Week of Internship: 📃 

- The first day was like the DAY 0 of my Web Development learning.  Everything seems so different and new and overwhelming
- I am grateful that I got time to read and understand the tech being used in the company.

- It is good that most of the technologies being used here are new like TypeScript, Nextjs, and Zustand. 
- Being from a React background I am grateful that learning and working on these techs will add on to my Tech skill.

- It is true that when we are under time constraints, our ability to learn and comprehend increases exponentially.
- I won't say I became an expert in a week, but I never imagined I'd be able to cover so much in so little time, especially since TS and Nextjs are such large topics

- And still, so many new things that are yet to be learned.
- Reading a codebase is in itself like learning new technology.

• Meeting new individuals in the office, as well as meeting folks you've seen on Twitter.
• Talking about your so-called "viral tweet" and how people recognize it.

- I thought I won't be having coffee ☕ in the office but how can you say NO. Just 🤞  I shouldn't get addicted to this.
- Friday has a different meaning now.
- So many things to learn and see.

- 🙏 I am grateful that got this opportunity.

ES2021 Logical Assignment Operator 🧵 

We all have heard and read about the logical Operator but JavaScript in the 2021 version has a new operator called Logical Assignment Operator.

→ 3 new operators are:

Logical OR assignment operator ( ||= )
Logical AND assignment operator ( &&=)
Nullish Coalescing assignment operator (??=)

→  Logical OR assignment operator ( ||= )

Syntax:    x ||= y,  another way to represent  x || (x = y)
Explain: If x is falsy then value of x will be y

Example:   let myName;
                    myName ||= "Vansh"

Explain:
If myName is falsy then myName will be assigned value "Vansh".

Here myName is falsy therefore 
myName = "Vansh"

→ Logical AND Assignment Operator ( &&= )

Syntax:    x &&= y,  another way to represent x && (x = y)
Explain: If x is truthy then value of x will be y

Example:   let lastName = "Sharma";
                    lastName &&= "Bhardwaj"

Explain:
If lastName is truthy then lastName will be assigned the value "Bhardwaj".

Here lastName is truthy therefore 
lastName = "Bhardwaj"

→ Nullish Coalescing assignment operator (??=)

Syntax:    x ??= y,  another way to represent x ?? (x = y)
Explain: If x is  null and undefined then the value of x will be y

Example :  let city=null;
                  city ??= 'Delhi';

Explain: Here city is null therefore nullish coalescing operator will assign Delhi to the city.

Do ♻️  and ❤️ the tweet

Reference: https://www.javascripttutorial.net/es-next/javascript-logical-assignment-operators/

Demo Code: https://stackblitz.com/edit/js-vsqktw?file=index.js


You can read the unrolled version of this thread here: https://typefully.com/Vanshsh2701/SrJQ11n

Logical Assignment Operator

Primitive vs Reference Values  🧵 

→ In JavaScript there are two types of values:

- Primitive values are (null, undefined, boolean, string, number, symbol, BigInt)

- Reference value is (object)

→ Stack and Heap Memory 
 JS stores Primitive values in the Stack memory bcoz they have fixed memory whereas it stores Reference values in the Heap memory.

In the above image, JS gives stack memory to age, name, and person and links the person variable with the object in the heap.
Therefore person variable is a reference that refers to the objects.

→  You can add or delete properties from the Reference values but Primitives values do not have properties.

→ Copying Values

When you assign a primitive value from one variable to another. JS engine creates a copy of that value and assigns it to the new variable in the Stack memory.
 

But when you assign a reference value from one variable to another JS engine creates a reference to the same object in the Heap memory.


So if you make changes in the properties using the new variable it will make changes in the original object.

Check out this stackblitz to know more:
https://stackblitz.com/edit/js-ncpypy?embed=1&file=index.js

→  To Read in detail 
Reference: https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/

If you loved reading this thread
Do ♻️  and ❤️ it.



You can read the unrolled version of this thread here: https://typefully.com/Vanshsh2701/HKvOVEK

Primitive vs Reference Types in JavaScript

📄 The Psychology of Money 📄 

 🧵 Summary 🧵
This book teaches you simple MONEY related lessons BUT
not so simple LIFE related lessons.

- Nothing is as good or as bad as it seems
- Attributing success to luck makes you look jealous and mean, even if you know it exists.
- The accidental impact of actions outside of your control can be more consequential than the ones you consciously take.

-  The more extreme the outcome the less likely you can apply its lessons to your own life.
- The more common the pattern, the more applicable it might be in your life.
- Happiness, as it's said, is just results minus expectations.
- Enough is not too little.

- You can be wrong half the time but still make the fortune.
- Tails(1 in 100) drive everything.
- There is always something to be happy about.
- Money gives you Freedom, To do what you want, when you want, where you want, with whom you want.

- You can even HATE things that you LOVE doing.
- A question that you should ask as the range of your competition expands is, "How do you stand out?"
- You have to plan on your plan not going according to your plan.

- Optimism is a belief that the odds of a good outcome are in your favor over time, even when there will be setbacks along the way.
- Pessimism sounds smarter and more plausible than optimism.



You can read the unrolled version of this thread here: https://typefully.com/Vanshsh2701/jN0tb90

The Psychology of Money (Summary)

🧵  JavaScript Set object  🧵

It stores the collection of unique values of any type in JavaScript.

 

→  Set Methods

1)  Create a new Set from the Array

let uniqueAlpha = new Set(alphabets);

console.log(uniqueAlpha); // Set { 'a', 'b', 'c', 'd' , 'e', 'f'}

2) Size of the Set

let uniqueAlphaSize = uniqueAlpha.size

console.log(uniqueAlphaSize) // 6

3) Add the element to a Set

uniqueAlpha.add('z');

console.log(uniqueAlpha); // Set { 'a', 'b', 'c', 'd' , 'e', 'f', 'z'}

4) Check if the value is in the Set

let hasA = uniqueAlpha.has('a')

let hasK = uniqueAlpha.has('k')

console.log(hasA) // true

console.log(hasK) // false

5) Remove elemnets from a Set

uniqueAlpha.delete('f');

console.log(uniqueAlpha); // Set {"a", "b", "c", "d", "e","z"}

6) Remove all elements from a Set

uniqueAlpha.clear()

console.log(uniqueAlpha) // Set {} => uniqueAlpha.size = 0

→ Weak Set
It is similar to the set but it contains only objects. It gets automatically garbage collected therefore it does not have size method.

Here is the link to the live code demo:
https://js-tewhlh.stackblitz.io

By  @Vanshsh2701 

Reference:  https://www.javascripttutorial.net/es6/javascript-set/

You can read the unrolled version of this thread here: https://typefully.com/Vanshsh2701/doQxn9z

JavaScript Set Object


🧵  JavaScript Map Object 🧵 

⚠️ We will be talking about "Map Object" not  "map method".


→ Normal Object ( Before ES6)

- Objects in JavaScript can have only string and symbol as the key.

- There is no particular property to represent the size of the object.

→ Map Object ( ES6)

- Map can hold the key and value of any type. ( string, object, boolean)
- It remembers the original order of the keys.

// Syntax
let map = new Map([iterable]);

→ Important Map methods :

1. Create a new Map object

let john = {name: 'John Doe'},
lily = {name: 'Lily Bush'},
peter = {name: 'Peter Drucker'};

let userRoles = new Map();

2. Add elements to a Map

userRoles.set(john, 'admin');

Since the set method is chainable
userRoles.set(lily, 'editor')
.set(peter, 'subscriber');

3. Initialize Map with an Iterable objects

let userRoles = new Map([
[john, 'admin'],
[lily, 'editor'],
[peter, 'subscriber']
]);

4. Get an element from Map

userRoles.get(john); // admin

userRoles.get(foo); //undefined

5. Check the existence of key

userRoles.has(foo) // false

userRoles.has(lilly) // true

6. Get the number of elements 

userRoles.size // 3

7. Iterate over Map keys and values

for (const user of userRoles.keys()) {
console.log(user.name);
}

for (const user of userRoles.values()) {
console.log(user.name);
}

8. Iterate over Map elements

for (const role of userRoles.entries()) {

console.log(`${role[0].name}: ${role[1]}`);

}

9. Convert Map keys or Values to an array

let Arrkeys = [...userRoles.keys()];

console.log(Arrkeys);

10.  Delete an element from the Map

userRoles.delete(john)

userRoles.clear() // to delete all entries

→ WeakMap 
It is similar to Map except for the keys of WeakMap must be objects.

Map 🆚  WeakMap
- Elements of WeakMap can't be iterated.
- WeakMap can't clear all at once.
- WeakMap can't check the size.

Final link: https://stackblitz.com/edit/js-bo1j63?file=index.js

By @Vanshsh2701 

Reference: https://www.javascripttutorial.net/es6/javascript-map/

#javascript 

JavaScript Map Object

📃  Technical Writing course by @GoogleDevExpert 📃

→ Technical Writing One
→  Technical Writing Two

1️⃣ Technical Writing ONE
Link:  https://developers.google.com/tech-writing/one

• Use terms consistently.
• Avoid ambiguous pronouns.
• Prefer active voice to passive voice.
• Pick specific verbs over vague ones.
• Focus each sentence on a single idea.
• Convert some long sentences to lists.

• Eliminate unneeded words.
• Use a numbered list when ordering is important and a bulleted list when ordering is irrelevant.
• Keep list items parallel.
• Start numbered list items with imperative words.
• Introduce lists and tables appropriately.

• Create great opening sentences that establish a paragraph's central point.
• Focus each paragraph on a single topic.
• Determine what your audience needs to learn.
• Fit documentation to your audience.
• Establish your document's key points at the start of the document.

2️⃣  Technical Writing Two

Link:  https://developers.google.com/tech-writing/two

• Adopt a style guide.
• Think like your audience.
• Read documents out loud (to yourself).
• Return to documents well after you've written the draft.
• Find a good peer editor.

• Outline a document. Alternatively, write free form and then organize.
• Introduce a document's scope and any prerequisites.
• Prefer task-based headings.
• Disclose information progressively (in some situations).

• Consider writing the caption before creating the illustration.

• Constrain the amount of information in a single drawing.

• Focus the reader's attention on the relevant part of a picture or diagram by describing the takeaway in the caption or by adding a visual cue to the picture.
• Create concise sample code that is easy to understand.

• Keep code comments short, but prefer clarity over brevity.
• Avoid writing comments about obvious code.
• Focus your commenting energy on anything non-intuitive in the code.
• Provide not only examples but also anti-examples.

• Provide code samples that demonstrate a range of complexity.
• Make a practice of continuous revision.
• Provide different documentation types for different categories of users.
• Compare and contrast with something that readers are already familiar with.

• In tutorials, reinforce concepts with examples.
• In tutorials, note problems that readers may encounter.
📓 My Notes
https://vanshsharma.notion.site/NOTES-for-Technical-Writing-course-by-Google-0bd4eb94d9e449169b869a04269a2c8a