DEV Community: vbazhutin

React component lifecycle and methods.

vbazhutin — Tue, 04 Aug 2020 16:01:16 +0000

In this post, I am going to explore the component lifecycle and some lifecycle methods of ReactJS.

Almost everything follows this cycle in its life, and React components do as well. Components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is referred to as a component lifecycle.

There are different lifecycle methods that React provides at different phases of a component’s life. React automatically calls the responsible method according to the phase in which the component is. These methods give us better control over our component and we can manipulate them using these methods.

Let’s have a look into them.

Lifecycle Methods

Lifecycle diagram

A component’s lifecycle is classified into three parts:

mounting
updating
unmounting

Let’s talk more about different lifecycle methods that are available at these different phases (i.e., mounting, updating & unmounting).

Mounting

The name is self-explanatory. Mounting is the phase in which our React component mounts on the DOM (i.e., is created and inserted into the DOM).

In this phase, our component renders the first time. The methods that are available in this phase are:

componentWillMount()

This method is called just before a component mounts on the DOM or the render method is called. After this method, the component gets mounted.

Note: You should not make API calls or any data changes using this.setState in this method because it is called before the render method. So, nothing can be done with the DOM (i.e. updating the data with API response) as it has not been mounted yet, so we can’t update the state with the API response.

componentDidMount()

This method is called after the component gets mounted on the DOM. Like componentWillMount, it is called once in a lifecycle. Before the execution of this method, the render method is called (i.e., we can access the DOM). We can make API calls and update the state with the API response.

Have a look to understand these mounting methods:

class LifeCycle extends React.Component {
  componentWillMount() {
      console.log('Component will mount!')
   }
  componentDidMount() {
      console.log('Component did mount!')
      this.getList();
   }
  getList = () => {
   // method to make api call
  }
  render() {
      return (
         <div>
            <h3>Hello mounting methods!</h3>
         </div>
      );
   }
}

Updating

This is the third phase through which our component passes. After the mounting phase where the component has been created, the update phase comes into the scene. This is where component’s state changes and hence, re-rendering takes place.

In this phase, the data of the component (state & props) updates in response to user events like clicking, typing and so on. This results in the re-rendering of the component. The methods that are available in this phase are:

shouldComponentUpdate()

This method determines whether the component should be updated or not. By default, it returns true. But at some point, if you want to re-render the component on some condition, then shouldComponentUpdate method is the right place.

Suppose, for example, you want to only re-render your component when there is a change in prop — then utilize the power of this method. It receives arguments like nextProps and nextState which help us decide whether to re-render by doing a comparison with the current prop value.

componentWillUpdate()

Like other methods, its name is also self-explanatory. It is called before the re-rendering of the component takes place. It is called once after the shouldComponentUpdate method. If you want to perform some calculation before re-rendering of the component and after updating the state and prop, then this is the best place to do it. Like the shouldComponentUpdate method, it also receives arguments like nextProps and nextState.

componentDidUpdate()

This method is called just after the re-rendering of the component. After the new (updated) component gets updated on the DOM, the componentDidUpdate method is executed. This method receives arguments like prevProps and prevState.

Let's take a look to understand the updating methods better:

class LifeCycle extends React.Component {
      constructor(props)
      {
        super(props);
         this.state = {
           date : new Date(),
           clickedStatus: false,
           list:[]
         };
      }
      componentWillMount() {
          console.log('Component will mount!')
       }
      componentDidMount() {
          console.log('Component did mount!')
          this.getList();
       }
      getList=()=>{
       // method to make api call
       fetch('https://api.mydomain.com')
          .then(response => response.json())
          .then(data => this.setState({ list:data }));
      }
       shouldComponentUpdate(nextProps, nextState){
         return this.state.list!==nextState.list
        }
       componentWillUpdate(nextProps, nextState) {
          console.log('Component will update!');
       }
       componentDidUpdate(prevProps, prevState) {
          console.log('Component did update!')
       }
      render() {
          return (
             <div>
                <h3>Hello Mounting Lifecycle Methods!</h3>
             </div>
          );
       }
}

