DEV Community: Muhammad Bilal Bangash

Detecting user leaving page with react-router-dom v6.0.2

Muhammad Bilal Bangash — Sun, 23 Jan 2022 13:25:25 +0000

Introduction:

Before reading this article you should know about React Routing, its working.

Main Focus of this post is detecting user leaving page with react-router-dom v6.0.2.

You can use usePrompt or useBlocker to detect and show a prompt before leaving to another route if they have any unsaved changes.

However, in the official documentation of react router v6 the following is mentioned:

from v5 (along with usePrompt and useBlocker from the v6 betas) are not included in the current released version of v6.

But there are two different solution to achieve your goal.

Either you can downgrade to v5 or 6.0.0-alpha.5 to use usePrompt & useBlocker in you project/code
Second solution is create custom hook instead of downgrading.

Post Focus useCallbackPrompt & useBlocker custom hooks

In my today's post I will focus on my second solution how did I created a custom hook to resolve my problem.

for this I created a small project for demo.
Here is the project link GITHUB.

In this project I created two routes for Home and About page and in Home Page there is simple form with Name and Designation Field.
My goal was when user type something on form and trying to leave this page or route prompt/DialogBox will be shown that there are some changes.....

how my folder structure looks like

in above screenshot I highlighted the custom hooks that I created in this project

useBlocker
useCallbackPrompt

useCallbackPrompt Hook

this hooks returns three things 2 boolean variables and 1 function. Basically for handling DialogBox to show or hide
here is the exact file for that useCallbackPrompt Hook

useBlocker Hook

this hook basically blocks user from navigating away if there are any changes

useBlocker Hook

Now Question arise How I am using this in my project

What I am doing here when user type something handleChange will trigger and update the showDialog to true and I am passing showDialog to useCallbackPrompt and when user trying to navigate away a prompt will be shown

Home Page

Here is Live Demo Link

Here is Git Repo Link

Further improvement, suggestion or help. Welcome :)

Set in JavaScript

Muhammad Bilal Bangash — Sat, 12 Jun 2021 12:14:42 +0000

"Inner Experience is only one source of human Knowledge."
- Dr. Allama Muhammad Iqbal

Good Day!!

In this article, we would be discussing the Set object in JavaScript

Set
Instance properties
1. size
Instance methods
1. add(value)
2. delete(value)
3. clear()
4. has(value)
Iteration methods
1. keys()
2. values()
3. entries()
4. forEach()
Remove duplicate items from array using Set

Let's Start.....

1. Set

The Set object lets you store unique values of any type, whether primitive values or object references.

Description

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

Example

const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

console.log("Data in Set is ",setObj)
// Data in Set is Set(4) {"anyString", 11, true, {key:"value"}}

2. Instance properties

size: Returns the number of values in Set object

const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

console.log("Size of Set is ",setObj.size)
// Size of Set is 4

3. Instance methods

add(value): Appends value to the Set object. Return the Set object with added value

const setObj= new Set();
setObj.add("addedString");
console.log("First value added String ", setObj);
// First Value added String Set(1) {"addedString"}
setObj.add(11);
console.log("second value added number", setObj);
// second value added number Set(2) {"addedString", 11}

delete(value): Removes the element associated to the value and returns a boolean asserting whether an element was successfully removed or not.

const setObj= new Set();
setObj.add("addedString");
console.log("Delete addedString from setObj ", setObj.delete("addedString"));
// Delete addedString from setObj true

clear(): Removes all elements from the Set object.

const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

console.log("Data in Set is ",setObj)
// Data in Set is Set(4) {"anyString", 11, true, {key:"value"}}


//Now clear setObj
setObj.clear();

console.log("Data in Set after clear ",setObj)
// Data in Set after clear Set(0) {}

has(value): Returns a boolean asserting whether an element is present with the given value in the Set object or not.

const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

console.log("Data in Set is ",setObj)
// Data in Set is Set(4) {"anyString", 11, true, {key:"value"}}


