Introduction

By using useRef Hook we can control when we want to re-render a particular component. For example if we use useState or useReducer Hooks they automatically re-render the component when ever the state changes and we cannot control the re-render but with useRef Hook we can re-render a component whenever we want to.

Syntax

const refContainer = useRef(initialValue);

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.

useRef doesn’t notify when its content changes which means that mutating the .current property doesn’t cause a re-render.

Use Cases

1. It can be used to store a mutable value that should not cause a re-render when updated

If we want to count how many times our application renders, using the useState Hook traps us into an infinite loop because the Hook itself causes a re-render. To avoid this we can use useRef.

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

Output:-

2. Accessing DOM elements

We can add a ref attribute to an element to access it directly in the DOM.

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

Output:-

3. Persist values between re-renders

The useRef Hook can be used to keep track of previous state values because we are able to persist values between renders.

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

In the useEffect, we are updating the useRef current value each time the inputValue is updated by entering text into the input field.

Output:-

Summary

1. The useRef Hook can be used to store a mutable object that does not cause a re-render when updated.

2. The useRef Hook can be used to access a DOM element directly.

3. The useRef Hook allows us to persist values between the renders.

That's it for this article. Hope you learnt something new. Cheers!!!

Introduction

async and defer are boolean attributes which are used along with the script tag to load external scripts efficiently into the web page.

When we load a web page there are 2 major things happening in the browser. One is HTML parsing and the other is loading of scripts.

The loading of scripts contain 2 parts:-

1. Fetching the script from the network.
2. Executing the script line by line.

Let us consider 3 scenarios:-

1. If there is no async or defer attribute specified for the script tag

Here the parsing of HTML starts and as soon as the script tag is encountered, the parsing of the HTML stops then and there itself. Now the browser starts fetching the contents of the script tag and then executes it. After this the parsing of HTML completes.

The disadvantage of this approach is that the Javascript is blocking the rendering of HTML.

2. When an async attribute is used along with the script tag

Here the parsing of HTML starts and when the script tag is encountered, the parsing of the HTML continues while the scripts are fetched in parallel. After the scripts are fetched the parsing of HTML is paused and the script tag is executed. After the execution of script tag the parsing of HTML completes.

The scripts load in the background and run when ready. The DOM and other scripts don’t wait for them, and they don’t wait for anything. A fully independent script that runs when loaded. Hence async attribute needs to be used only when the scripts are independent of each other.

3. When a defer attribute is used along with the script tag

Here the parsing of HTML starts and when the script tag is encountered, the parsing of the HTML continues while the scripts are fetched in parallel. After the scripts are fetched the execution of the scripts wait till the parsing of HTML is completed. Hence the rendering of HTML is not blocked in this approach.

Summary

• The async attribute is somewhat similar to defer. It also makes the script non-blocking but it starts executing the scripts which ever is fetched first. Hence it does not guarantee the order of execution of the scripts.

• Other scripts don’t wait for async scripts, and async scripts don’t wait for them.

• The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script loads in the background, and then runs when the DOM is fully built.

• Deferred scripts keep their relative order, just like regular scripts.

• The defer attribute is only for external scripts.

• The defer attribute is ignored if the script tag has no src.

So that's it for this blog. I hope you have learnt something new. Cheers!!!

Do you know what lies under the hood of Async-Await ?

It is the generator function. Yes you heard it right it is the generator function !!!

What are generators in Javascript?

Generators are functions that can be exited and later re-entered. Their context(variable bindings) will be saved across re-renders.

Lets understand this in detail...

Calling a generator function does not execute it's body immediately, an iterator object for the function is returned instead. When the iterators next() method is called, the generator function's body is executed until the first yield expression which specifies the value to be returned from the iterator.

The next() method returns an object with a value property containing the yielded value and a done property which indicates whether the generator has yielded it's last value.

{ value: yield value, done: if last yield then true else false}

Calling the next() method with an argument will resume the generator function.

Not clear. That's perfectly fine. Let's go through a simple example to understand this better.

function * generator (i) {
yield i;
yield i+10;
}
const gen = generator(10);

console.log(gen.next().value); //output: 10
console.log(gen.next().value); //output: 20

Now lets see the working of this code:-

• When the generator function is called with 10 as it's argument the entire generator function is not executed.

• The execution stops at the line where it finds the first yield expression.

• Now to obtain the value of the yield expression we use next() method which returns an object with the value property and done property which sets to true only for the last yield expression in a generator function. So gen.next().value returns a value 10 and the value of done is false.

• Now the generator function is paused at this line. To re-enter and continue the execution of generator function we need to again invoke the next() method.

• So when we again execute the gen.next.value(), the yield i+10 expression will be evaluated and the value of 10+10 (i+10) will be assigned to the value property of next() method and the done property will be set to true now because there are no further yield expressions in the generator function.

You might be wondering how the function remembers the value of i=10 when the function re-entered. Recall what I mentioned in the beginning of the article!!! Generator function's context(variable binding) will be saved across re-renders. I hope now this statement is clear.

Summary:-