Unmounting

This is the last phase in the component’s lifecycle. As the name clearly suggests, the component gets unmounted from the DOM in this phase. The method that is available in this phase is:

componentWillUnmount()

This method is called before the unmounting of the component takes place. Before the removal of the component from the DOM, componentWillUnMount executes. This method denotes the end of the component’s lifecycle.

That’s all about this important part of the React — lifecycle methods. Further reading on learning React

Javascript: Array.unshift(), Array.join().

vbazhutin — Mon, 20 Jul 2020 16:32:31 +0000

Array.unshift()

Javascript array unshift() - is an inbuilt function that adds one or more items or elements to the beginning of the array and returns the new length of the array. The unshift() method changes the length of the array directly, so it is not a pure function.

Javascript unshift() method is like the push() method, only it works at the beginning of the array.
The unshift() method can prepend one or more elements to the beginning of an array. This alters an array on which the method was called.

When people first start to learn about arrays in javascript then, they usually learn about the Javascript push() and Javascript pop() methods which merely adds and removes the item from the end of an array.

If their particular language supports it. These two methods append the items to the array and remove an element from the array respectively.

Javascript unshift() and Javascript shift() methods are the same as push() and pop(), only work, at the other end of the array.

Syntax

The syntax of the Javascript array unshift() method is the following.

array.unshift(item1, item2, ..., itemX)

Parameters

The number of arguments to this function is the same as the number of elements to be added at the beginning of the array.

Return value

This function returns the new length of the array after inserting the arguments at the beginning of the array.

Example

Let us take a simple example and see how it works.

let apps = ["Instagram", "Facebook", "Messanger"];
apps.unshift("Oculus", "WhatsApp");

console.log(apps);

Run the file, and you can see that Oculus and WhatsApp are appended at the start of an array.

More examples

The following code will include almost all the scenarios of the unshift() method.

let arr = [1, 2];

arr.unshift(0); // result of call is 3, the new array length
// arr is [0, 1, 2]

arr.unshift(-2, -1); // = 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-3]);
// arr is [[-3], -2, -1, 0, 1, 2]

Javascript array `unshift` object

Let’s take an example in which we defined two objects and add them into one array. Then try to add a third object using an array unshift() method.

const objA = {
  name: 'Millie Bobby Brown'
}
const objB = {
  name: 'Finn Wolfhard'
}
const objC = {
  name: 'Sadie Sink'
}
let arr = [objA, objB];
arr.unshift(objC);
console.log(arr);

Let's see the output.

[ { name: 'Sadie Sink' },
  { name: 'Millie Bobby Brown' },
  { name: 'Finn Wolfhard' } ]

`Unshift` multiple array items in Javascript

We can add multiple items to the start of an array using the unshift() method.

const objA = {
  name: 'Millie Bobby Brown'
}
const objB = {
  name: 'Finn Wolfhard'
}
const objC = {
  name: 'Sadie Sink'
}
const objD = {
  name: 'Noah Schnapp'
}
const objE = {
  name: 'Gaten Matterazo'
}
let arr = [objA, objB];
arr.unshift(objC, objD, objE);
console.log(arr);

And the output will be.

[ { name: 'Sadie Sink' },
  { name: 'Noah Schnapp' },
  { name: 'Gaten Matterazo' },
  { name: 'Millie Bobby Brown' },
  { name: 'Finn Wolfhard' } ]

Conclusion

Javascript array unshift() method is used to add the item or items into the array.

Array.join()

Javascript array join() is an inbuilt method that creates and returns the new string by concatenating all of the elements of the array. The join() method joins the items of the array into the string and returns that string. The specified separator will separate the array items. The default separator is a comma (,).

Syntax

