DEV Community: Abdusanadzoda Abdulaziz

How to use the useEffect React hook 🎈

Abdusanadzoda Abdulaziz — Sat, 13 Mar 2021 07:39:20 +0000

Find out what the useEffect React hook is useful for, and how to work with it!

One React hook I sometimes use is useEffect.

import React, { useEffect } from 'react'

One very important feature of Hooks is allowing function components to have access to the lifecycle hooks.

Using class components you can register a function on the componentDidMount, componentWillUnmount and componentDidUpdate events, and those will serve many use cases, from variables initialization to API calls to cleanup.

Hooks provide the useEffect() API. The call accepts a function as argument.

The function runs when the component is first rendered, and on every subsequent re-render/update. React first updates the DOM, then calls any function passed to useEffect(). All without blocking the UI rendering even on blocking code, unlike the old componentDidMount and componentDidUpdate, which makes our apps feel faster.

Example:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [value, setValue] = useState(0)

  useEffect(() => {
    document.title= `New messages(${value})`;
  })

  return (
        <>
          <h1>{value}</h1>
          <button className="btn"
                  onClick={() =>setValue (value+1)}>Inclease
          </button>
        </>
  )
}

ReactDOM.render(
  <CounterWithNameAndSideEffect />,
  document.getElementById('app')
)

useEffect() can be called multiple times, which is nice to separate unrelated logic (something that plagues the class component lifecycle events).

Since the useEffect() functions are run on every subsequent re-render/update, we can tell React to skip a run, for performance purposes, by adding a second parameter which is an array that contains a list of state variables to watch for. React will only re-run the side effect if one of the items in this array changes.

useEffect(() =>{
       document.title= `New messages(${value})`;
}, [value]);

Similarly you can tell React to only execute the side effect once (at mount time), by passing an empty array:

useEffect(() =>{
       document.title= `New messages(${value})`;
}, []);

useEffect() is great for adding logs, accessing 3rd party APIs and much more.

How to use the useState React hook 🎉

Abdusanadzoda Abdulaziz — Sat, 13 Mar 2021 07:27:57 +0000

One React hook I most often use is useState.

import React, { useState } from 'react'

Using the useState() API, you can create a new state variable, and have a way to alter it. useState() accepts the initial value of the state item and returns an array containing the state variable, and the function you call to alter the state. Since it returns an array we use array destructuring to access each individual item, like this: const [count, setCount] = useState(0)

Here’s a practical example:

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))

You can add as many useState() calls you want, to create as many state variables as you want. Just make sure you call it in the top level of a component (not in an if or in any other block).

JavaScript var vs. let (Functional Scope, Block Scope, Lexical Scope)🎉

Abdusanadzoda Abdulaziz — Thu, 11 Mar 2021 14:18:37 +0000

What is Scope?

Scope determines the visibility or accessibility of a variable or other resource in the area of your code.

Global Scope

There's only one Global scope in the JavaScript document. The area outside all the functions is consider the global scope and the variables defined inside the global scope can be accessed and altered in any other scopes.

//global scope
var fruit = 'apple'
console.log(fruit);        //apple

function getFruit(){
    console.log(fruit);    //fruit is accessible here
}

getFruit();                //apple

Local Scope

Variables declared inside the functions become Local to the function and are considered in the corresponding local scope. Every Functions has its own scope. Same variable can be used in different functions because they are bound to the respective functions and are not mutual visible.
The var keyword behaves differently in function scopes and block scopes. A variable declared with var in a function scope can’t be accessed outside that function scope.

//global scope
function foo1(){
    //local scope 1
    function foo2(){
        //local scope 2
    }
}

//global scope
function foo3(){
    //local scope 3
}

//global scope

Local scope can be divided into function scope and block scope. The concept of block scope is introduced in ECMA script 6 (ES6) together with the new ways to declare variables -- const and let.

Function Scope

Whenever you declare a variable in a function, the variable is visible only within the function. You can't access it outside the function. var is the keyword to define variable for a function-scope accessibility.

function foo(){
    var fruit ='apple';
    console.log('inside function: ',fruit);
}

foo();                    //inside function: apple
console.log(fruit);       //error: fruit is not defined

