DEV Community: Naim Latifi

The basic React hooks - useState and useEffect

Naim Latifi — Thu, 17 Mar 2022 21:33:12 +0000

With the new version of React 16.8.0 were introduced React hooks which are functions that allow us to access state and other lifecycle features without a need to use classes. In this article, I am going to show you some of the basic hooks useState and useEffect

useState

The React useState allow us to track state inside function components. The useState hook that we import from React library accepts an initial value that is assigned only on initial render and returns an array. Let's see this by an example

From the example above we have initialized the state with value zero of type integer but that value can be of any other types like arrays, objects, null, string etc... The first value count that is destructed is a variable that holds the current state and the second element setCount is our function that takes a new value to update the state variable. So whenever we click the button the setCount function will be called and update the state count.

useEffect

It allows us to perform side effects inside functional components. But what do we mean with side effects? Well, these are some of the operations that we have already used with lifecycle methods in class-based components such as fetching data from the server, reading from a localStorage, updating the DOM, registering and deregistering event listeners, etc... It is important to state that the useEffect differs completely from lifecycle methods in class-based components both in abstraction level and how we use it. The signature for the useEffect accept a callback function and an optional dependency array looks as below:

Now let's take an example and see how we can execute a side effects with useEffect. For the demonstration purpose in the example below we will create two buttons where Update name button will update name Superman and button Update versions will update Superman's strongest versions.

As we can see inside useEffect we have omitted the dependancy array as a second argument thus a re-render is caused on initial load of component and whenever any of the buttons are clicked. As a result a console statements will get printed: Name: Superman and Strongest versions: Supermen prime. But what if we have a scenario so that we only want to load data when component is loaded (i.e. when fetching data from server). We can achieve this with the help of useEffect dependency array as follow:

Adding dependency array from the example above will output the console statement with a message on the initial component load. If any of the buttons are clicked it will not trigger a re-render of the component but will only update the state for the button clicked.
Moreover, with the help of a dependency array we can also execute useEffects that are dependent on a certain condition. From the example above if the state for name and strongest versions has changed.

From the example above a particular useEffect is invoked when a particular button is clicked and a particular state has changed. Clicking on the button Update name only one console statement is printed as Name: Superman! and not both as in the earlier example where dependency array was omitted.

Hope you enjoy it!

Keep an eye 👁️ on my other series of articles where I am going to write for other React hooks useContext useRef useReducer useCallback useMemo useImperativeHandle useLayoutEffect useDebugValue 🍻 👨‍💻 👩‍💻

ECMAScript 2021 (ES12) new features

Naim Latifi — Fri, 03 Sep 2021 10:08:37 +0000

ECMAScript, the standardized version of JavaScript is increasing its popularity and is becoming powerful every day. Since the introduction of ECMAScript 2015 (ES6) which was an immense growth forward, new features are added every year around June. Those features are mostly improvements to the JavaScript language by providing new functions and by expressing things in much simpler way. It also changes the way developers structure the program.

On June 22 The ECMA International approved the latest version of the official specification ES12 aka ECMAScript 2021 by providing capabilities for strings, promises, classes and much more. The following list show those new features of ES12

Numeric separators
String replaceAll()
Logical assignment operator
Promise.any
Private class methods
Private getters and setters
WeakRef

Numeric separators

Numeric separators are used for larger numbers that are hard to read by separating them with (_) between a group of digits. Let see this by an example

As we see from the example above it is hard to read the value if it is a million, ten million, or a billion. With the help of the numeric separators (_), we can divide the same number in group of digits as in example below

String replaceAll()

I find this method as my favorit one to use further in my codebase when working with strings and substrings replacements as there is no need on using regular expressions.

From the example above for the string This is interesting book that contains interesting examples we want to replace the word interesting with JavaScript in all substrings. The first method that we usually think of when replacing strings is the replace() method. However, as seen from the example above this method doesn't return the desired result since this method replace only the first occurrence on the substring This is JavaScript book that contains interesting examples but what we want is to have the string as This is JavaScript book that contains JavaScript examples. To achieve the desired result we usually use regular expressions for which they are unsafe to use as they contain escape characters.

Without using regular expression and with the help of ES12 feature replaceAll() we can achieve the same result as below

Logical assignment operator

As we already may know JavaScript currently support arithmetic i.e a +=b (equiv. to a = a + b) and bitwise i.e a &=b (equiv. a = a & b) assignment operators but what was missing is the ability to combine logical operator (&& || and ??) with assignment. With ES12 feature there are three such kind of logical assignment operator:

Logical nullish assignment (??=) -> (x ??= y) (only assigns if x is null or undefined)
Logical AND assignment (&&=) -> (x &&=y) (only assigns if x is truthy)
Logical OR assignment (||=) -> (x ||=y ) (only assigns if x is falsy)