The syntax for the join() method is the following.

array.join(separator)

The separator is an optional parameter. By default, a separator is a comma.

Example

A simple example is the following.

let apps = ["Instagram", "Facebook", "Messenger"];
let fb = apps.join();

console.log(fb);

Output

"Instagram","Facebook","Messenger"

More examples

So, join() returns a comma-separated string. We did not pass any parameter to the join() function that is why it has returned the comma-separated string.

let apps = ["Instagram", "Facebook", "Messenger"];
let fb = apps.join('_');

console.log(fb);

It will return the underscore separated string.

So, an array.join() function is used to join all the items of an array together into a string.

If an element is undefined or null, it is converted to the empty string. So If an array.length is 0, the empty string is returned.

Joining an array in four different ways

The following example is an array, with three elements, then joins the array four times: using the default separator, then a comma and space, then a plus and an empty string.

let suits = ['Harvey', 'Mike', 'Louis'];
suits.join();      // 'Harvey,Harvey,Louis'
suits.join(', ');  // 'Harvey, Harvey, Louis'
suits.join(' + '); // 'Harvey + Harvey + Louis'
suits.join('');    // 'HarveyHarveyLouis'

Joining an array-like object

The following example joins an array-like object (arguments), by calling Function.prototype.call on Array.prototype.join.

function args(a, b, c) {
  let data = Array.prototype.join.call(arguments);
  console.log(data);
}
args(21, 'acme', false);

Visit MDN to learn more about Javascript array methods.

Javascript: Event listeners

vbazhutin — Mon, 13 Jul 2020 17:48:51 +0000

JavaScript: Events and Listeners

You can start functions when your page loads, many times you'll want to start functions when a user clicks a link, enters a form, scrolls, moves his or her mouse over an object, or does something else. These actions are called events. You can set specific functions to run when the user performs an event. These functions "listen" for an event and then initiate the function.

Common Event Listeners

The following are common events:

onload //when the page loads
onclick //when a user clicks something
onmouseover //when a user mouses over something
onfocus //when a user puts the cursor in a form field
onblur //When a user leaves a form field

Note that each event listener begins with on and is entirely lowercase.

Adding Event Listeners

You can add an event listener directly in the HTML code in the following way:

<button onclick="alert('Hello, world');"></button>

However, mixing the JavaScript code with the HTML directly is generally a poor practice for the same reason that you don't integrate style commands into HTML but rather reference the styles in a separate CSS file.

A more common way to integrate the event listeners is by identifying the element and adding the event listener as a method. The general format for doing this is as follows:

myElement.onclick = function() {
//run your event handler code...
}

In this example, myElement would be a variable that refers to a specific style on your page.

Note that the word function is written without a name because it's code is specified in the code block that immediately follows.

Associating Events with IDs

If you have a specific ID in your web page that uniquely identifies a section, you can associate an event with that ID. Here's an example:

//set a variable to refer to a specific ID
const specialSection = document.getElementById('specialSection');

//initiate this function when the user clicks the ID
specialSection.onclick = function() {
alert("Hello World")
}

Adding the addEventListener Method

You can also add event listeners using a method called addEventListener. However, this method isn't supported in Internet Explorer 8, so if you use this method, you need to add some conditional functions to check for browser functionality before running the function.

The format for adding events using this method is as follows:

document.addEventListener('click', myFunction)

In the above format, you start by adding the method to the Document object. In the parentheses, list the event listener but without the on. (In this example, the event listener is onclick, which is shortened to click.) You then add the function to run. (The function is declared elsewhere.) The false refers to an advanced, rarely used parameter for event handling.

Referencing Event Handlers

If your event handler refers to a specific element on the page, and you call your script before the element loads, the script won't work because the element isn't available at the time the script runs.

You could insert the script before the closing body tag to ensure the elements load first, but let's say you need your script to run earlier — before the element loads. You can use the prepareEventHandlers function to load the function when the page loads.