//Now check value exist or not in setObj

console.log("11 exists in setObj ",setObj.has(11));
// 11 exists in setObj true

4. Iteration methods

keys() && values(): Returns a new iterator object that yields the values for each element in the Set object in insertion order. (For Sets, keys() && values() methods are same.)

const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

for (let item of setObj.keys()) console.log('Item: ',item)
// Item: anyString
// Item: 11
// Item: true
// Item: {key:"value"}

for (let item of setObj.values()) console.log('Item: ',item)
// Item: anyString
// Item: 11
// Item: true
// Item: {key:"value"}

forEach(callbackFn[, thisArg]): Calls callbackFn once for each value present in the Set object, in insertion order. If a thisArg parameter is provided, it will be used as the this value for each invocation of callbackFn.

const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

setObj.forEach((value)=>{
  console.log('Value: ',value)
})

// Value: anyString
// Value: 11
// Value: true
// Value: {key:"value"}

5. Remove duplicate items from array using Set

const duplicateNumbers = [11,45,33,11,22,44,44,44,56,76,45];
console.log('duplicate removed ',[...new Set(duplicateNumbers)]);

// duplicate removed (7) [11,45,33,22,44,56,76]

const dupNames=["John","Daina","John","Jason","Joe","Daina"];
console.log('duplicate removed ',[...new Set(dupNames)]);

// duplicate removed  (4) ["John", "Daina", "Jason", "Joe"]

Here it's official documentation
Set in JavaScript Official

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
Thank you

Introduction React-Redux using Hooks (useSelector && useDispatch)

Muhammad Bilal Bangash — Sat, 05 Jun 2021 17:59:21 +0000

Introduction:

Before reading this article you should know about React & Redux, its working.

This article is about React-Redux Hooks. We will go through below main points in this article:

* Hooks for Redux.

* How to use `useDispatch` Hook.

* How to use `useSelector` Hook.

1. Hooks for Redux

Before Hooks, we always used a connect() which is a higher-order component and wrapper to our component, connect() read values from the Redux store.

connect() takes two arguments, both optional:

mapStateToProps
mapDispatchToProps

mapStateToProps:

called every time the store state changes. It receives the entire store state and should return an object of data this component needs.

mapDispatchToProps:

This parameter can either be a function, or an object. If it’s a function, it will be called once on component creation. It will receive dispatch as an argument and should return an object full of functions that use dispatch to dispatch actions.

more about connect()

Let's move towards react-redux hooks. React-Redux now offers a set of hook APIs as an alternative to existing connect() Higher-Order Component. These APIs allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in connect(). By using the Hook API with Function components, components are kept small and the code remains clean.

Hooks:

2. useDispatch():

useDispatch() hook is equivalent of mapDispatchToProps.

We will invoke useDispatch and store it to a variable, dispatch. This hook returns a reference to the dispatch function from the Redux store. You may use it to dispatch actions as needed.
And we dispatch it by calling dispatch passing in the return value from the action creator.

How to use

Below is the small component where using useDispatch and useSelector

import React from "react";
//import useDispatch from react-redux
import { useDispatch} from "react-redux";
//these are actions define in redux>actions folder
import { updateFirstName } from "../redux/actions"; 

const Form = () => {

  const dispatch = useDispatch();

  const handleFirstName = () => {
    //dispatching the action
    dispatch(updateFirstName("Jason"));
  };

  return (
    <React.Fragment>
      <div className="container">
        <button onClick={handleFirstName}>Update First 
        Name</button>
      </div>
    </React.Fragment>
  );
};

export default Form;

complete code in GITHUB redux-hooks

3.useSelector():

useSelector() hook is equivalent of mapStateToProps

useSelector is a function that takes the current state as an argument and returns whatever data you want from it and it allows you to store the return values inside a variable within the scope of you functional components instead of passing down as props

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { updateFirstName } from "../redux/actions";