Block Scope

A block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.

function foo(){
    if(true){
        var fruit1 = 'apple';        //exist in function scope
        const fruit2 = 'banana';     //exist in block scope
        let fruit3 = 'strawberry';   //exist in block scope

    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}

foo();
//result:
//apple
//error: fruit2 is not defined
//error: fruit3 is not defined

Lexical Scope

Another point to mention is the lexical scope. Lexical scope means the children scope have the access to the variables defined in the parent scope. The children functions are lexically bound to the execution context of their parents.

function foo1(){
    var fruit1 = 'apple';        
    const fruit2 = 'banana';     
    let fruit3 = 'strawberry';
    function foo2(){
        console.log(fruit1);
        console.log(fruit2);
        console.log(fruit3);
    }
    foo2();
}

foo1();

//result:
//apple
//banana
//strawberry

VAR VS LET

function iHaveScope() {
  var secret = 42;
}

A variable declared with var in a block scope is available outside of that block scope.

for (var i=0; i<10; i++) {
  // block scope for the for statement
}console.log(i) // => 10 (why oh why)

The i variable that we often use in a for loop will continue to exist beyond the scope of that loop, and that does not make sense, really.

Luckily we now have a different way to declare variables, using let. Variables declared with let inside a block scope are only accessible inside that scope, making let the ideal solution to the for loop index variable scope problem. If we use let to declare the i variable in a for loop, that variable will only be available inside the for loop.

for (let i=0; i<10; i++) {
  // block scope for the for statement
}console.log(i) // ReferenceError: i is not defined (D'oh!)

Scope & Lexical Environment 🔥

Abdusanadzoda Abdulaziz — Thu, 11 Mar 2021 07:36:37 +0000

Intro

Scope in Javascript is directly releated with lexical enviroment. I know it sounds a little complicated but its very classic concept in JavaScript.If you understand lexical environment it will be very easy for you to understand the scope, the scope chain it will also help us to understan the closure.

Lexical Environment is one of the under the hood topics in JavaScript. When we talk about execution context, execution environment, variable environment or lexical environment all of these things ultimately defining what’s called scope.

The scope is where a variable is available in your code. Each block of code creates scope and a lexical environment.

JavaScript cares about the lexical environment when you ask for a variable while running a line of code inside any particular execution context if it can’t find that variable in its block it will go at the outer reference or block and look for variables there.

And that outer reference is where the function sits lexically is its outer environment.

So we can say that whenever a context ececution is created along with it a lexical enviroment is created and each lexical enviroment have referece to its parent lexical enviroments which points to its memory allocation.

Look at the below example and try to predict the output:

function two(){
  var a;
  console.log(a);
}
function one(){
  var a=2;
  console.log(a);
  two();
}
var a=1;
console.log(a);
one();

Output for the above code is 1 2 undefined because we have not given any value to variable a in function two and in javascript default value assigned to a variable is undefined.

Now have a look at this code below and try to predict output:

function two(){
  console.log(a);
}
function one(){
  var a=2;
  console.log(a);
  two();
}
var a=1;
console.log(a);
one();

Output for the above code is 1 2 1 because when we do something with a variable, javascript does more than just looking in the variable environment of the currently executing context. Remember that each execution context has some special things that get created for you like the variable this. Every execution context has a reference to its outer environment, and that outer environment is called Lexical Environment.

When javascript asked for the value of var a in function two’s execution context it couldn’t find it so it moved down and searched in its outer lexical environment i.e. global execution context.

var a is not defined in function two so it searched in its lexical environment i.e. global execution context.

One more code below I have changed lexical environment for function two now try to predict the output:

function one(){

  function two(){
   console.log(a);
  }

  var a=2;
  console.log(a);
  two();
}

var a=1;
console.log(a);
one();

Output for the above code is 1 2 2

In the above example in the case of function two, its outer lexical environment is function one’s execution context and for function one, the outer lexical environment is the global execution context.

When javascript asked for the value of var a in function two’s execution context it couldn’t find it so it moved down and searched it in its outer lexical environment i.e. function one in this case.

JavaScript Closure 🎆

Abdusanadzoda Abdulaziz — Wed, 10 Mar 2021 02:56:56 +0000

Hey mates on the internet (●'◡'●)

Now, it’s time to talk about closures.

What is Closure?

A closure is a function that has access to its outer function scope even after the outer function has returned. This means a closure can remember and access variables and arguments of its outer function even after the function has finished.

Before we dive into closures, let’s first understand the lexical scope.

What is a Lexical Scope?

A lexical scope or static scope in JavaScript refers to the accessibility of the variables, functions, and objects based on their physical location in the source code. For example:

let a = 'global';
  function outer() {
    let b = 'outer';
    function inner() {
      let c = 'inner'
      console.log(c);   // prints 'inner'
      console.log(b);   // prints 'outer'
      console.log(a);   // prints 'global'
    }
    console.log(a);     // prints 'global'
    console.log(b);     // prints 'outer'
    inner();
  }
outer();
console.log(a);         // prints 'global'

Here the inner function can access the variables defined in its own scope, the outer function’s scope, and the global scope. And the outer function can access the variable defined in its own scope and the global scope.

So a scope chain of the above code would be like this:

Global {
  outer {
    inner
  }
}

Notice that inner function is surrounded by the lexical scope of outer function which is, in turn, surrounded by the global scope. That’s why the inner function can access the variables defined in outer function and the global scope.

Quiz — Test Your Knowledge

What would the below code print out?

var name = 'John'

function greet (name) {  
  return (function () {
    console.log('Hello ' + name)
  })
}

var sayHello = greet(name)

name = 'Sam'

sayHello()

The answer is Hello John.

Yes, even though we altered the value of name to 'Sam' before we invoked sayHello. It’s as if, the value of name was captured before it was reassigned to 'Sam'.

That is exactly what happened — this is closure in action.

Javascript Scope 💡

Abdusanadzoda Abdulaziz — Wed, 10 Mar 2021 02:00:31 +0000

Intro

Now that we understand hoisting, it’s time to talk about scope.

Test Your Knowledge

As usual, we start by testing your knowledge with a quiz. Can you tell what will following four console.log print out?

var greet = 'Hello!'

function sayHi () {
  console.log('2: ', greet)
  var greet = 'Ciao!'
  console.log('3: ', greet)
}

console.log('1: ', greet)
sayHi()
console.log('4: ', greet)

The answer is:
1: Hello!
2: undefined
3: Ciao!
4: Hello!

— and yes, in that order!

It might look confusing, and I don’t blame you. We really need to have a solid understanding of hoisting and scope to get this one right. Being comfortable with these two concepts is essential as a JavaScript developer, as it will help you write safe code and debug faster.

So without further ado, let’s dive into it.

N.B. Scope and execution context are closely related, but not the same. It is a separate topic on its own, so I’ll keep that for another time. We will focus on understanding scope in this post.

What is Scope?

Scope in JavaScript defines which variables and functions you have access to, depending on where you are (a physical position) within your code.
Consider the following two examples.

var greet = 'Hello!'

function sayHi () {
  console.log('1: ', greet)
}

sayHi()
console.log('2: ', greet)

// 1: Hello!
// 2: Hello!

function sayHi () {
  var greet = 'Hello!'
  console.log('1: ', greet)
}

sayHi()
console.log('2: ', greet)

// 1: Hello!
// ReferenceError: greet is not defined

Why does the second console.log in the example 2 throw an error?

The difference between the two is that the variable greet is defined in different places; outside the sayHi function in the first example, and inside in the second. That dictates whether you have access to greet from outside the function, i.e. where console.log('2: ', greet) sits. This is because greet is globally scoped in the first example, whereas it is locally scoped in the second.

So what are global scope and local scope?

Global Scope

The global scope is the outermost scope and is pre-defined even before you write a single line of code. Typically, you only have one global scope and it’s automatically created by the JavaScript engine. You can easily check what’s inside the global scope in your browser.

Open up the developer tool (shortcut for Chrome is alt + cmd + i), go to the console panel and type this. The this keyword by default points to the Window object that sits within the global scope.

Now, in the same console panel, declare and initialise a variable greet. Then, access the Window object again by typing this. If you expand the Window object and scroll all the way down… there it is! The greet variable has been added as a property of the Window object and is globally available. So if you type greet in the console, it will give you "Hello!".

Global variables can be accessed and modified from any other
scope.


// Global scope

var greet = 'Hello!' // Globally scoped

function changeGreet () {
  console.log('2: ', greet) // Accessible
  greet = 'Hey!' // Modified
  console.log('3: ', greet) // Accessible
}

console.log('1: ', greet) // Accessible
changeGreet()
console.log('4: ', greet) // Accessible

// 1: Hello! 
// 2: Hello!
// 3: Hey!
// 4: Hey!

Local Scope

Local scope is any scope created within the global scope. Every time a new function is declared, a new local scope gets created, and variables declared inside the function belong to that unique scope.

During the execution phase, local variables can only be accessed and modified within the same scope. As soon as the JavaScript engine finishes executing a function, it exits the local scope and moves back to the global scope, losing access to the variables within that local scope.

This is why the second console.log in example 2 threw an error complaining that greet is not defined, when we tried to access a local variable from the global scope.
Here is another example to demonstrate what we just discussed.

// Global scope

function sayHi () {
  // Local scope

  var greet = 'Hello!' // Localy scoped
  console.log('1: ', greet) // Accessible within the same scope

  greet = 'Hey!' // Modified within the same scope
  console.log('2: ', greet) // Accessible within the same scope
}

sayHi()
console.log('3: ', greet) // NOT accessible from outside the scope (global scope)

// 1: Hello!
// 2: Hey!
// ReferenceError: greet is not defined

You can have multiple local scopes within the global scope. Each local scope is an isolated entity, so variables that belong to a scope is confined to that specific scope.

// Global scope

function sayHello () {
  // Local scope 1

  var greet = 'Hello!' // Scoped to local scope 1
  console.log('1: ', greet) // Accessible from local scope 1
}

function changeGreet () {
  // Local scope 2

  console.log('2: ', greet) // NOT Accessible from local scope 2
}

sayHello()
changeGreet()

// 1: Hello!
// ReferenceError: greet is not defined

Hoisting and Scope

Alright, we’ve covered global and local scope so far. Let’s go back to our quiz and see if we can understand what’s going on. Try to follow the snippet as if you are the JavaScript engine executing the code — start from the first console.log at line 9, then move on to the second one inside the sayHi function, and so on.

var greet = 'Hello!'

function sayHi () {
  console.log('2: ', greet)
  var greet = 'Ciao!'
  console.log('3: ', greet)
}

console.log('1: ', greet)
sayHi()
console.log('4: ', greet)

Can you explain why each of the console.log will result in the respective value below?

1: Hello!
2: undefined
3: Ciao!
4: Hello!

More specifically, can you explain why console.log('2: ', greet) at line 6 results in undefined?

Below, I annotated the snippet to highlight possible sources of confusion.

// Global scope

var greet = 'Hello!' // Scoped to the global scope

function sayHi () {
  // Local scope

  console.log('2: ', greet) // undefined... Why? Isn't greet a global variable? 

  var greet = 'Ciao!' // Modified greet to 'Ciao!'
  console.log('3: ', greet) // Ciao!... Yeah make sense.
}

console.log('1: ', greet) // Hello!... Fair enough, it's a global variable right?
sayHi()
console.log('4: ', greet)  // Hello!... Wait, didn't we just change it to Ciao?

The key is hoisting — variables and functions are hoisted within the scope they belong to.

Please post any feedback, questions, or requests for topics. I would also appreciate 👏 if you like the post, so others can find this too.

Thanks, and see you next time!

Function Hoisting ✨

Abdusanadzoda Abdulaziz — Wed, 10 Mar 2021 01:31:04 +0000

Intro

In my last post, we discussed about hoising and variable hoisting in detail. With the understanding of how variable hoisting works, let’s move on to function hoisting.

Test Your Knowledge

Can you tell what will the following three sayHello() result in, and more importantly, explain why?

sayHello()

function sayHello () {
  function hello () {
    console.log('Hello!')
  }

  hello()

  function hello () {
    console.log('Hey!')
  }
}

sayHello()

function sayHello () {
  function hello () {
    console.log('Hello!')
  }

  hello()

  var hello = function () {
    console.log('Hey!')
  }
}

sayHello()

var sayHello = function () {
  function hello () {
    console.log('Hello!')
  }

  hello()

  function hello () {
    console.log('Hey!')
  }
}

Answers are Hey!, Hello!, and the third one actually results in a TypeError.

Don’t worry if you didn’t guess these right. There will be a few more quiz at the end, and by then, you’ll find yourself more comfortable with function hoisting.

Function Hoisting

Remember this example from variable hoisting?

console.log(x)
var x

// undefined

The key here was that x was available before its declaration. The same logic applies to a function declaration.

sayHello()

function sayHello () {
  console.log('Hello!')
}

// Hello!

In this example, I’m calling sayHello function before its declaration from line 3. Although it looks like I am calling a function that hasn’t even been declared, I can use it, and it prints out Hello!. This is thanks to function hoisting.

During the memory creation phase, the JavaScript engine recognised a function declaration by the function keyword and hoisted it — in other words, the JavaScript engine made the function available by putting it into the memory, before moving on. That’s why I could access the sayHello function prior to its declaration in the execution phase.

Alright, so what about this one? Can you tell what would the following code do?

sayHello()

var sayHello = function () {
  console.log('Hello!')
}

Yep, that’s right — it results in TypeError, complaining that sayHello is not a function. Hmm… wait, what!?

In order to fully understand what’s happening behind the scene, we need to to know the difference between function declaration and function expression. Let’s spend a little bit of time on that first.

Function Declaration vs Function Expression

There are two ways to define a function with the function keyword in JavaScript — function declaration and function expression.

A function declaration starts with the function keyword, followed by the name of the function (sayHello), then a block of code to be executed when the function is called ({ console.log('Hello!') }).

function sayHello() {
  console.log('Hello!')
}

sayHello()

// Hello!

On the other hand, a function expression allows you to define a function without a name and as part of non-functional code blocks. A typical usage of a function expression is to assign a function to a variable. Below, I’m defining an anonymous function, that is, function without a name, (function () { console.log(Hello!) }) and assigning it to a variable (var sayHello =), so I can refer to the function via sayHello later on.

var sayHello = function() {
  console.log('Hello!')
}

sayHello()

// Hello!

If I were to call these functions after they are defined, I can call them in the same way via sayHello() and both print out Hello!. However, when the JavaScript engine first sees them, it treats them in very different ways.

Function Expressions are Not Hoisted

Let’s go back to example 2, which threw a TypeError: sayHello is not a function, and walk through what’s happening step by step from the JavaScript engine’s point of view.

sayHello()

var sayHello = function () {
  console.log('Hello!')
}

During the memory creation phase, the JavaScript engine encounters the var keyword at line 3, at which point it expects a variable declaration to follow. Do you remember what the JavaScript engine does to a variable declaration? Yes, it hoists the variable with a value: undefined. And it doesn’t hoist the variable initiation.

Now… the TypeError starts to make sense. The variable declaration (var sayHello) was hoisted with a value undefined. However, the variable initialisation (= function () { console.log(Hello!) }) wasn’t hoisted. Therefore, when the execution reached line 1 and tried to call sayHello, it failed, because undefined is not a function! Only after the sayHello variable is assigned to a function expression during the execution at line 3, can we call the function by sayHello(). We can prove this with the following.

console.log(sayHello)

var sayHello = function () {
  console.log('Hello!')
}

sayHello()

// undefined
// Hello!

Got it?

Please post any feedback, questions, or requests for topics. I would also appreciate 👏 if you like the post, so others can find this too.

Variable Hoisting📢

Abdusanadzoda Abdulaziz — Wed, 10 Mar 2021 01:06:59 +0000

Intro

Can you tell what would these three console.log below prints out?

console.log('x is', x)

var x

console.log('x is', x)

x = 5

console.log('x is', x)

If not, stay with me, and I’ll try my best to demystify hoisting.

And even if you know what they print out, if you can’t explain the why, stick around. You might learn something new!

Hoisting

Hoisting is notoriously one of the most confusing aspects for those who are new to the language, or even with some experience — you’ve heard of them, you know it exists, you know it happens… but you don’t really know what exactly is happening behind the scene.

Often it’s explained as if the variable and function declarations are physically moved to the top of the code. But that’s not what is happening. In order to understand hoisting, you really need to understand different phases in which JavaScript engine goes through your code.

Note: let/const/class declarations behave differently. I think it’s best to understand hoisting with var/function first, so I will keep them for another time. In this post, I will start off by explaining variable hoisting.

JavaScrip Engine

We can’t talk about JavaScript without JavaScript engine. It is a programme which reads and runs JavaScript code. It’s the core of what makes it possible to run your beautiful code in web browsers. For now, it’s enough to know that it does its job in two phases: the memory creation phase and the execution phase, and that our code won’t be executed until the second phase.

Browser Developer Tool

Enough talking! Let’s go through some examples of hoisting. If you want to quickly try out the examples as you go along, you can do so by opening the developer tool in your browser (shortcut for Chrome is alt + cmd + i) and go to the console panel.
Tips for running multi-line code in developer tool: shift + enter to go to the new line, then press enter when you want to execute them. Or simply copy and paste the whole code, then hit enter.

Variable Hoisting

Alright, here’s the first one.

console.log(x)

// ReferenceError: x is not defined

Okay, I hear you. This is not actually an example of hoisting. The variable x is not declared anywhere in the code, so it will result in a big red ReferenceError, complaining that x is not defined— fair enough!

What about this one?

console.log(x)
var x

// undefined

At the first glance, you may think that it’s a lot like the first example. However, this code doesn’t throw an error. It executes and prints out a value of undefined. It’s important to note that, in JavaScript, undefined is an actual value. So this is basically JavaScript engine interpreting var x = undefined, just like var x = 5 or var x = ‘string’.

The key here is that x is defined and available before its declaration — yes, this is a legitimate example of hoisting. Hence, the example 2 is practically same as:

var x
console.log(x)

But who sets the value of x to undefined? I certainly didn’t, did I?

This is a job of the JavaScript engine. During the memory creation phase, it recognises variable declarations as it reads the code, initialises them to undefined and puts them into memory to be used during the execution phase.

Let’s look at another example. What will the console.log output?

console.log(x)
var x = 10

// undefined

You might have guessed that it would print out 10, because you initialised x to 10. But the console.log outputs undefined. Why??

Here is the gotcha… initialisations are not hoisted.

During the memory creation phase, the JavaScript engine recognised the declaration of x (var x), automatically initialised x to undefined, and made it available. However, as the initialisation (= 10) didn’t get hoisted, value of x stayed as undefined when the execution reached console.log at line 1.

If we add another console.log at line 3, the second output will be 10, because by then x is reassigned to 10.

console.log(x)
var x = 10
console.log(x)

// undefined
// 10

Got it?

Please post any feedback, questions, or requests for topics. I would also appreciate 👏 if you like the post, so others can find this too.

How JavaScript Works 🔥& Execution Context

Abdusanadzoda Abdulaziz — Tue, 09 Mar 2021 04:13:35 +0000

Do you know how JavaScript works and how the code is executed ?

Is JavaScript Synchronous or Asynchronous ?

Is JavaScript Single Threaded or Multy Threaded ?

If you are not familiriar with this so dont worry just keep reading.
So before going further just remember that "Everything in JavaScript happens inside an Execution Context!". You can asume this context as big box or a container in which whole JavaScript code is executed.

So lets divide this box or container in two parts left part will be Memory where all variables will be stored ad key valye pairs
ex: key:value;
And there is also another name for this Memory component which called Varibale Envirement.

The Second container is Code component , so this is the container where the code is executed line by line at the time.And people also call it Thread of Execution.

JavaScript Single Threaded or Multy Threaded

So when we say Single Threaded it means that JavaScript can only execute one line in a time.
And when we say Synchronous and Single Threaded that means that JavaScript can only execute one command in a time and in a specific order.Means that it can only go down if the current line has finished executing.