First, add the prepareEventHandlers function:

//declare the function
function prepareEventHandlers() {
  //get a specific page ID and assign it as a variable
  const specialSection = document.getElementById('specialSection');
  //initiate this function when the ID is clicked
  specialSection.onclick = function() {
  alert("Hello World");
  }
}

Now call the prepareEventHandlers function when the window loads:

window.onload = function() {
prepareEventHandlers();
}

Using this technique, the event will be loaded and ready even if it is referenced before the element it's listening for. Note that you can call the window.onload function only once per page.

Onblur and onfocus Events

onblur and onfocus events refer to the way users interact with forms. When a user clicks a form field, an onfocus event occurs. When a user clicks out of the field, an onblur event occurs.

Here's an example. Let's say that your HTML form has an ID called namefield:

<input type="text" placeholder="your name" name="name"
id="namefield" />

First, get the namefield element, and then add an event to it.

//get the ID and assign it as a variable
const nameField = document.getElementbyId("name");
//when the ID is clicked, run this function
nameField.onfocus = function() {
  //if the field has the value "your name", leave it blank
  if ( nameField.value === "your name" ) {
  nameField.value = ""
  }
}

You can also add an onblur event to take place when the user leaves the field.

//get the ID and assign it as a variable
const nameField = document.getElementbyId("name");
//when the user leaves the ID, run this function
nameField.onblur = function() {
  //if the field's value is "your name", don't write anything
  if ( nameField.value === "your name" ) {
  emailField.value = "";
  }
};

Timers

You can add events that have a time delay. For example, if you want a pop-up message to appear after the user has been on the page for 10 seconds, you can do this through the setTimeOut method.

For example, let's say you have a simple message:

function welcomeVisitor() {
alert("Welcome to the site");
}

However, you don't want this message to appear until the user has been on the page for a while. You delay the action through the setTimeOut function:

setTimeOut(welcomeVisitor, 8000);

The setTimeOut function has two parameters. The first allows you to call a function (which we declared earlier), and the second refers to the timer. The function will not be called for 8000 milliseconds.

There are other timer functions, such as setInterval, that initiate the function at the interval you specify.

These were some simple examples and there's a lot more to learn, you can check the MDN to get more information.

Data Types in JavaScript

vbazhutin — Mon, 06 Jul 2020 17:39:09 +0000

Data Types in JavaScript

Data types specify what kind of data can be stored and manipulated within a program.

There are six basic data types in JavaScript which can be divided into three main categories: primitive, composite, and special data types. String, Number, and Boolean are primitive data types. Object, Array, and Function (which are all types of objects) are composite data types. Whereas Undefined and Null are special data types.

Primitive data types can hold only one value at a time, whereas composite data types can hold collections of values and more complex entities.

The String Data Type

The string data type is used to represent textual data (i.e. sequences of characters). Strings are created using single or double quotes surrounding one or more characters, as shown below:

var a = 'Hi there!';  // using single quotes
var b = "Hi there!";  // using double quotes
var a = "Let's have a cup of coffee."; // single quote inside double quotes
var b = 'He said "Hello" and left.';  // double quotes inside single quotes
var c = 'We\'ll never give up.';     // escaping single quote with backslash

The Number Data Type

The number data type is used to represent positive or negative numbers with or without decimal place, or numbers written using exponential notation e.g. 1.5e-4 (equivalent to 1.5x10-4).

var a = 25;         // integer
var b = 80.5;       // floating-point number
var c = 4.25e+6;    // exponential notation, same as 4.25e6 or 4250000
var d = 4.25e-6;    // exponential notation, same as 0.00000425

The Number data type also includes some special values which are: Infinity, -Infinity and NaN. Infinity represents the mathematical Infinity ∞, which is greater than any number. Infinity is the result of dividing a nonzero number by 0.