const Form = () => {
  const dispatch = useDispatch();
  const nameObj = useSelector((state) => state.nameReducer);
  const { firstName } = nameObj;
  const handleFirstName = () => {
    dispatch(updateFirstName("Jason"));
  };

  return (
    <React.Fragment>
      <div className="container">
        <label>First Name : {firstName}</label>
        <button onClick={handleFirstName}>Update First Name</button>

        <label>Last Name : {lastName}</label>
        <button type="submit" onClick={handleLastName}>
          Update First Name
        </button>
      </div>
    </React.Fragment>
  );
};

export default Form;

complete code in GITHUB redux-hooks

useStore():

useStore() hook returns a reference to the same Redux store that was passed into Provider component.

This hook should probably not be used frequently. Prefer useSelector() as your primary choice. However, this may be useful for less common scenarios that do require access to the store, such as replacing reducers.

import React from 'react'
import { useStore } from 'react-redux'

export const ExampleComponent = ({ value }) => {
  const store = useStore()

  // EXAMPLE ONLY! Do not do this in a real app.
  // The component will not automatically update if the store state changes
  return <div>{store.getState().obj.name}</div>
}

complete code in GITHUB redux-hooks

If you wanna learn more about useDispatch and useSelector here it's official link React Redux Hooks

Further improvement, suggestion or help. Welcome :)

JavaScript new features in ECMAScript 2021

Muhammad Bilal Bangash — Tue, 01 Jun 2021 07:23:57 +0000

Below are some new features that you can expect from the ECMAScript:

replaceAll
Promise.any
WeakRefs and finalizer
Logical Assignment Operators
Numeric separator

Let's begin with the first one.

1. replaceAll() method

The replaceAll() method allows you to replace all occurrences of a substring with another string that you defined. Currently, the replace() method only replace the first occurrence of the substring while ignoring the rest:

const str = 'How+are+you?';
const addSpaces = str.replace('+', ' ');
console.log(addSpaces); // How are+you?

The only way to replace all occurrences is to use replace() with a global regular expression as follows:
// replace all '+' with a 'space'

const str = 'How+are+you?';
const addSpaces = str.replace(/\+/g, ' ');
console.log(addSpaces); // How are you?

With the replaceAll() method, you don’t have to use a regular expression anymore:

const str = 'How+are+you?';
const addSpaces = str.replaceAll('+', ' ');
console.log(addSpaces) //How are you?

2. Promise.any()

The Promise.any() method returns a promise that will resolve as soon as one of the promises are resolved. If all of the promises are rejected, the method will throw an AggregateError exception holding the rejection reasons.
Here’s an example:

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("First Promise Fulfilled"), 3000);
});
const secondPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Second Promise Fulfilled"), 2000);
});
const thirdPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Third Promise Fulfilled"), 1000);
});
Promise.any([firstPromise, secondPromise, thirdPromise]).then(
  (promiseFulfilled) => {
    // Any of the promises was fulfilled.
    console.log(promiseFulfilled); // Third Promise Fulfilled
  },
  (error) => {
    console.log(error)// Error Handling
  }
);

If all of the promises given are rejected, the AggregateError exception will be thrown.
Here’s another example showing the exception using the async/await syntax:

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 1000);
});
try {
  const first = await Promise.any([firstPromise]);
  // Any of the promises was fulfilled.
} catch (error) {
  console.log(error);
  // AggregateError: All promises were rejected
}

3. WeakRefs

The WeakRef, which stands for Weak References, allows you to create a weak reference to an object. The primary use of Weak Reference is to implement caches or mappings of a large object.
A regular/ strong JavaScript object reference will never be claimed by the garbage collector. A weak reference to an object, in contrast, can be claimed by JavaScript garbage collector:
const simpleObj = {name: "John Doe"}; const referenceObj = new WeakRef({name: "John Doe"});
When you need to read the value of WeakRefs , you need to use the deref() method to return the instance’s target object:

