DEV Community: Manish KC

Optimistic and Pessimistic UI Rendering

Manish KC — Mon, 20 Mar 2023 16:32:39 +0000

In our current technological phase, speed is no longer a feature but a requirement. Developers know Longer wait times lead to users experiencing negative feelings and the impression that the website or app is unreliable. Hence, the chances of losing a user in the app are highly likely. The introduction of AJAX has been a significant addition to the rich user experience. The user can interact with the page even though other tasks run in the background.

The ability to render content without having to refresh has become a UI standard that users have come to expect. However, users demand more fluidity from their apps and for their content to appear instantly. This is because processing requests and returning content to the user takes a specific period.

This scenario is where the optimistic and pessimistic approaches come to play. While they begin at the same place, how they treat the AJAX request differs.

For the example lets suppose we have a list of user displayed in the screen, and we want to update the screen as the user are deleted.

Pessimistic Approach

The Pessimistic approach updates the UI once the API call is completed and the data or state has been confirmed. This approach prioritizes consistency and reliability over instant feedback to the user.

The typical pessimistic flow for the above example is as follow:

A user click on the delete button
A request is sent to the server for deleting the user
The server sends back either a success response, or an error message in case of failure
According to the response send by the server the client side application either updates the content or displays the failure message

All while this is happening, the user is waiting to see changes in the UI. Even though this might take only a few seconds, it has a noticeable effect on the user experience. A pessimistic approach can result in a slower and less responsive user experience.

Example

deleteButton.addEventListener("click", function (event) {
  //Server call begins
  deleteUser(api_url)
  .then(response => response.json())
  .then(json => pessimisticUserUpdate(json))
  .catch(error => console.error(error))
  //Server call ends
})

// a helper function that updates the user list 
function pessimisticUserUpdate(json){
  updateUser();
}

In the above example, first, the delete button is clicked, then the request is sent to the server; once the server sends the response, the user list is updated and rendered onto client-side

Optimistic Approach

In the Optimistic approach, the UI is updated immediately with the new data or state before the API call is completed. This approach prioritizes instant feedback to the user over consistency and reliability.

The typical Optimistic flow for the above example is as follow:

A user click on the delete button
The state of the content changes update
A request is sent to the server for deleting the user
The server sends back error message in case of failure
According to the error send by the server the error is displayed on the client app and state is changed to the original state

Example

deleteButton.addEventListener("click", function (event) {
  optimisticallyUpdateUser();
  //Server call begins
  deleteUser(api_url)
  .then(response => response.json())
  .then(json => console.log("user deleted successfully"))
  .catch(error => {
    console.log("Something went wrong while deleting the 
    user");
    revertOptimisticChange();
  })
  //Server call ends
})

// a helper function that updates the user list 
function optimisticallyUpdateUser(json){
  updateUser();
}

In the above example, first, the user clicks on the delete button, then the state changes, and the updated user list is rendered on the client side. After that, API is called; if the API request fails, the user state is updated back to its original form.

Conclusion

The optimistic approach is generally preferred for cases where speed and responsiveness are essential and where the risk of displaying inconsistent data is low. However, in cases where data consistency is critical (such as financial transactions or medical records), the pessimistic approach may be more appropriate.

Arrays in JavaScript: A Cheat sheet for a developer

Manish KC — Mon, 27 Feb 2023 11:18:53 +0000

In JavaScript, an array is a collection of values or elements, stored in a single variable. Arrays can hold values of any data type, including numbers, strings, booleans, and objects.

const fruits = ["mango","orange","peach","apple"];

Here, fruits is an array which is storing 4 values.

Create an Array

Initializing the array explicitly

This involves manually specifying the elements of the array as a comma-separated list enclosed in square brackets.

const cars = "mango","orange","peach","apple"]

Using the Array() constructor

This involves creating an Array with built in Array() constructor

const fruits = Array.of("mango","orange","peach","apple");
console.log(fruits); // ["mango","orange","peach","apple"];

Array.of()

This involves using the Array.of() method. This method takes in a number of argument and create a new array instance.

const fruits = Array.of("mango","orange","peach","apple");
console.log(fruits); // ["mango","orange","peach","apple"]

Array Length

We can find the length of an Array by accessing the length property

const fruits = ["mango","orange","peach","apple"];
console.log(fruits.length); // 4

Accessing the value of an Array

We can access the value of Array by referring to the index number of the item in a square bracket

const fruits = ["mango","orange","peach","apple"];

//first element
console.log(fruits[0]); // mango

//second element
console.log(fruits[1]); //orange

Adding an element to an Array

Array.push()

The push() method adds one or more elements to the end of an array

const fruits = ["mango","orange","peach","apple"];
fruits.push("banana","grape");
console.log(fruits); 
//["mango","orange","peach","apple","banana","grape"];

Array.unshift()

The unshift() method adds one or more elements to the start of an array