In simple terms generator function is nothing but a normal function with pause-play feature. The yield keyword can be considered as a pause button and the next() method can be considered as the play button.

Application:-

Generators combined with promises are a very powerful tool for asynchronous programming which in fact is the basis for async-await.

So that's it for this blog. I hope you have learnt something new. Cheers!!!

Lets get started!!!

Introduction:-

Before the CSS Flexbox Layout Module there were four layout modes:

1. Block
2. Inline
3. Table
4. Positioned

The CSS flexbox layout allows to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. The items will flex to different sizes to fill the space. It makes responsive design easier.

Basics of Flexbox:-

The flex layout is based on "flex-flow directions".

The items will be placed either along the "main axis" or along the "cross axis".

• main axis – The main axis of a flex container is the primary axis along which flex items are placed.

• main-start | main-end – The flex items are placed within the container starting from main-start and extends till main-end.

• main size – It is the item’s width or height, whichever is in the main dimension.

• cross axis – The axis perpendicular to the main axis is called the cross axis.

• cross-start | cross-end – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

• cross size – It is the width or height of a flex item, whichever is in the cross dimension.

Properties of Flexbox:-

flex-direction :- The flex-direction is defined by the main axis. The direction of the main axis is the flex direction.

.container { flex-direction: row | row-reverse | column | column-reverse; }

• row : It is the default flex direction. The direction is from left to right.
• row-reverse: The direction is from right to left.
• column: The direction is from top to bottom.
• column-reverse: The direction is from bottom to top.

flex-wrap :- This property allows the items to be wrapped according to one's requirement.

.container { flex-wrap: nowrap | wrap | wrap-reverse; }

• nowrap : This is the default one. This attribute enables all the flex items will be on one line.
• wrap: This attribute enables the flex items to wrap onto multiple lines, from top to bottom. -wrap-reverse: This is the reverse of wrap where in the flex items will wrap onto multiple lines from bottom to top.

justify-content :- This property defines the alignment of the flex items along the main axis.

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | ;

• flex-start : This is the default attribute where in the flex items items are packed toward the start of the flex-direction.

• flex-end: This attribute enables the flex items to be placed towards the end of the flex-direction.

• start: This attribute enables the flex items to be packed toward the start of the writing-mode direction.

• end: This attribute enables the flex items to be placed toward the end of the writing-mode direction.

• left: This attribute enables the flex items to be packed towards the left edge of the container.

• right: This attribute enables the flex items to be packed towards the right edge of the container.

• center: This attribute enables the flex items to be to be centered.

• space-between: This attribute enables the flex items to be evenly spaced between them.

• space-around: This attribute enables the flex items to be evenly spaced around them. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing

• space-evenly: This attribute enables the flex items to be placed such that the spacing between any two items including the space to the edges are equal.

align-items :- This property defines the alignment of the flex items along the main axis.

.container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end ;

• stretch: This is the default attribute which stretches the flex elements to fill the container.

• flex-start / start / self-start: This attribute enables the flex items to be placed at the start of the cross axis.

• flex-end / end / self-end: This attribute enables the flex items to be placed at the end of the cross axis.

• center: This attribute enables the flex items to be centered along the cross-axis.

• baseline: This attribute enables the flex items to be aligned such as their baselines align.

These are some of the basic properties of flexbox. There a lot of other properties as well. I hope the understanding of these properties is very important to start using flexbox layout in you web apps.

keep learning, keep moving, keep growing!!!

Cheers!!!

So lets get started.

Why start with DSA?

I feel any one who is new to coding or just started to learn coding should begin with DSA because this is the basis of any programming language and by doing more of DSA initially our logic building ability and the thought process to approach a problem improves a lot.

I am not insisting people to go very deep into DSA such as trees and graphs. At least you should be familiar with arrays, linked lists, stacks and queues.

Is DSA alone sufficient?

The answer would be NO. This is because doing DSA alone will not help you to have projects on your resume. Having good projects on our resume is the most essential part during technical interviews and especially as a fresher that will only be the proof of our skills and learning rather than the degree certificates.

What should we do to have good projects on our resume as a fresher?

The answer is Web Development. There are a lot of opportunities in web development and more over it is one of the most important skills required in the industry currently. The reason as to why I stressed about not going deep into DSA is that we rarely use DSA in our actual work environment or in real life projects. If we learn web development and land in a job related to that then we need not struggle initially in our jobs as well because we already have that skill.

Since we have started with DSA we would be familiar with how to build a logic for a given scenario and this would be very handy while doing the java script part in our web development projects.

Conclusion:-

I would like to conclude this post by saying that both DSA and web development are important to get a good job but the ideal approach would be to start with DSA(basics) and then master web development.

Two important points to be noted:-

1. While choosing the language for DSA do not try with multiple languages. Pick any one language and stick to it. My preference would be C++.

2. Either DSA or web development anything which we are learning should be done consistently. If we are able to do both of them consistently this would be the ideal scenario. I know doing both of them simultaneously is hard but remember that "Good things never come easily".

Cheers!!!