const referenceObj = new WeakRef({name: "John Doe"});
const obj = referenceObj.deref();
console.log(obj.name); // John Doe

Because the implementation detail of when, how, and whether JavaScript garbage collection actually occurs or not is up to the JavaScript engine implementation, you may observe different behavior between one JavaScript environment and another.
The correct use of WeakRef takes careful thought, and it’s best to avoid implementing one if possible. Unless you’re a JavaScript library maintainer, you will most likely never need to use it.

4. Finalizers

The Finalizer is a companion feature of WeakRef that allows you to execute a piece of code after an object has become unreachable to the program.
In short, you can register a callback function that gets triggered after the garbage collection occurs. You can create a registry by passing the callback to the FinalizationRegistry object:

const registry = new FinalizationRegistry(value => {
  console.log(value);
});

Then, you can register any object you want to cleanup for by calling the register() method, passing both the object and the value you want to pass to the callback function:
registry.register({name: "John"}, "any value");
The object passed into the register() method will be weak-referenced so that it can be garbage collected. Based on the code above, the callback will log “any value” to the console.
Both WeakRefs and Finalizers are tricky concepts. You can learn more about weak reference and FinalizationRegistry.
WeakRef
FinalizationRegistry

5. Logical assignment operator

The logical assignment operator combines Logical Operators and Assignment Expressions, allowing you to write a shorter syntax for variable value checking.

For example, the following code checks whether the value of x is falsy and only assign a new value when it is:

let x;
if(!x){
  x = 7;
}

Using the logical assignment operator, you can replace the above code with the following:

let x;
**x ||= 11;** // since x is undefined, it's assigned the number 11
console.log(x); // 11
The logical assignment works with logical AND (**&&**) and nullish coalescing operator (**??**) as well:
let x = null;
x ??= 11 // assign 11 to x when it's null or undefined
let y = "JavaScript";
y &&= 11 // assign 11 to y when it's value is truthy

6. Numeric separator

The numeric separator proposal helps you to write more readable code by allowing you to use underscore (_) as a separator when you define a numeric value.
The following code shows the comparison between a normal number and a separated number for one million:


const oneMillion = 1000000;
const separatedOneMillion = 1_000_000;
console.log(separatedOneMillion); //1000000

As you can see, separating the number with an underscore makes it much more readable. You can even use it on numbers with floating points as follows:

const randomFloat = 4.11_857_111_1211;
console.log(randomFloat) //4.118571111211

The separator won’t be included when you use the value for operations:

const randomFloat = 4.7_857_123;
console.log(randomFloat); // 4.7857123

Imported Note that you can only use the separator between two digits:

const num = 4_111; // 4111
// All the below throws an error
const a = 47_; //Uncaught SyntaxError: Numeric separators are not allowed at the end of numeric literals
const b = _11;//Uncaught ReferenceError: _47 is not defined
const c= 7._11;Uncaught SyntaxError: Invalid or unexpected token

DEV Community: Muhammad Bilal Bangash

Detecting user leaving page with react-router-dom v6.0.2

Introduction:

Post Focus useCallbackPrompt & useBlocker custom hooks

useCallbackPrompt Hook

useBlocker Hook

Now Question arise How I am using this in my project

Set in JavaScript

1. Set

Example

2. Instance properties

3. Instance methods

4. Iteration methods

5. Remove duplicate items from array using Set

Introduction React-Redux using Hooks (useSelector && useDispatch)

Introduction:

* Hooks for Redux.

* How to use useDispatch Hook.

* How to use useSelector Hook.

1. Hooks for Redux

Hooks:

2. useDispatch():

3.useSelector():

useStore():

JavaScript new features in ECMAScript 2021

1. replaceAll() method

2. Promise.any()

3. WeakRefs

4. Finalizers

5. Logical assignment operator

6. Numeric separator

Imported Note that you can only use the separator between two digits:

* How to use `useDispatch` Hook.

* How to use `useSelector` Hook.