alert(16 / 0);  // Output: Infinity
alert(-16 / 0); // Output: -Infinity
alert(16 / -0); // Output: -Infinity

While NaN represents a special Not-a-Number value. It is a result of an invalid or an undefined mathematical operation, like taking the square root of -1 or dividing 0 by 0, etc.

alert("Some text" / 2);       // Output: NaN
alert("Some text" / 2 + 10);  // Output: NaN
alert(Math.sqrt(-1));         // Output: NaN

The Boolean Data Type

The Boolean data type can hold only two values: true or false. It is typically used to store values like yes (true) or no (false), on (true) or off (false), etc.

var isReading = true;   // yes, I'm reading
var isSleeping = false; // no, I'm not sleeping

Boolean values also come as a result of comparisons in a program. The following example compares two variables and shows the result in an alert dialog box:

var a = 2, b = 5, c = 10;

alert(b > a) // Output: true
alert(b > c) // Output: false

The Undefined Data Type

The undefined data type can only have one value-the special value undefined. If a variable has been declared, but has not been assigned a value, has the value undefined.

var a;
var b = "Hello World!"

alert(a) // Output: undefined
alert(b) // Output: Hello World!

The Null Data Type

This is another special data type that can have only one value-the null value. A null value means that there is no value. It is not equivalent to an empty string ("") or 0, it is simply nothing.

A variable can be explicitly emptied of its current contents by assigning it the null value.

var a = null;
alert(a); // Output: null

var b = "Hello World!"
alert(b); // Output: Hello World!

b = null;
alert(b) // Output: null

The Object Data Type

The object is a complex data type that allows you to store collections of data.

An object contains properties, defined as a key-value pair. A property key (name) is always a string, but the value can be any data type, like strings, numbers, booleans, or complex data types like arrays, function and other objects.

var emptyObject = {};
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
var car = {
    "model": "BMW X3",
    "color": "white",
    "doors": 5
}

The Array Data Type

An array is a type of object used for storing multiple values in single variable. Each value (also called an element) in an array has a numeric position, known as its index, and it may contain data of any data type-numbers, strings, booleans, functions, objects, and even other arrays. The array index starts from 0.

The simplest way to create an array is by specifying the array elements as a comma-separated list enclosed by square brackets.

var colors = ["Red", "Yellow", "Green", "Orange"];
var cities = ["London", "Paris", "New York"];

alert(colors[0]);   // Output: Red
alert(cities[2]);   // Output: New York

The Function Data Type

The function is callable object that executes a block of code. Since functions are objects, so it is possible to assign them to variables.

var greeting = function(){ 
    return "Hello World!"; 
}

alert(greeting());     // Output: Hello World!

In fact, functions can be used at any place any other value can be used. Functions can be stored in variables, objects, and arrays. Functions can be passed as arguments to other functions, and functions can be returned from functions.

DEV Community: vbazhutin

React component lifecycle and methods.

Lifecycle Methods

Mounting

componentWillMount()

componentDidMount()

Updating

shouldComponentUpdate()

componentWillUpdate()

componentDidUpdate()

Unmounting

componentWillUnmount()

Javascript: Array.unshift(), Array.join().

Array.unshift()

Syntax

Parameters

Return value

Example

More examples

Javascript array unshift object

Unshift multiple array items in Javascript

Conclusion

Array.join()

Syntax

Example

More examples

Joining an array in four different ways

Joining an array-like object

Javascript: Event listeners

JavaScript: Events and Listeners

Common Event Listeners

Adding Event Listeners

Associating Events with IDs

Adding the addEventListener Method

Referencing Event Handlers

Onblur and onfocus Events

Timers

Data Types in JavaScript

Data Types in JavaScript

The String Data Type

The Number Data Type

The Boolean Data Type

The Undefined Data Type

The Null Data Type

The Object Data Type

The Array Data Type

The Function Data Type

Javascript array `unshift` object

`Unshift` multiple array items in Javascript