The logical nullish assignment operator performs the assignment only if the left-hand operand is nullish (undefined or null). From the example below the string Superman is assigned to variable user only if the user is null or undefined and not otherwise. Nullish assignment operator is much simple as we just need to write one line of code compared to the old way as we need to have an if statement and check if the variable user is undefined or null then assign the value to the user.

Logical AND assignment operator performs assignment only if the left-hand operand is truthy. From the example below num2 is assigned to num1 if num1 is truthy and not null,undefined, false, 0, or NaN.

Logical OR assignment operator is opposite of logical AND assignment operator and performs assignment if the left-hand operand is falsy. From the example below num2 is assigned to num1 if num1 is null, undefined, false, or 0.

Promise.any

Promise.any accepts an iterable of promises and resolves as soon as one of the promise is resolved. If none of the promises aren't resolved then an AggregateError error is returned as an array with individual errors for each promise. Promise.any works in the opposite way of Promise.all() where all iterable promises needs to be resolved for a single promise to resolve.

From the example above we have set A and B and C promises where A and B resolve and C rejects and as result A is returned since it is resolved faster than B and C that is rejected whereas in case D and E we set all promises to be rejected and as a result an AggregateError is printed.

Private class methods

Since the introduction of ES6 developers can create classes in JavaScript that changed the way when thinking Object-oriented models. These classes by default have public properties and methods that are accessible from outside of the class. To overcome this issue there was a need for a naming convention with an underscore (_) for those properties and methods to be private even though this was just a hint and nothing preventing them from accessing outside of the class. Now with the new class features of ES12 we can define properties or methods as private by setting a #

From the example above when we try to access the method #private() we get an error because this method is private in the class. If we want to access this method outside of the class then we need to create a public method inside a class and call the #private() as seen in method showAll().

Private getters and setters

In a similar way as private class method works also private getters and setters in the class.

WeakRef

WeakRef that stands for Weak references are primarily used to implement caches or mappings for holding large objects. JavaScript has a garbage collector mechanism that collects and automatically removes variables that are not reachable but this mechanism differs with reference objects which keeps the object in memory and leaves you with less memory. Thus, with use of WeakRef large objects are not kept alive because they appears in a cache or mapping. However you should be careful when using them and possible avoid them as advised from TC39 even though they can be useful in some cases.

From the example above we created an imaginary large object and then created Weak reference by using new instance with new WeakRef. We can access the reference by calling the method deref()

Final thoughts

Whenever I learn and try something new I am always passionate to share my knowledge by helping other people on reaching their goals.I really hope you find this article interesting and helpful on learning ES12 features from it.

Any feedback, suggestions or recommendations are appreciated. This will really help and motivate me for further post sharing

Happy coding!

Infinite Scroll with React.js

Naim Latifi — Mon, 11 May 2020 11:32:28 +0000

As part of my react app series I just finished "Infinite scrolling with React.js" app. Check it out here

Quote CRUD App build with React.js

Naim Latifi — Wed, 15 Apr 2020 14:40:07 +0000

We frontend developers are not limited to only one framework for building Single Page Applications (SPA). Recently I have been working mostly with Vue.js framework for building those applications but I wanted to extend my knowledge further and learn how React.js works under the hood. So, I created this simple Quote CRUD app with the purpose of applying React.js concepts and shared it with you. 😊

The purpose of this app is as a user to be able to create, read, edit and delete a quote. Technologies and React concepts I applied in this app:

Quickly get started with create-react-app CLI ✅
Created class components for showing and creating quotes. ✅
Instead of writing pure vanilla JS for creating HTML elements and appending to DOM I learned to use JSX and understood that everything in React is JavaScript. ✅
In order to navigate between pages, I installed a react-router. ✅
Local state in React class components and setState method for mutating the state values. ✅
As my app began to grow I noticed that it could be better to separate it in multiple function components and reuse those components. ✅
Controlled components for handling user form inputs and events. ✅
Props for passing data between components and conditional rendering to render part of the code/component. ✅
React-bootstrap is used for UI components. ✅
Sass as CSS pre-processor for component styling. ✅
React masonry CSS for masonry layout. ✅
Firebase real database for saving, fetching and updating the data. ✅
For this tiny app I would probably not need an extra library for managing the state of this application however I wanted to integrate Redux and hold the application state into a store, using reducers to specify how the application's state changes, using actions to send data from my application to the store by dispatching, etc. ✅

Link: Quote app

I hope you find it interesting!

Cheers 🍻
Stay healthy!

Question: What is your favorite JavaScript framework?

Naim Latifi — Fri, 13 Mar 2020 10:56:56 +0000