const fruits = ["mango","orange","peach","apple"];
fruits.unshift("banana","grape");
console.log(fruits); 
//["banana","grape","mango","orange","peach","apple"];

Removing an element from an Array

Array.pop()

The pop() method removes the last element from an array

const fruits = ["mango","orange","peach","apple"];
fruits.pop();
console.log(fruits); 
//["mango","orange","peach"];

Array.unshift()

The shift() method removes the first element of an array

const fruits = ["mango","orange","peach","apple"];
fruits.shift();
console.log(fruits); 
//["orange","peach","apple"];

Array Methods

There are various method provided by an array.Lets understand and learn how to use them.

Array.concat()

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const fruits1 = ["mango","orange"];
const fruits2 = ["peach","apple"];
const fruits3 = fruits1.concat(fruits2);
console.log(fruits3); 
//["mango","orange","peach","apple"];

Array.map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

const fruits = ["mango","orange","peach","apple"];
fruits.map((fruit) => fruit);
//["mango","orange","peach","apple"]

const numbers = [5,10,15,20];
numbers.map((number) => number * 2);
//[10,20,30,40]

Array.filter()

The filter() method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument method.

const fruits = ["mango","orange","mango","apple"];
fruits.filter((fruit) => fruit.length > 5);
//["orange"]

Array.find()

The find() method is used to get the value of the first element in the array that satisfies the provided condition if the condition is not satisfied it returns undefined.

const fruits = ["mango","orange","peach","apple"];
fruits.find((fruit) => fruit); //["mango"]

fruits.find((fruit) => "strawberry"); // undefined

const numbers = [5,10,15,20];
numbers.find((number) => number > 15); // 20

Array.findIndex()

The findIndex() method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

const fruits = ["mango","orange","peach","apple"];
fruits.findIndex((fruit) => fruit.length === 6); 
// 1
//Since the value returned is orange and the 
//position of orange is 1 in the fruits array

Array.findLast()

The findLast() method iterates the array in reverse order and returns the value of the first element that satisfies the provided testing function. If no elements satisfy the testing function, undefined is returned.

const fruits = ["mango","orange","peach","apple"];
fruits.findLast((fruit) => fruit.length === 5); 
// apple

const fruits = ["mango","orange","peach","apple"];
fruits.findLast((fruit) => fruit.length === 7); 
// undefined

Array.findLastIndex()

The findLastIndex() method iterates the array in reverse order and returns the index of the first element that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

const fruits = ["mango","orange","peach","apple"];
fruits.findLastIndex((fruit) => fruit.length === 5); 
// 3
//Since the value returned is apple and the 
//position of orange is 1 in the fruits array

const fruits = ["mango","orange","peach","apple"];
fruits.findLastIndex((fruit) => fruit.length === 7); 
// -1

Array.flat()

The flat() method is used to flatten a nested array into a single, one-dimensional array. This method returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const fruits = ["mango","orange",["peach","apple"]];
fruits.flat(); 
// ["mango","orange","peach","apple"]

const fruits = ["mango","orange",[[[["peach","apple"]]]]];
fruits.flat(2); 
//["mango","orange",[["peach","apple"]]];

const fruits = ["mango","orange",[[[["peach","apple"]]]]];
fruits.flat(4); 
//["mango","orange","peach","apple"];

Array.flatMap()

The flatMap() method is used to both maps and flattens an array. It takes a callback function as an argument, which is applied to each element of the array, and returns a new array with the resulting values flattened into a single, one-dimensional array.

const fruits = ["mango","orange",["peach","apple"]];
fruits.flatMap((fruit) => fruit);
//["mango","orange","peach","apple"]

Note: The difference between flat() and flatMap() is that
flat() takes a depth parameter that specifies the depth to which the nested arrays should be flattened.
Whereas flatMap() flattens the result into a single, one-dimensional array.

Array.includes()

The includes() method allows you to check if an array includes a specific value. It returns a boolean value true if the array contains the specified value, and false otherwise.

const fruits = ["mango","orange","peach","apple"];
fruits.includes("orange");
//true

const fruits = ["mango","orange","peach","apple"];
fruits.includes("banana");
//false

Array.every()

The every() method checks whether all the elements in an array pass a particular test implemented by a provided function. The method returns a boolean value true if all the elements pass the test, and false otherwise.

const fruits = ["mango","orange","peach","apple"];
fruits.every((fruit) => fruit.length > 4);
//true

const fruits = ["mango","orange","peach","apple"];
fruits.every((fruit) => fruit.length > 8);
//false

Array.some()

The some() method checks whether at least one element in an array passes a particular test implemented by a provided function. The method returns a boolean value true if at least one element passes the test, and false otherwise.

const fruits = ["mango","orange","peach","apple"];
fruits.some((fruit) => fruit.length >= 6);
//true

const fruits = ["mango","orange","peach","apple"];
fruits.some((fruit) => fruit.length >= 7);
//false

Array.splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

//Removing Elements
const fruits = ["mango","orange","peach","apple"];
fruits.splice(1, 1); // Removes the element at index 1 (banana)
// ["mango", "peach", "apple"]

// Adding elements
const fruits = ["mango","orange","peach","apple"];
fruits.splice(1, 0, "blueberry", "kiwi"); // Adds "blueberry", "kiwi" at index 1
// ["mango","blueberry","kiwi","orange","peach","apple"];

// Replacing elements
const fruits = ["mango","orange","peach","apple"];
fruits.splice(2, 1, 'kiwi'); // Replaces the element at index 2 (peach) with 'kiwi'
// ["mango", "orange", "kiwi", "apple]

Array.slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

const fruits = ["mango","orange","peach","apple"];
fruits.slice(2);
// ["peach","apple"]

const fruits = ["mango","orange","peach","apple"];
fruits.slice(1,3);
// ["orange","peach"]

Array.fill()

The fill() method fills the elements in an array with a static value.

const fruits = ["mango","orange","peach","apple"];
fruits.fill("kiwi");
// ["kiwi","kiwi","kiwi","kiwi"]

Array.reverse()

The reverse() method reverses an array in place and returns the reference to the same array, the first array element now becoming the last, and the last array element becoming the first. In other words, elements order in the array will be turned towards the direction opposite to that previously stated.

const fruits = ["mango","orange","peach","apple"];
fruits.reverse();
// ["apple","peach","orange","mango"]

Array.sort()

The sort() method sorts the elements of an array in place and returns the array. The default sort order is according to string Unicode code points.

const fruits = ["mango","orange","peach","apple"];
fruits.sort();
// ["apple","mango","orange","peach"]

Array.toString()

The toString() method returns a string representation of the array by converting each element to a string and joining them together with commas

const fruits = ["mango","orange","peach","apple"];
fruits.toString();
// "apple, mango, orange, peach"

Debounce Input in React

Manish KC — Wed, 22 Feb 2023 09:10:50 +0000

Debouncing an input is a technique used to improve web application performance and user experience. When a user types into an input field, the application may perform several operations, such as filtering a list, fetching data from an API, or performing other processes based on the user's input. These operations can be computationally expensive and slow down the application or even cause it to crash if performed too frequently.

Debouncing an input in React involves setting a delay between when a user types into an input and when the input's value is updated.

To create a debounce input in react you can use the following steps.

Solution 1

First we use the useState hook provided by React to store the input variable in a state.

const [inputValue, setInputValue] = React.useState("")

Then we create a function called handleInputChange which will handle the input changes and then update the input value with setInputValue

const handleInputChange = (event) => {
   setInputValue(event.target.value);
}

Moving forward we again use the useState hook provided by React to store the debounced input value

const [debouncedInputValue, setDebouncedInputValue] = React.useState("")

Now we use the useEffect hook and perform a delay before we update the debouncedInputValue.

React.useEffect(() => {
  const delayInputTimeoutId = setTimeout(() => {
    setDebouncedInputValue(inputValue);
  }, 500);
  return () => clearTimeout(delayInputTimeoutId);
}, [inputValue, 500]);

500 milliseconds is used as the delay time to update the deboucedInputValue. We can add the time according to our requirements.

The useEffect will run every time the inputValue changes, after which the delay of 500 milliseconds will happen, and then the deboucneInputValue get updated with the inputValue

Now we can use the debounceInputValue while calling the API or wherever needed. Here the full solution

import React from "react";

const DebounceInput = () => {
  const [inputValue, setInputValue] = React.useState("");
  const [debouncedInputValue, setDebouncedInputValue] = React.useState("");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  React.useEffect(() => {
    const timeoutId = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, 500);
    return () => clearTimeout(timeoutId);
  }, [inputValue, 500]);

  return <input type="text" value={inputValue} onChange={handleInputChange} />;
};

Solution 2

For this solution we will be using the debounce function from use-debounce

Firstly we will need to install lodash in our application by running the following command

npm install use-debounce

Then we import the debounce function from use-debounce in out React component

import { useDebounce } from "use-debounce";

After the import is done state is declared for storing the input value

const [inputValue, setInputValue] = React.useState("");

Then we create a function called handleInputChange which will handle the input changes and then update the input value with setInputValue

const handleInputChange = (event) => {
   setInputValue(event.target.value);
}

Then we will use the useDebounce hook to debounce the input value. The first argument of useDebounce takes the input value, and the second argument takes the time for the delay. Then the hook will return debounced value which is debouncedValue.

const [debouncedValue] = useDebounce(inputValue, 500);

Now we can use the debouncedValue wherever necessary.Here is the full solution

import React from "react";
import { useDebounce } from "use-debounce";
const DebounceInput = () => {
  const [inputValue, setInputValue] = React.useState("");
  const [debouncedValue] = useDebounce(inputValue, 500);

  const handleInputChange = (event) => {
    const value = event.target.value;
    setInputValue(value);
  };

  return <input type="text" value={inputValue} onChange={handleInputChange} />;
};