Please comment below why you would prefer React, Vue or Angular. Pros and cons of each :)

Understanding "this" in JavaScript

Naim Latifi — Thu, 08 Aug 2019 21:31:23 +0000

Many times this keyword in JavaScript can be confused if it is not understood correctly. In this article, I will show you how this works with some code examples and how its value is assigned in a different context in JavaScript. There are different scenarios where this can change its value:

      - `this` in a global context, function invocation

      - `this` in an object constructor

      - `this` in an object method.

      - `this` with arrow function (=>)

But wait before jumping to the examples we just mentioned context so what is it in JavaScript? The context in JavaScript is always the value of this that is determined during the execution code. To clearly understand let's go now with code examples and see how it works on each scenario.

console.log("What is 'this' value?", this) // Window
function simpleFunction () {
   console.log("What is the value of this inside function?", this) //  Window
  }
simpleFunction()

From the code example 1 this refers to the global object which is determined from the execution context and wherein the browser is the global object (window). Similarly, when invoking the function this inside that function refers to the global object. But what this refers inside constructor function? We see this in the code example 2 as below.

function Person(name, lastName) {
    this.name = name;
    this.lastName = lastName;
    this.displayName = function() {
       console.log(`Your name ${this.name} and lastName 
     ${this.lastName}`)
  }
}
  let person = new Person('George', 'Superman')
      person.displayName() // George Superman

As we see from the code above we create a construction function Person and then we invoke a new instance object george. this value, in this case, refers to the newly created object.

let greetings = {
     word: 'Hello',
     printGreeting: function(){
       console.log("What 'this' refers to inside object method? ", 
   this.word) // "this" in object refers to the object itself- greetings
     }
  }

  greetings.printGreeting()

From code example 3 above we created an object which has a property and method printGreeting. We are calling the property name inside the method with this which its value refers to the object itself.

We saw from the code examples above that this value inside a function refers to the global object and inside of an object method refers to the object itself but what about if we want to invoke an object method inside another function and reference this. What will be the value of this in this context? Let's see with the code example 4 and where we will run it with strict mode as below

"use strict"
let person = {
    firstName: 'George',
 }

 function printName(greeting) {
  console.log(greeting + this.firstName)
 }

 printName('hello') // Uncaught TypeError: Cannot read property 'firstName' of undefined

After running the code we see that we get an error because JavaScript interpret does not understand object property this.firstName because this value inside a function is set during the execution context. But, how to overcome this issue? JavaScript functions are a special type of objects which contains methods call(), apply() and bind().

call(), apply() and bind()

These methods are inherited by all functions in order to get the value of this in any desired context. The differences between these function methods are that call() method requires parameters as a comma-separated and apply() method in the form of the array list and are executed immediately whereas bind() method can be executed later in any desired context. The code example 5 below shows how we can use these methods and set this in any desired context.

  let person = {
    firstName: 'George',
  }

  function printName(greeting) {
    console.log(greeting + this.firstName);
  }

  printName.call(person, 'Hello') // Hello George
  printName.apply(person, ['Hello there']) // Hello there George
  let executeLater = printName.bind(person)
  executeLater() // George

`this` with arrow function =>

With ECMAScript 2015 (ES6) arrow function was introduced as a new feature in the world of JavaScript. There are a lot of benefits on using arrow functions which brings shorter function syntax to no need on binding this. With the use of arrow function this is bounded lexically in the enclosing context. Let's see this in action with code example to make it clear.

let greetings = {
  word: 'Hello',
  printGreeting(){
      console.log(this.word)  // Hello
    })
  }
}

If we go back to the previous code example 2 we saw that this inside object refers to the object itself but what if we are required that our greeting to be displayed after 1 second. Then to get the required result we need to modify the code as below

let greetings = {
  word: 'Hello',
  printGreeting(){
    window.setTimeout(function () {
      console.log(this.word) 

    }, 1000) // we can set bind(this)
  }
}

greetings.printGreeting() // undefined

We see that after executing the method printGreeting() we get undefined because the setTimout() function invocation sets this context to the global object. However, here to achieve the result we can use bind() method as we saw previously or we can create a closure just before the setTimeout() function with self=this but we don't need to do this as we can achieve the desired result with the use of arrow function


let greetings = {
  word: 'Hello',
  printGreeting(){
    window.setTimeout(() => {
      console.log(this.word)  
    }, 1000)
  }
}

greetings.printGreeting() // Hello

Now as the result on the console we will get greeting hello because with use of arrow function "this" is bound to the enclosing context and thus our "greetings" object.

That's it! :)

Hopefully, you find interesting this article and will help you in understanding this in JavaScript and its value in a different context.