DEV Community: Rasaf Ibrahim

A Guide to React Custom Hooks

Rasaf Ibrahim — Sat, 18 Nov 2023 17:57:58 +0000

Custom Hooks in React are a powerful feature that allows us to extract component logic into reusable functions. These Hooks are JavaScript functions that can use other Hooks provided by React. They enable us to organize logic into separate, reusable modules.

📌 Table of Contents

Prerequisites
Our First Custom Hook
Tips for Building Custom Hooks
Sharing Logic with Custom Hooks
- Building a Data Fetching Hook
- Building a Form Handling Hook
Wrapping Up

Prerequisites

Before diving into custom Hooks, it's important to have a basic understanding of React and its core concepts, such as components, state, and built-in Hooks like useState and useEffect.

Our First Custom Hook

Let's start by creating a simple custom Hook. We’ll build a useCounter hook that encapsulates the logic for incrementing a counter.



import { useState } from 'react'

// Custom hook for counter functionality
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue) // State to keep track of count

  // Function to increment count
  const increment = () => setCount(prevState => prevState + 1)

  // Returns count and increment function
  return [count, increment]
}

To use our useCounter Hook, we can include it in a functional component:



import React from 'react';
import useCounter from './useCounter'

// Component using the useCounter Hook
function CounterComponent() {
  const [count, increment] = useCounter() // Utilizing useCounter

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

Tips for Building Custom Hooks

Start by identifying repetitive logic across your components.
Extract this logic into a function named with use prefix. Custom hooks should start with use, like useFormInput or useFetch.
Use React's built-in Hooks within your custom Hook as needed.
Return anything that will be useful for the component using this Hook.
Each custom hook should be responsible for a single piece of functionality.

Sharing Logic with Custom Hooks

Custom Hooks are excellent for sharing logic across multiple components. In this section, we will create two common custom hooks that React developers often create to share logic across multiple components.

Building a Data Fetching Hook

If we need to fetch data from an API in several components, we can create a useFetch Hook. Here's a simple implementation of useFetch:



import { useState, useEffect } from 'react'

// Custom hook for fetching data
function useFetch(url) {

  const [data, setData] = useState(null) // State for data
  const [loading, setLoading] = useState(true) // State for loading
  const [error, setError] = useState(null) // State for error handling

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true)
      setError(null)

      try {
        const response = await fetch(url)

        if (!response.ok) {
          throw new Error(`An error occurred: ${response.statusText}`)
        }

        const jsonData = await response.json()
        setData(jsonData)
      } catch (error) {
        setError(error.message)
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [url]) // Dependency array with url

  return { data, loading, error }
}

We can now use this Hook in our components to fetch data easily:



import React from 'react'
import useFetch from './useFetch'

// Component using the useFetch Hook
function DataDisplayComponent({ url }) {
  const { data, loading, error } = useFetch(url) // Utilizing useFetch

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error: {error}</p>

  return <div>{JSON.stringify(data, null, 2)}</div>
}

Building a Form Handling Hook

Handling forms in React can be verbose. A custom hook, useForm, can simplify this. Here’s how we might structure it:



import { useState } from 'react'

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue)

  const handleChange = (e) => {
    setValue(e.target.value)
  }

  // Returns an object with value and onChange properties
  return {
    value,
    onChange: handleChange
  }
}

We can now use this Hook in our form related components:



import React from 'react'
import useFormInput from './useFormInput'

function FormComponent() {

  const name = useFormInput('')
  const age = useFormInput('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(`Name: ${name.value}, Age: ${age.value}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name:
          {/* The spread operator here is equivalent to value={name.value} onChange={name.onChange} */}
          <input type="text" {...name} />
        </label>
      </div>
      <div>
        <label>
          Age:
          <input type="number" {...age} />
        </label>
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

💡 The implementation of useFormInput provided here is a basic version, designed for straightforward form input management. If additional functionalities are required, such as form validation or handling more complex form patterns, the Hook should be further customized and extended.

Wrapping Up

Custom Hooks in React offer a powerful and elegant way to reuse and share logic across components. By understanding and leveraging this feature, we can significantly simplify our components and improve our code's maintainability and readability.

Demo | Documentation

Set and Map in JavaScript: A Close Look

Rasaf Ibrahim — Wed, 08 Nov 2023 13:35:34 +0000

In the world of JavaScript, there are several ways to handle and organize data, with arrays and objects being the most popular. However, ES6 (the sixth edition of the ECMAScript standard) introduced two useful data structures: Set and Map. These structures offer unique advantages that can be indispensable in specific scenarios.

📌 Table of Contents

What is a Set?
- Creating a Set
- Adding Values to a Set
- Checking the Size of a Set
- Checking if a Value Exists in a Set
- Removing Values
- Iterating Over a Set
What is a Map?
- Creating a Map
- Setting Key-Value Pairs
- Getting Values
- Checking the Size of a Map
- Checking if a key Exists in a Map
- Removing Key-Value Pairs
- Iterating Over a Map
Set vs. Array: When to Use Which?
Map vs. Object: When to Use Which?
Wrapping Up

What is a Set?

A Set in JavaScript is a collection of values where each value must be unique. This means no duplicate values are allowed. The values can be of any type, and the order of values in the set does not matter.

Creating a Set

Creating a set is simple. Use the new keyword followed by Set().

let mySet = new Set()

// console.log(mySet) 
// Output: Set(0) {}

Adding Values to a Set

We can add values to a set using the add method:

mySet.add(1)
mySet.add(5)
mySet.add('JavaScript')

// console.log(mySet) 
// Output: Set(3) { 1, 5, 'JavaScript' }

Checking the Size of a Set

To check how many elements are in a Set, use the size property:

console.log(mySet.size) // Output: 3

Checking if a Value Exists in a Set

To check if a value is in a Set, use the has method:

console.log(mySet.has(1)) // Output: true
console.log(mySet.has(2)) // Output: false

Removing Values

Remove a specific element with the delete method:

mySet.delete(5)

Or clear the entire Set with the clear method:

mySet.clear()

Iterating Over a Set

We can iterate over the values of a Set using for...of loop:

for (let item of mySet) {
  console.log(item)
}

Or using forEach method:

mySet.forEach((value) => {
  console.log(value)
})

What is a Map?

A Map is a collection of key-value pairs, similar to an object, but with a few key differences. In a Map, keys can be of any data type, not just strings or Symbols. Also, maps maintain the order of insertion, which isn't guaranteed in plain objects.

Creating a Map

To create a Map, we can use the new keyword, optionally passing an array of key-value pairs:

let myMap = new Map()

// console.log(myMap) 
// Output: Map(0) {}

Setting Key-Value Pairs

Use the set method to add key-value pairs to the Map:

myMap.set('name', 'JavaScript')
myMap.set(1, 'ES6')
myMap.set(true, 'boolean')

// console.log(myMap) 
// Output: Map(3) { 'name' => 'JavaScript', 1 => 'ES6', true => 'boolean' }

Getting Values

Retrieve a value by key using the get method:

console.log(myMap.get('name')) // Output: 'JavaScript'

Checking the Size of a Map

Similar to Set, Map have a size property:

console.log(myMap.size) // Output: 3

Checking if a key Exists in a Map

Check for the existence of a key using has:

console.log(myMap.has('name')) // Output: true

Removing Key-Value Pairs

Remove a specific key-value pair with the delete method:

myMap.delete('name')

Or clear the entire Map with the clear method:

myMap.clear()

Iterating Over a Map

Iterate through a Map's keys, values, or entries with the keys, values, and entries methods, respectively:

for (let key of myMap.keys()) {
  console.log(key)
}

for (let value of myMap.values()) {
  console.log(value)
}

for (let [key, value] of myMap.entries()) {
  console.log(key, value)
}

We can also use the forEach method:

myMap.forEach((value, key) => {
  console.log(key, value);
})

Set vs. Array: When to Use Which?

Understanding when to use a Set instead of an Array can be crucial for both the performance and clarity of our code. While both can store collections of values, they serve different purposes.

Uniqueness

If our primary concern is to prevent duplicate values, a Set automatically ensures that all elements are unique. With an Array, we would have to manually check for duplicates before adding a new element.

Performance

When it comes to performance, especially for large collections of data, Set is more performant for checking the existence of an element within it. This is because Set is implemented with efficient data structures under the hood that allow for faster lookup.

Map vs. Object: When to Use Which?

While Map and Object in JavaScript can appear to serve similar functions as collections of key-value pairs, there are significant differences that could affect which one we should use.

Key Flexibility

Map accepts keys of any data type, whereas an Object only accepts Strings and Symbols as keys.

Iteration Order

Map maintains the order of elements as they were inserted, while the order of keys in a plain object is not guaranteed.

Size Determination

A Map directly provides the size property, making it easy to determine the number of key-value pairs. With an Object, we would typically use Object.keys(obj).length, which is less direct.

Performance

For frequent additions and removals of key-value pairs, Map is more performant than using an Object.

Wrapping Up

Both Set and Map are robust constructs in JavaScript that can greatly enhance the way we work with collections of data. With the knowledge of how to utilize these structures, we'll be able to write cleaner, more efficient code.

Demo | Documentation

This post is deleted

Rasaf Ibrahim — Wed, 08 Nov 2023 13:32:06 +0000

Array-like Objects in JavaScript: A Deep Dive

Rasaf Ibrahim — Tue, 31 Oct 2023 20:14:44 +0000

In the vast and diverse world of JavaScript, you will often encounter objects that look and feel like arrays but aren't quite arrays. These are commonly referred to as "array-like objects". In this article, we will explore what array-like objects are, how to identify them, and how to work with them effectively.

What are Array-like Objects?

Array-like objects are objects that have indexed access and a length property, much like arrays. However, they do not inherit from Array.prototype and therefore do not have array-specific methods such as push(), pop(), forEach(), etc.

Example

let arrayLike = {
  0: 'apple',
  1: 'banana',
  2: 'cherry',
  length: 3
}

console.log(arrayLike[0]) // Outputs: apple
console.log(arrayLike.length) // Outputs: 3


&nbsp;

### Identifying Array-like Objects

&nbsp;

To identify whether an object is truly an array or an array-like object, you can use the `Array.isArray()` method.

&nbsp;

>Example
```javascript
let realArray = [1, 2, 3]
let arrayLike = { 0: 'a', 1: 'b', length: 2 }

console.log(Array.isArray(realArray)) // Outputs: true
console.log(Array.isArray(arrayLike)) // Outputs: false

Common Array-like Objects

Several built-in JavaScript objects and methods return array-like objects. Some of the most common ones include:

arguments in functions
DOM methods like document.querySelectorAll()
String characters

Example with arguments

function showArguments() {
  console.log(arguments);
}

showArguments(1, 2, 3); // Logs an array-like object: { 0: 1, 1: 2, 2: 3 }


&nbsp;

> Example with `document.querySelectorAll`
```javascript
let divs = document.querySelectorAll('div')

console.log(divs);  // This returns an array-like NodeList

Converting Array-like Objects to Real Arrays

Since array-like objects lack array methods, it's often useful to convert them to real arrays. There are several methods to do this:

Using the Array.from() method: This is the most straightforward method to convert an array-like object into an actual array.

Example

let arrayLike = { 0: 'a', 1: 'b', length: 2 }
let realArray = Array.from(arrayLike)
console.log(realArray) // Outputs: ['a', 'b']

Using the spread operator: This ES6 feature allows for an elegant way to convert array-like objects.

Example

let arrayLike = { 0: 'a', 1: 'b', length: 2 }
let realArray = [...arrayLike]
console.log(realArray) // Outputs: ['a', 'b']

Working with Array-like Objects

Even if you don't convert an array-like object to a real array, you can still perform operations on its elements:

Using a for loop: This is a classic way to iterate over the elements of an array-like object.
Example:
```
let arrayLike = { 0: 'apple', 1: 'banana', 2: 'cherry', length: 3 }
```
for (let i = 0; i < arrayLike.length; i++) {
console.log(arrayLike[i])
}

Using Array.prototype methods: Even if array-like objects don't have native array methods, you can apply some array methods to them using Function.prototype.call or Function.prototype.apply.
Example:
```
let arrayLike = { 0: 'apple', 1: 'banana', 2: 'cherry', length: 3 }
```
Array.prototype.forEach.call(arrayLike, function(item) {
console.log(item)
})
```
>Note: The `call` method, which is part of `Function.prototype`, is used here to instruct `forEach` to work with `arrayLike` as if it were an array.
```

Final Thoughts

While JavaScript's array-like objects might seem peculiar at first, they make more sense once you understand their nature and structure. By recognizing these objects and knowing how to work with them, you can harness the full power of JavaScript in diverse scenarios.

Demo | Documentation

React Performance Booster - Introduction to the useMemo hook

Rasaf Ibrahim — Thu, 26 Oct 2023 20:02:55 +0000

Hooks have revolutionized the way developers build React applications, offering a more intuitive and functional approach to state and side effects. Among these hooks, useMemo stands out for optimizing performance by memorizing computed values. Let’s delve into this powerful hook, step by step.

📌 Table of Contents

What is the useMemo Hook?
Why Do We Need useMemo?
Syntax of useMemo
Basic Example of useMemo
Common Mistakes with useMemo
When to Use useMemo?
useMemo vs useCallback
Wrapping Up

What is the useMemo Hook?

useMemo is a hook introduced in React 16.8 that allows you to memorize expensive calculations, ensuring they don't get re-executed unless their dependencies change. This can help in optimizing performance, especially in heavy computational scenarios.

Why Do We Need useMemo?

Imagine a situation where a function re-renders frequently or performs hefty calculations every time a component updates. This can degrade the performance of the application. By using useMemo, you can ensure that the result of an expensive computation is stored and only recalculated if necessary.

Syntax of useMemo

The useMemo hook has a simple syntax:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Here, computeExpensiveValue is a hypothetical function. The function provided to useMemo will only recompute when a or b change.

Breaking Down the Syntax

Callback function: The first argument to useMemo is a function that computes and returns a value.
Dependency array: The second argument is an array of dependencies. The memorized value will only recompute when any value in this array changes.

Basic Example of useMemo

Imagine we have a list of books, and we want to filter them based on a user's search query.

Consider this basic example:

function App() {
    const [query, setQuery] = useState('');
    const [books, setBooks] = useState(['Harry Potter', 'Lord of the Rings', 'Hobbit', 'Percy Jackson']);

    const filteredBooks = books.filter(book => book.toLowerCase().includes(query.toLowerCase()));

    return (
        <div>
            <input 
                type="text" 
                value={query} 
                placeholder="Search for a book..."
                onChange={e => setQuery(e.target.value)} 
            />
            <ul>
                {filteredBooks.map(book => (
                    <li key={book}>{book}</li>
                ))}
            </ul>
        </div>
    );
}

In this example, every time the component re-renders, we're filtering the entire books list, even if the books or the query haven't changed.

By using useMemo, we can optimize the filtering:

function App() {
    const [query, setQuery] = useState('');
    const [books, setBooks] = useState(['Harry Potter', 'Lord of the Rings', 'Hobbit', 'Percy Jackson']);

    const filteredBooks = useMemo(() => 
        books.filter(book => book.toLowerCase().includes(query.toLowerCase())),
        [books, query]
    );

    return (
        <div>
            <input 
                type="text" 
                value={query} 
                placeholder="Search for a book..."
                onChange={e => setQuery(e.target.value)} 
            />
            <ul>
                {filteredBooks.map(book => (
                    <li key={book}>{book}</li>
                ))}
            </ul>
        </div>
    );
}

Now, the books are only filtered again if the books array or the query changes. This ensures that we're not doing unnecessary computations when other unrelated parts of the component update.

Demo | Documentation

Common Mistakes with useMemo

Overusing it: Not every value or function in a component needs to be memorized. Use useMemo only when necessary, as it can add unnecessary complexity and overhead.
Forgetting dependencies: Always ensure that every value used inside the useMemo callback is listed in the dependency array. Omitting dependencies can lead to stale values and hard-to-debug issues.

When to Use useMemo?

When you deal with heavy computations.
When the same computation is repeated multiple times and returns the same result for the same inputs.
When rendering large lists or data grids and you want to avoid unnecessary re-renders.

useMemo vs useCallback

Both useMemo and useCallback serve to optimize performance, but they are used in slightly different scenarios:

useMemo returns a memorized value.
useCallback returns a memorized callback.

If you're looking to optimize a function (not its result) to avoid re-renders in child components or re-invocations, then useCallback is your go-to.

Wrapping Up

The useMemo hook is a powerful tool for optimizing React applications by memorizing expensive computations. By understanding its purpose, syntax, and best practices, developers can build efficient and responsive applications. Remember, while useMemo is beneficial, it should be used judiciously, only when necessary.

That's it. 😃 Thanks for reading. 🎉

Ditching useState and useReducer: Why useImmer is the better option

Rasaf Ibrahim — Sat, 25 Feb 2023 16:41:29 +0000

In React, useState and useReducer are commonly used for managing state. While useImmer is a popular alternative to useState, in this article, we will explore how it can also serve as a simpler and more effective alternative of useReducer.

In Case You're Not Familiar with useImmer
Why should we use useImmer instead of useReducer
When should we use useImmer?

In Case You're Not Familiar with useImmer

useImmer is a custom React hook. It's similar to useState but offers some distinct advantages, especially when it comes to managing complex state. With useImmer, you can update the state as if it were directly mutable, similar to regular JavaScript. It is possible because, behind the scene useImmer uses the Immer library to create a new immutable copy of the state.

To use useImmer, first, you need to install it by running the following command in your terminal:

npm install immer use-immer

A simple example of useImmer:

/* importing useImmer */
import { useImmer } from 'use-immer';

/* functional component */
function Count() {

  /* Declaring a new state variable using the useImmer hook.
    Here, we are initializing our state with a single
    property called "count" with an initial value of 0 */

  const [state, updateState] = useImmer({ count: 0 });


  /* Defining a function that will modify our state */
  const increment = () => {
    /* calling the updateState function and passing as
       it a draft */
    updateState(draft => {
      /* Here we are directly modifying the draft as 
        if it were mutable */
      draft.count += 1;
    })
  }


  /* Defining another function that will modify our state */
  const decrement = () => {
    /* Calling the updateState function and pass it a draft */
    updateState(draft => {
      /*Here we are directly modifying the draft as 
        if it were mutable */
      draft.count -= 1;
    })
  }


  /* Rendering the UI using the state */
  return (
    <div>
      <h3>Count: {state.count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

⬆️ Back to the TOC

Why should we use useImmer instead of useReducer

We will explore an example of useImmer that follows the useReducer pattern. We will create state and actions and use them in a similar way as useReducer, but with useImmer's increased readability, flexibility, and mutability. Through this example, we will see why useImmer should be considered more than the useReducer.

Import useImmer and Create the Functional Component

// import useImmer
import { useImmer } from 'use-immer';

// functional component
function Cart() {

  // ... 

}

Define the Initial State

When using useReducer, it's common practice to define the initial state before proceeding. Similarly, we will use this approach with the useImmer hook. To do this, we'll create a state that is somewhat complex and resembles the state you would typically define with useReducer.

// initial state
const initialState = {
    items: [],
    shippingAddress: {
        street: '',
        city: ''
    }
}

Create the State

We have defined our initial state. Now, we can create our state using the useImmer hook.

// Creating the state
const [cart, updateCart] = useImmer(initialState)

The useImmer hook returns an array containing two values: the current state (cart in this example), and a function that we can use to update the state (updateCart in this example).

Create Actions

When using the useReducer hook, it's mandatory to define actions in order to update the state. Similarly, we will create actions for useImmer to resemble the same pattern and achieve predictable state updates.

const actions = {

    // Add an item to the cart
    addItemToCart: (payload) => {

        const { item } = payload

        updateCart(draft => {
            draft.items.push(item)
        });
    },

    // Remove an item from the cart
    removeItemFromCart: (payload) => {

        const { itemIndex } = payload

        updateCart(draft => {
            draft.items.splice(itemIndex, 1)
        })
    },

    // Update the shipping address of the cart
    updateShippingAddress: (payload) => {

        const { shippingAddress } = payload

        updateCart(draft => {
            draft.shippingAddress = shippingAddress
        })
    }
}

Defining actions using the above method provides two advantages over useReducer:

⚡️ Mutability: With useImmer, we have the power of mutable updates which allows for less code and more JavaScript-like code. This is in contrast to useReducer which requires a more functional programming approach and immutable updates. By using mutable updates in useImmer, you can achieve the same result with fewer lines of code, making it easier to write and maintain.

⚡️ Readability: Compared to useReducer, where the actions are typically defined as a switch case in a reducer function, the useImmer approach can be more readable as each action is a separate function with a clear and concise name.

Render the UI with JSX

Finally, we can use the cart state and the actions object in the JSX to render the UI.

<div>

    {/* Displaying the changes of the 'cart' state */}
    <p>Cart State: {JSON.stringify(cart)}</p>

    {/* Display a list of items in the cart */}
    <ul>
        {cart.items.map((item, index) => (
            <li key={index}>
                {item.name} - ${item.price}

                {/* Call the removeItemFromCart action when the remove button is clicked */}
                <button onClick={() => actions.removeItemFromCart({ itemIndex: index })}>Remove</button>
            </li>
        ))}
    </ul>

    {/* Call the addItemToCart action when the add item button is clicked */}
    <button onClick={() => actions.addItemToCart({ item: { name: 'Product', price: 9.99 } })}>
        Add Item
    </button>


    {/* Allow the user to update the shipping address */}
    <div>

        <h4>Shipping Address:</h4>

        <input type="text" placeholder="Street"
            value={cart.shippingAddress.street}
            onChange={(e) => actions.updateShippingAddress({ shippingAddress: { ...cart.shippingAddress, street: e.target.value } })}
        />

        <input type="text" placeholder="City"
            value={cart.shippingAddress.city}
            onChange={(e) => actions.updateShippingAddress({ shippingAddress: { ...cart.shippingAddress, city: e.target.value } })}
        />

    </div>


</div>

Advantages of Using useImmer over useReducer

We've already explored two advantages(Mutability & Readability) of using useImmer over useReducer in the Create Actions section. However, there's one more significant advantage worth discussing, which we'll cover in this section.

⚡️ Flexibility: With useImmer, it's possible to update the state object outside of the defined actions. This is not possible in useReducer, and can be particularly helpful in certain situations where you need more flexibility in updating the state.

Here's an example of how to clear the cart using useImmer without defining a new action:

<button onClick={() => updateCart(initialState)}>Clear Cart</button>

This button component will reset the cart state back to its initial state and clear all items in the cart. With useImmer, we can update the state object directly in this ad-hoc manner without the need for an action to be defined. This is not possible with useReducer, where all state updates must be dispatched through the defined actions.

Full Code

// import useImmer
import { useImmer } from 'use-immer';


// functional component
export default function Cart() {

    // Define the initial state of the cart
    const initialState = {
        items: [],
        shippingAddress: {
            street: '',
            city: ''
        }
    };

    // Call the useImmer hook to create a cart state 
    const [cart, updateCart] = useImmer(initialState);

    // Define a set of actions that can be used to update the cart state
    const actions = {

        // Add an item to the cart
        addItemToCart: (payload) => {

            const { item } = payload

            updateCart(draft => {
                draft.items.push(item)
            });
        },

        // Remove an item from the cart
        removeItemFromCart: (payload) => {

            const { itemIndex } = payload

            updateCart(draft => {
                draft.items.splice(itemIndex, 1)
            })
        },

        // Update the shipping address of the cart
        updateShippingAddress: (payload) => {

            const { shippingAddress } = payload

            updateCart(draft => {
                draft.shippingAddress = shippingAddress
            })
        }
    }


    // Render the cart UI
    return (

        <div>

            {/* Displaying the changes of the 'cart' state */}
            <p>Cart State: {JSON.stringify(cart)}</p>

            {/* Display a list of items in the cart */}
            <ul>
                {cart.items.map((item, index) => (
                    <li key={index}>
                        {item.name} - ${item.price}

                        {/* Call the removeItemFromCart action when the remove button is clicked */}
                        <button onClick={() => actions.removeItemFromCart({ itemIndex: index })}>Remove</button>
                    </li>
                ))}
            </ul>

            {/* Call the addItemToCart action when the add item button is clicked */}
            <button onClick={() => actions.addItemToCart({ item: { name: 'Product', price: 9.99 } })}>
                Add Item
            </button>


            {/* Allow the user to update the shipping address */}
            <div>

                <h4>Shipping Address:</h4>

                <input type="text" placeholder="Street"
                    value={cart.shippingAddress.street}
                    onChange={(e) => actions.updateShippingAddress({ shippingAddress: { ...cart.shippingAddress, street: e.target.value } })}
                />

                <input type="text" placeholder="City"
                    value={cart.shippingAddress.city}
                    onChange={(e) => actions.updateShippingAddress({ shippingAddress: { ...cart.shippingAddress, city: e.target.value } })}
                />

            </div>

            {/* Call the updateCart function with the initial state to clear the cart */}
            <button onClick={() => updateCart(initialState)}>Clear Cart</button>

        </div>
    )
}

⬆️ Back to the TOC

When should we use useImmer?

🧨 Use useImmer for local state management and for creating reusable components

When managing local state or creating a reusable component that requires state management, useImmer is a suitable option.

🧨 We can use useImmer for global state management, but there are other better options

We can share the state created by useImmer with other components by using createContext and useContext. Therefore, we can use useImmer to create global state, but should we use it for global state management?

When it comes to global state management, libraries like redux toolkit or zustand are more suitable.

🧨 Even though other libraries may be better for global state management, useImmer is a better option for local state management and for creating reusable components

Libraries like redux and zustand are created for global state management. If we use them for creating reusable components:

The state will be polluted as multiple components can modify the same state, leading to unexpected behavior and bugs.

On the other hand, if we use useImmer for reusable components:

Each instance of the component will have its own independent state, separate from other instances of the same component. This ensures that the state of one instance does not affect the state of another instance.

Since the state is contained within the component, there is no need to worry about the state being modified elsewhere in the application.

🧨 Way to share the useImmer created state among other components

For global state

we can use createContext and useContext to share the state among other components.

Local State and Reusable Components:

Suppose, we are using local state in a component or creating a reusable component. The component is becoming large, and so we have divided it into multiple child components. Now, in the parent component, we will create the state with useImmer. Then, we will share the state with the child components through props.

⬆️ Back to the TOC

That's it. 😃 Thanks for reading. 🎉

Styled Components in Material UI (MUI) with Styled Utility

Rasaf Ibrahim — Mon, 01 Aug 2022 12:20:00 +0000

If you are already familiar with styled components, you might want to use that along with the MUI. To use styled-component with MUI, there is styled() utility. The official documentation of MUI doesn't have enough examples with the styled() utility. This article's purpose is to provide enough examples of styled() utility with both Javascript object syntax & CSS like syntax.

📑Table of Contents

Basic
MUI Theme in the styled() Utility
Media Queries
Child Component and Child Element
Pseudo Classes
Sibling Component
Props
sx Prop can be used as an Alternative to the styled Utility

Basic

Import



// You must import 'styled' utility form mui
import { styled } from '@mui/material/styles';

// Also, you must import the components which you are gonna use with the styled utility
import Box from '@mui/material/Box';

JavaScript Object Syntax

Let's create a component with styled() utility by using JavaScript object syntax:



const Basic = styled(Box)({

  backgroundColor: 'aliceblue',
  color: 'darkslategray',
  padding: '2rem',
  textAlign:'center'

})

Note:

Here, we are using the Box component but instead of the Box component, we can use any other MUI component. We just need to import that component.

Instead of a component we can also use an HTML tag. To use HTML tag, we have to put the HTML tag inside quote, styled('div').

Here, the variable name is Basic. Always make sure that the first letter of the variable is capital because it will work like a component and a component name has to start with a capital letter.

CSS Like Syntax

Instead of JavaScript object syntax, we can also have CSS-like syntax:



const Basic = styled(Box)`
  background-color: aliceblue;
  color: darkslategray;
  padding: 2rem;
  text-align: center;
`;

Note:

Don't forget the backticks

Semicolon after ending backtick is optional.

MUI Theme in the styled() Utility

Take a look at the default theme of MUI.

JavaScript Object Syntax



const UsingTheme = styled(Box)(
  ({ theme }) => ({
    backgroundColor: theme.palette.primary.light,
    color: theme.palette.grey[900],
    padding: theme.spacing(2),
    textAlign: 'center',
    ...theme.typography.h6,
  })
)

The following picture is showing the MUI default theme. In the picture, we can see that the h6 is an object. It has fontFamily, fontWeight, fontSize, lineHeight & letterSpacing properties. We want all of them. So, we are destructuring it (...theme.typography.h6,).

CSS Like Syntax



const UsingTheme = styled(Box)(
  ({ theme }) => `
  background-color: ${theme.palette.primary.light};
  color: ${theme.palette.grey[900]};
  padding: ${theme.spacing(2)};
  text-align: center;


  ${ /* here, we can't destructure like javascript object syntax. So, we need to manually access all the properties of 'h6'  */'' }

  font-size: ${theme.typography.h6.fontSize};
  font-weight: ${theme.typography.h6.fontWeight};
  font-family: ${theme.typography.h6.fontFamily};
  line-height: ${theme.typography.h6.lineHeight};
  letter-spacing: ${theme.typography.h6.letterSpacing};
 `,
)

Demo | Documentation

Media Queries

JavaScript Object Syntax

Let's see an example of using media queries with JavaScript Object Syntax:



const UsingMediaQuery = styled(Box)(
    ({ theme }) => ({

      backgroundColor: theme.palette.primary.light,
      color: theme.palette.grey[900],

      "@media (min-width:640px)": {

          backgroundColor: theme.palette.primary.dark,
          color: theme.palette.grey[100],
       },


       /* here, we are accessing breakpoints' value from the theme */

       [`@media screen and (min-width: ${theme.breakpoints.values.md}px)`]: {

         backgroundColor: theme.palette.secondary.light,
         color: theme.palette.grey[900],
      },

    })
  )

CSS Like Syntax




const UsingMediaQuery = styled(Box)(

    ({ theme }) => `

    background-color: ${theme.palette.primary.light};
    color: ${theme.palette.grey[900]};


    @media (min-width: 640px) {

        background-color: ${theme.palette.primary.dark};
        color: ${theme.palette.grey[100]};
    }


   ${ /* here, we are accessing breakpoints' value from the theme */'' }

    @media (min-width: ${theme.breakpoints.values.md}px) {

        background-color: ${theme.palette.secondary.light};
        color: ${theme.palette.grey[900]};
    }

   `,
  )

We can't have same media query more than one time in JavaScript Object Syntax

Suppose, there is class a box-section in the html and we are styling it by writing normal CSS:




@media (min-width: 640px) {

  .box-section {

      margin: 1rem;

  }

}


@media (min-width: 640px) {

  .box-section {

      padding: 1rem;

  }

}

In the above example, we can see that the both media query is actually same. So, it was enough to have one media query and all the properties inside it. But we have written the same media query twice. Writing same media query twice like the above example has no problem, the code will work perfectly.

But when we write the same media query multiple times while working with styled component's JavaScript Syntax, only the last media query's code will be executed:



const Box_Section = styled(Box)(
    ({ theme }) => ({

      "@media (min-width:640px)": {

            margin:'1rem'

       },

       "@media (min-width:640px)": {

            padding:'1rem'

       },


    )}

  )

In the above example, as the both media query is same, only the last media query's code will be executed. So, the Box_Section component will only have padding, not margin.

Reason of this problem:
As we are working with JavaScript object here, we must have unique property name. But in the above example, we are having "@media (min-width:640px)" property name twice. So, JavaScript is considering the last property name's value to be the updated version and only having that.

Note: This problem will not occur with CSS Like Syntax in styled components. We can have same media query more than one time just like normal CSS.

Child Component and Child Element

JSX

Suppose, we want the following JSX:



<ParentComponent>

      <div>Hi</div>

     <Box className='childComponent'> Hello </Box>

</ParentComponent>

So, we need to create the ParentComponent component and also need to style the child element div and child component Box.

JavaScript Object Syntax




const ParentComponent = styled(Box)(

  ({ theme }) => ({

    backgroundColor: theme.palette.primary.light,
    color: theme.palette.grey[900],
    padding: theme.spacing(2),
    textAlign: 'center',


    // Child element
    "> div": {
      backgroundColor: theme.palette.error.dark,
      color: theme.palette.grey[100]
    },


    // Child Component (We need to select the class or id which is used in the child component)
    "> .childComponent": {
      backgroundColor: theme.palette.success.dark,
      color: theme.palette.grey[100]
    },

  })
)

Note:

I haven't found a way to select an MUI component without the class or an id that is used in that child component. If you know any way other, please write it down in the comment section.

CSS Like Syntax



const ParentComponent = styled(Box)(
  ({ theme }) => `
  background-color: ${theme.palette.primary.light};
  color: ${theme.palette.grey[900]};
  padding: ${theme.spacing(2)};
  text-align: center;


  ${ /* Child element  */'' }

  > div  {
    background-color: ${theme.palette.error.dark};
    color: ${theme.palette.grey[100]};
  };


  ${ /* Child Component (We need to select the class or id which is used in the child component)  */'' }

   > .childComponent {
    background-color: ${theme.palette.success.dark};
    color: ${theme.palette.grey[100]};
  };


 `,
)

Pseudo Classes

JSX

Suppose, we want the following JSX:



<PseudoClasses>

      <div>Hi</div>

     <Box className='childComponent'> Hello </Box>

</PseudoClasses>

So, we need to create the PseudoClasses component and also need to style the child element div and child component Box with pseudo-classes.

JavaScript Object Syntax



const PseudoClasses = styled(Box)(

  ({ theme }) => ({

    backgroundColor: theme.palette.primary.light,
    color: theme.palette.grey[900],
    padding: theme.spacing(2),
    textAlign: 'center',

    ":hover": {
      backgroundColor: theme.palette.primary.dark,
      color: theme.palette.grey[100],
    },

    ":active": {
      backgroundColor: theme.palette.warning.dark,
      color: theme.palette.grey[100],
    },


    // Pseudo select child element
    ":hover > div": {
      backgroundColor: theme.palette.error.dark,
    },


    // Pseudo select child component (We need to select the class or id which is used in the child component) 
    ":hover > .childComponent": {
      backgroundColor: theme.palette.success.dark,
    },

  })
)

CSS Like Syntax



const PseudoClasses = styled(Box)(
  ({ theme }) => `
  background-color: ${theme.palette.primary.light};
  color: ${theme.palette.grey[900]};
  padding: ${theme.spacing(2)};
  text-align: center;


  :hover {
    background-color: ${theme.palette.primary.dark};
    color: ${theme.palette.grey[100]};
  };


  :active {
    background-color: ${theme.palette.warning.dark};
    color: ${theme.palette.grey[100]};
  };


  ${ /* Pseudo select child element  */'' }

  :hover > div  {
    background-color: ${theme.palette.error.dark};
  };


  ${ /* Pseudo select child component (We need to select the class or id which is used in the child component)   */'' }

  :hover > .childComponent {
    background-color: ${theme.palette.success.dark};
  };


 `,
)

Sibling Component

JSX

Suppose, we want the following JSX:



<>
  <MainComponent> Hello </MainComponent>
  <Box className='siblingComponent'> Hi </Box>
</>

So, we need to create the MainComponent and also need to style the sibling component Box.

JavaScript Object Syntax



const MainComponent = styled(Box)(

  ({ theme }) => ({

    backgroundColor: theme.palette.primary.light,
    color: theme.palette.grey[900],

    // Adjacent Sibling Component (We need to use class or id of the Sibling component)
    "+ .siblingComponent": {
      backgroundColor: theme.palette.success.dark,
      color: theme.palette.grey[100]
    },

  })
)

Note:

Instead of a sibling component, if there was a sibling HTML tag, we could have a style that too ("+ div").

The adjacent sibling selector (+) is used to select an element that is directly after another specific element.

CSS Like Syntax



const MainComponent= styled(Box)(

  ({ theme }) => `
  background-color: ${theme.palette.primary.light};
  color: ${theme.palette.grey[900]};


  ${ /* Adjacent Sibling Component (We need to use class or id of the Sibling component) */'' }

   + .siblingComponent {
    background-color: ${theme.palette.success.dark};
    color: ${theme.palette.grey[100]};
  };

 `,
)

Props

JSX

Suppose, we want to have a component (TestingProp) where we can pass two props: dark & border. The value of both props is boolean & the value will of these props controls the style of the component.



   <>

   <TestingProps border={true} dark={true}>Hello
   </TestingProps>

  </>

So, we need to create the TestingProps component and also need work with the prop dark & border.

JavaScript Object Syntax (Without MUI Theme)



const TestingProps = styled(Box, {

    // Configure which props should be forwarded on DOM
   shouldForwardProp: (prop) => prop !== 'dark' && prop!== 'border'

   })

   (({ dark, border }) => ({

   backgroundColor: dark? "black" : "white",
   color: dark? "white" : "black",
   border: border? "1rem solid pink" : 'none'

   }));

What is this shouldForwaredProp?

We may already know that MUI5 uses emotion as a default style engine. This shouldForwardProp is coming from emotion. shouldForwaredProp is used to pass prop. In an example in the official documentation, shouldForwaredProp is used, you can check the example if you want.

CSS Like Syntax (Without MUI Theme)



const TestingProps4 = styled(Box, {

  // Configure which props should be forwarded on DOM
  shouldForwardProp: (prop) => prop !== 'dark' && prop!== 'border'

  })


  (({ dark, border }) => `

    background-color: ${dark? "black" : "white"};
    color: ${dark? "white" : "black"};
    border: ${border? "1rem solid pink" : 'none'}

  `);

JavaScript Object Syntax (With MUI Theme)



const TestingProps = styled(Box, {

   // Configure which props should be forwarded on DOM
  shouldForwardProp: (prop) => prop !== 'dark' && prop!== 'border'

  })

  (({ dark, border, theme }) => ({

  backgroundColor: dark? theme.palette.grey[900] : theme.palette.grey[100],
  color: dark? theme.palette.grey[100] : theme.palette.grey[900],
  border: border? `1rem solid ${theme.palette.primary.main}` : 'none'

  }));

CSS Like Syntax (With MUI Theme)



const TestingProps = styled(Box, {

   // Configure which props should be forwarded on DOM
   shouldForwardProp: (prop) => prop !== 'dark' && prop!== 'border'

  })


  (({ dark, border, theme }) => `

    background-color: ${dark? theme.palette.grey[900] : theme.palette.grey[100]};
    color: ${dark? theme.palette.grey[100] : theme.palette.grey[900]};
    border: ${border? `1rem solid ${theme.palette.primary.main}` : 'none'};

  `);

Default Prop Value

We can also pass the default value for the props.



TestingProps.defaultProps = {
    dark: false,
    border: false
  }

Demo | Documentation

sx Prop can be used as an Alternative to the styled Utility

Setup

With the right setup, the sx prop can replicate all functionalities provided by the Styled utility:



const NewStyledComponent = (props) => {
   const {sx, children, ...extra_props} = props;

   return (
      <Box 
        sx={{
            backgroundColor: 'black',
            ...sx
        }}
        {...extra_props}
      >
        {children}
      </Box> 
   );
}

How the Above Setup Ensures the Functionalities of the styled Utility

The component accepts and renders children, allowing content to be placed inside, similar to a component created using the styled utility.
Just as components created with the styled utility can accept the sx prop for additional styling, "NewStyledComponent" also accepts the sx prop.
The ...extra_props in "NewStyledComponent" allows for the forwarding of any additional props to the Box component. For instance, props like "onSubmit" and "onClick" can be seamlessly passed and applied. This behavior aligns with components from the styled utility, which also accept a diverse range of props for various scenarios.

Additional Advantages of the sx Prop Approach

Conditional styling becomes more straightforward because we are essentially creating a standard React component. This allows us to accept and pass props as we typically would, without following the specific prop-accepting conventions of the styled utility.

Working with media queries becomes more straightforward:



const NewStyledComponent = (props) => {
   const {sx, children, ...extra_props} = props;

   return (
      <Box 
        sx={{
            // media query
            width: { xs: '15rem', sm: '12rem' },
            ...sx
        }}
        {...extra_props}
      >
        {children}
      </Box> 
   );
}

Accessing the theme does not pose much difficulty:



const NewStyledComponent = (props) => {
   const {sx, children, ...extra_props} = props;

   return (
      <Box 
        sx={(theme) => ({
            // accessing theme
            backgroundColor: theme.palette.primary.main,
            ...sx
        })}
        {...extra_props}
      >
        {children}
      </Box> 
   );
}

That's it. 😃 Thanks for reading. 🎉

Compare Anything in JavaScript with Just A Function

Rasaf Ibrahim — Thu, 07 Jul 2022 20:43:09 +0000

✅ In this article, we will create a function that can compare not only strings, numbers, and booleans but also arrays and objects. The arrays and objects that this function will compare can have nested arrays, and nested objects. Also, the objects can not only have enumerable properties but also nonenumerable. If you want to see a preview, go to the last section: Preview

🔖 Table of Contents

Step 1: Creating the function
Step 2: Checking Null
Step 3: Checking String and Number and Boolean
Important Info
Step 4: Checking Type
Step 5: Checking total number of properties
Step 6: Checking Property Names
Step 7: Checking Property Values
Step 8: The Last Step
Full Code
Testing

Step 1: Creating the function

Let's name this function compareAnything and this function will accept two arguments: first & second.

function compareAnything (first, second) {

 ...

}

We can pass two values as arguments. This function will return a boolean value after comparing those values.

Step 2: Checking Null

In this step, we will check whether any of the arguments is null. If any argument is null, we have nothing to compare, we will simply return false. But if none of them are null, we will move forward to the next step.

function compareAnything (first, second) {

   if(first === null || second === null) return false

}

Step 3: Checking String and Number and Boolean

It's easy to compare strings, numbers, and booleans. We just need to use a strict equality operator (===).

function compareAnything (first, second) {

    ...

    /* Using the strict equality operator (===) */
    if(first === second) return true

}

If the arguments are equal, we are returning true. But if they are not equal, then surely they are not strings or numbers or booleans. Maybe they are objects or arrays. So, we will move forward to the next step.

⚠️

Important Info

Why it's a little bit tough to compare two objects

Before going to step 4, let's understand why it's tough to compare two objects. In JavaScript, objects are stored by reference. That means one object is strictly equal to another only if they both point to the same object in memory.

This GIF is collected from panjee.com and modified afterward.

const obj_1 = { score: 12 }
const obj_2 = obj_1
const obj_3 = { score: 12 }

obj_1 === obj_2; // true, same reference
obj_1 === obj_3 // false, different reference but same keys and values

Arrays are objects

Arrays are a special type of object. The typeof operator in JavaScript returns "object" for arrays.

let a = [1, 2, 3]
console.log(typeof a) // object

So, from now we will only focus on comparing two objects. If we can make functionality to compare two objects, that functionality will also compare two arrays automatically.

Step 4: Checking Type

In this step, we will make sure that the type of the argument is object. If any of the arguments is not an object, we will return false.

function compareAnything (first, second) {

    ...

   if(typeof first !== 'object'  || typeof second !== 'object') return false

}

Note:

The typeof operator in JavaScript returns "object" for arrays too. So, in this step, we are checking for both arrays and objects.

Step 5: Checking the total number of properties

In the last step, we have made sure that both arguments are objects. In this step, we will check whether both objects have the same number of properties or not. If they don't have the same number of properties, we will return false.

function compareAnything (first, second) {

    ...

   /* Using Object.getOwnPropertyNames() method to return the list of the objects’ properties*/
 let first_keys = Object.getOwnPropertyNames(first)

 let second_keys = Object.getOwnPropertyNames(second)


  /* Using array.length() method to count the number of total property */
  if(first_keys.length !== second_keys.length) return false

}

Could we use Object.keys() instead of Object.getOwnPropertyNames()?

No. Because Object.keys() can't return Nonenumerable
property's name but Object.getOwnPropertyNames() can.

Step 6: Checking Property Names

In the last step, we made sure that both objects have the same number of properties. Now, we need to make sure that the properties' names of both objects are the same. If they are not the same, we will return false. But if they are the same, we will move forward to the next step.

function compareAnything (first, second) {

    ...


  /* Iterating through all the properties of the first object with for..of method */
 for(let key of first_keys) {


    /* Making sure that every property in the first object also exists in the second object */ 
    if(!Object.hasOwn(second, key)) return false


 }


}

Could we use Object.hasOwnProperty() instead of Object.hasOwn()?

No. Because Object.hasOwnProperty() can't check a Nonenumerable property's name but Object.hasOwnProperty() can. Also, Object.hasOwn() is intended as a replacement for Object.hasOwnProperty(), so we are using Object.hasOwn() here.

Step 7: Checking Property Values

In the last step, we made sure that the property names of both objects are the same. Now, we will check whether the property values of both objects are the same or not.

This step is a little bit tricky because:

The property values can not only be strings, numbers, or boolean but also nested objects.
Just checking with strict equality operator (===) would be enough if the values were string or number or boolean but it wouldn't be enough for an object because the nested object will have its own properties.
Let's suppose that the nested object has another object inside it as a property! What will we do? Will we check one by one!

Solution:

In the step 1, we created this compareAnything function, and this function not only checks the strict equality operator (===), but also it checks null or not, object or not, properties of objects are the same or not. So, actually, we need a function like this compareAnything to check any nested object's properties.
Fortunately, we don't need to create any new function because there is a term known as the recursive function. A recursive function is a function that calls itself during its execution. So, we can use this compareAnything function as a recursive function.

Now, let's use this compareAnything function to check whether the property values of both objects are the same or not. If they are not the same, we will return false.

function compareAnything (first, second) {

    ...



 for(let key of first_keys) {



     ...


   /* Using the compareAnything function recursively and passing the values of each property into it to check if they are equal. */

  if (compareAnything(first[key], second[key]) === false) return false



}

Note

As the compareAnything is inside a loop. So, it will continue to execute itself till it finishes checking all the nested objects.

Step 8: The Last Step

If we are in this step 8, that means no other step's condition matched. As we have checked almost all possible ways in which the objects are not the same and none of those conditions matched, so now we can surely say that the objects are the same. So, we will simply return true in this step.

function compareAnything (first, second) {

    ...


  for(let key of first_keys) {



     ...


   }

 return true

}

Full Code

function compareAnything (first, second) {


  /* Checking if any arguments are null */
  if(first === null || second === null) return false


  /* Checking if the types and values of the two arguments are the same. */
  if(first === second) return true


  /* Checking if any argument is none object */
  if(typeof first !== 'object'  || typeof second !== 'object') return false


  /* Using Object.getOwnPropertyNames() method to return the list of the objects’ properties */
  let first_keys = Object.getOwnPropertyNames(first)

  let second_keys = Object.getOwnPropertyNames(second)



  /* Checking if the objects' length are same*/
  if(first_keys.length !== second_keys.length) return false




  /* Iterating through all the properties of the first object with the for of method*/
  for(let key of first_keys) {


      /* Making sure that every property in the first object also exists in second object. */ 
      if(!Object.hasOwn(second, key)) return false


      /* Using the compareAnything function recursively (calling itself) and passing the values of each property into it to check if they are equal. */
      if (compareAnything(first[key], second[key]) === false) return false

  }



  /* if no case matches, returning true */ 
  return true


}

Testing

String

const string_1 = 'rasaf'
const string_2 = 'ibrahim'
const string_3 = 'rasaf'

console.log(compareAnything(string_1, string_2)) //false
console.log(compareAnything(string_1, string_3)) // true
console.log(compareAnything(string_2, string_3)) // false

Number

const number_1 = 100
const number_2 = 200
const number_3 = 100

console.log(compareAnything(number_1, number_2)) //false
console.log(compareAnything(number_1, number_3)) // true
console.log(compareAnything(number_2, number_3)) // false

Boolean

const boolean_1 = true
const boolean_2 = false
const boolean_3 = true

console.log(compareAnything(boolean_1, boolean_2)) //false
console.log(compareAnything(boolean_1, boolean_3)) // true
console.log(compareAnything(boolean_2, boolean_3)) // false

Array

let arr_1 = [
  {
    color: 'red',
    type: 'station wagon',
    registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
    capacity: 5
  },
  {
    color: 'red',
    type: 'cabrio',
    registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
    capacity: 2
  }
]


let arr_2 = [
  {
    color: 'red',
    type: 'station wagon',
    registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
    capacity: 5
  },
  {
    color: 'red',
    type: 'cabrio',
    registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
    capacity: 2
  }
]

console.log(compareAnything(arr_1, arr_2)) //true

Object

let obj_1 = {
  name: "Rasaf",
  additionalData: {
      favoriteHobbies: ["Playing Cricket", "Watching Movies"],
      citiesLivedIn: ["Rajshahi", "Rangpur", "Joypurhat"]
      }
  }


let obj_2 = {
  name: "Rasaf",
  additionalData: {
      favoriteHobbies: ["Playing Football", "Watching Movies"],
      citiesLivedIn: ["Rajshahi", "Rangpur", "Joypurhat"]
      }
  }


let obj_3 = {
  name: "Rasaf",
  additionalData: {
      favoriteHobbies: ["Playing Cricket", "Watching Movies"],
      citiesLivedIn: ["Rajshahi", "Rangpur", "Joypurhat"]
      }
  }

console.log(compareAnything(obj_1, obj_2)) //false
console.log(compareAnything(obj_1, obj_3)) // true
console.log(compareAnything(obj_2, obj_3)) // false

Object (Enumerable & Nonenumerable Properties)

let obj_1 = {
  name: "Rasaf",
  additionalData: {
      favoriteHobbies: ["Playing Cricket", "Watching Movies"],
      citiesLivedIn: ["Rajshahi", "Rangpur", "Joypurhat"]
      }
  }


  let obj_2 = {
    name: "Rasaf",
    additionalData: {
        favoriteHobbies: ["Playing Cricket", "Watching Movies"],
        citiesLivedIn: ["Rajshahi", "Rangpur", "Joypurhat"]
        }
    }


let obj_3 = {
  name: "Rasaf",
  additionalData: {
      favoriteHobbies: ["Playing Football", "Watching Movies"],
      citiesLivedIn: ["Rajshahi", "Rangpur", "Joypurhat"]
      }
  }
  Object.defineProperty(obj_3, 'noneEnumble', {
    value: 123,
    enumerable: false
  });


  let obj_4 = {
    name: "Rasaf",
    additionalData: {
        favoriteHobbies: ["Playing Football", "Watching Movies"],
        citiesLivedIn: ["Rajshahi", "Rangpur", "Joypurhat"]
        }
    }
    Object.defineProperty(obj_4, 'noneEnumble', {
      value: 123,
      enumerable: false
    });




console.log(compareAnything(obj_1, obj_2)) //true
console.log(compareAnything(obj_1, obj_3)) // false
console.log(compareAnything(obj_2, obj_3)) // false
console.log(compareAnything(obj_3, obj_4)) // true

That's it. 😃 Thanks for reading. 🎉 If you find any typos or errors, or if you want to add something, please write it down in the comment section.

Deeply Compare 2 Objects with Recursive Function in JavaScript

Rasaf Ibrahim — Tue, 05 Jul 2022 16:36:58 +0000

In this article, we will compare two objects deeply. The objects that we will compare can not only have strings, numbers, and boolean as properties but also nested objects & arrays. Also, the property of these objects can not only be enumerable but also nonenumerable.

Table of Contents

Why it's a little bit tough to compare two objects

Let's Compare Two Objects

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Full Code

Let's test

Why it's a little bit tough to compare two objects

In JavaScript, objects are stored by reference. That means one object is strictly equal to another only if they both point to the same object in memory.

This GIF is collected from panjee.com and modified afterward.



const obj_1 = { score: 12 }
const obj_2 = obj_1
const obj_3 = { score: 12 }

obj_1 === obj_2; // true, same reference
obj_1 === obj_3 // false, different reference but same keys and values

Let's Compare Two Objects

We need to check multiple things to compare two objects. So, we will break down the comparison process into multiple steps:

Step 1

Let's first create a function (deepComparison) that has two parameters (first, second).



function deepComparison (first, second) {

 ...

}

If we pass two objects as the arguments of this function, this function will return a boolean value after comparing them.

Step 2

Our real work is beginning from this step. In this step, we will check if the types and values of the two arguments are the same. If they are the same, we will return true. Otherwise, we will move forward to the next step.



function deepComparison (first, second) {

    /* Using the strict equality operator (===) */
    if(first === second) return true

}

Step 3

In this step, we will check whether any of the arguments is null. If any argument is null, we will return false. But if none of them are null, we will move forward to the next step.



function deepComparison (first, second) {

    ...

   if(first === null || second === null) return false

}

Step 4

Now, we will make sure that both arguments are objects. If any of the arguments is not an object, we will return false.



function deepComparison (first, second) {

    ...

   if(typeof first !== 'object'  || typeof second !== 'object') return false

}

Step 5



function deepComparison (first, second) {

    ...

   /* Using Object.getOwnPropertyNames() method to return the list of the objects’ properties*/
 let first_keys = Object.getOwnPropertyNames(first)

 let second_keys = Object.getOwnPropertyNames(second)


  /* Using array.length() method to count the number of total property */
  if(first_keys.length !== second_keys.length) return false

}

Could we use Object.keys() instead of Object.getOwnPropertyNames()?

No. Because Object.keys() can't return Nonenumerable
property's name but Object.getOwnPropertyNames() can.

Step 6



function deepComparison (first, second) {

    ...


  /* Iterating through all the properties of the first object with for..of method */
 for(let key of first_keys) {


    /* Making sure that every property in the first object also exists in the second object */ 
    if(!Object.hasOwn(second, key)) return false


 }


}

Could we use Object.hasOwnProperty() instead of Object.hasOwn()?

No. Because Object.hasOwnProperty() can't check a Nonenumerable property's name but Object.hasOwnProperty() can. Also, Object.hasOwn() is intended as a replacement for Object.hasOwnProperty(), so we are using Object.hasOwn() here.

Step 7

In the last step, we made sure that the property names of both objects are the same. Now, we will check whether the property values of both objects are the same or not.

This step is a little bit tricky because:

The property values can not only be strings, numbers, or boolean but also nested objects.
Just checking with strict equality operator (===) would be enough if the values were string or number or boolean but it wouldn't be enough for an object because the nested object will have its own properties.
Let's suppose that the nested object has another object inside it as a property! What will we do? Will we check one by one!

Solution:

In the step 1, we created this deepComparison function, and this function not only checks the strict equality operator (===), but also it checks null or not, object or not, properties of objects are same or not. So, actually, we need a function like this deepComparison to check any nested object's properties.
Fortunately, we don't need to create any new function because there is a term known as the recursive function. A recursive function is a function that calls itself during its execution. So, actually, we can use this deepComparision function as a recursive function.

Now, let's use this deepComparision function to check whether the property values of both objects are the same or not. If they are not the same, we will return false.



function deepComparison (first, second) {

    ...



 for(let key of first_keys) {



     ...


   /* Using the deepComparison function recursively and passing the values of each property into it to check if they are equal. */

  if (deepComparison(first[key], second[key]) === false) return false



}

Note

As the deepComparision is inside a loop. So, it will continue to execute itself till it finishes checking all the nested objects.

Step 8



function deepComparison (first, second) {

    ...


  for(let key of first_keys) {



     ...


   }

 return true

}

Full Code



function deepComparison (first, second) {


  /* Checking if the types and values of the two arguments are the same. */
  if(first === second) return true


  /* Checking if any arguments are null */
  if(first === null || second === null) return false

  /* Checking if any argument is none object */
  if(typeof first !== 'object'  || typeof second !== 'object') return false



  /* Using Object.getOwnPropertyNames() method to return the list of the objects’ properties */
  let first_keys = Object.getOwnPropertyNames(first)

  let second_keys = Object.getOwnPropertyNames(second)



  /* Checking if the objects' length are same*/
  if(first_keys.length !== second_keys.length) return false




  /* Iterating through all the properties of the first object with the for of method*/
  for(let key of first_keys) {


      /* Making sure that every property in the first object also exists in second object. */ 
      if(!Object.hasOwn(second, key)) return false


      /* Using the deepComparison function recursively (calling itself) and passing the values of each property into it to check if they are equal. */
      if (deepComparison(first[key], second[key]) === false) return false

  }



  /* if no case matches, returning true */ 
  return true


}

Let's test





let obj1 = {
  a: 1,
  b: 2,
  c: { foo: 1, bar: 2},
  d: { baz: 1, bat: 2, arr: [2,3] }
}

let obj2 = {
  a: 1,
  b: 2,
  c: { foo: 1, bar: 2},
  d: { baz: 1, bat: 2, arr: [2,3] }
}


let obj3 = {
  name: "Rahim",
  additionalData: {
      instructor: true,
      favoriteHobbies: ["Playing Cricket", "Tennis", "Coding"],
      citiesLivedIn: ["Rajshahi", "Rangpur", "Joypurhat"]
      }
  }


let obj4 = {
    name: "Rahim",
    additionalData: {
        instructor: true,
        favoriteHobbies: ["Playing Cricket", "Tennis", "Coding"],
        citiesLivedIn: ["Rajshahi", "Rangpur", "Joypurhat"]
        }
    }




console.log(deepComparison(obj1, obj2)) //true
console.log(deepComparison(obj1, obj3)) //false
console.log(deepComparison(obj2, obj3)) // false
console.log(deepComparison(obj3, obj4)) //true

That's it. 😃 Thanks for reading. 🎉 If you find any typos or errors, or if you want to add something, please write it down in the comment section.

4 Ways to Render JSX Conditionally in React

Rasaf Ibrahim — Fri, 24 Jun 2022 16:58:44 +0000

Rendering JSX conditionally is a very common and essential work in React. There are 4 ways in which we can render JSX conditionally in React:

Ternary Operator
Logical Operator
if, else, else if
Switch Statement

Generally, developers don't use if else or switch statement inside JSX for conditional rendering. Because it takes more lines of code with if else or switch statement than ternary operator or logical operator. But when you have more than two conditions to deal with, you have to use if else or switch statement.

Ternary Operator

function TernaryOperator() {

  return (
    <>     
        {
            /* Ternary Operator */

            'a'==='a' ? <p>Hi</p> : <p>Bye</p>
        } 
    </>
  )

}

export default TernaryOperator

Explanation

Only if the condition 'a'==='a' is true, Hi will be rendered one the screen. Otherwise, Bye will be rendered on the screen.

Note:

It's not a very realistic example because you would never compare 'a'==='a' in a real-world application. But this comparison is not the main point here. The point is the use of the ternary operator.

Logical Operator

AND && (Logical Operator)

function LogicalAnd() {

  return (
    <>     
        {
            /* Logical 'AND' Operator*/

            'a'==='a' && <p>Hi</p>
        } 
    </>
)

}

export default LogicalAnd
)

Explanation

Only if the condition 'a'==='a' is true, Hi will be rendered on the screen.

OR || (Logical Operator)

function LogicalOR({name, labelText}) {

  return (
    <>       
        /* Logical 'OR' Operator*/
         {labelText || name}      
    </>
  )
}

export default LogicalOR

Explanation:

If labelText and name both props are passed into this component, then labelText will be rendered on the screen. But if only one of them (name or labelText ) is passed as a prop, then that passed prop will be rendered on the screen.

NOT ! (Logical Operator)


function LogicalNOT ({name})  { 

    /* Logical NOT Operator */
    if (!name) {  
      return null; 
    }              


    return <p>Hi! My name is {name}.</p>;
  }

 export default LogicalNOT

Explanation

Only if the name prop is passed then Hi! My name is {name}. will be rendered on the screen, otherwise, nothing will render on the screen.

Note

if (!name) { return null }, returning early like this is known as Early Return. Early Return is also called Guard Clause or Bouncer Pattern.

if, else, else if

function IfElse() {

    return ( 
      <>     
          {
            /*If else condition within an anonymous function*/

              (() => {
                  if('a'==='b') {
                          return (
                              <p>Hi</p>
                          )
                      } else if ('b'==='b') {
                          return (
                          <p>Hello</p>
                          )
                      } else {
                          return (
                              <p>Bye</p>
                          )
                      }
              })()  
          }  
      </>  
    )


}

export default IfElse

Note:

Have to use an anonymous function (also need to immediately invoke the function )

Switch Statement

function SwitchStatement() {

  return ( 
    <>     
        {

           /*Switch Statement within an anonymous function*/

            (() => {
                switch(true) {

                    case('a'==='b'): {
                            return (
                                <p>Hello</p>
                            )
                        }
                    break;

                    case('a'==='a'): {
                        return (
                            <p>Hi</p>
                        )
                    }
                    break;

                    default: {
                            return (
                                <p>Bye</p>
                            )
                        }
                    break;
                    }
            })()  
        }  
    </>  
)

}

export default SwitchStatement

Note:

Have to use an anonymous function (also need to immediately invoke the function )

That's it.😃 Thanks for reading.🎉

Write Regex Pattern for Password Validation Like a Pro

Rasaf Ibrahim — Mon, 20 Jun 2022 11:40:20 +0000

`✅The following 4 regex patterns can help you to write almost any password validation`

Pattern 1:

Password must contain one digit from 1 to 9, one lowercase letter, one uppercase letter, one special character, no space, and it must be 8-16 characters long.

/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*\W)(?!.* ).{8,16}$/

Explanation:

(?=.*[0-9]) means that the password must contain a single digit from 1 to 9.

(?=.*[a-z]) means that the password must contain one lowercase letter.

(?=.*[A-Z]) means that the password must contain one uppercase letter.

(?=.*\W) means that the password must contain one special character.

.{8,16} means that the password must be 8-16 characters long. We must use this at the end of the regex, just before the $ symbol.

What are ^ and $:

^ indicates the beginning of the string. $ indicates the end of the string.

If we don't use these ^ & $, the regex will not be able to determine the maximum length of the password. In the above example, we have a condition that the password can't be longer than 16 characters, to make that condition work, we have used these ^ & $

Remove maximum length restriction:

Instead of .{8,16}, if we used .{8,}, it would mean that the password must be at least 8 characters long. So, there will not be any condition for checking the maximum length of the password.

Don't accept any number(digit):

Instead of (?=.*[0-9]), if we used (?!.*[0-9]), it would mean that the password must not contain any digit from 1-9 (Difference with the (?=.*[0-9]) is the use of ! instead of =)

Don't accept any spcecial character:

Instead of (?=.*\W), if we used (?!.*\W), it would mean that the password must not contain any special characters (The difference with the (?=.*\W) is the use of ! instead of =)

Alternative Syntax for number(digit):

Instead of (?=.*[0-9]), we could have used (?=.*\d). (?=.*\d) also means that the password must contain a single digit from 1 to 9.

Pattern 2:

Password must contain one digit from 1 to 9, one lowercase letter, one uppercase letter, one underscore but no other special character, no space and it must be 8-16 characters long.

/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*_)(?!.*\W)(?!.* ).{8,16}$/

Difference with the Pattern 1

Here, we have used (?=.*_) which wasn't on the Pattern 1.

(?=.*_)(?!.*\W) means that the password must contain an underscore but can not contain any other special character.

Pattern 3:

Password must contain one digit from 1 to 9, one lowercase letter, one uppercase letter, one underscore, no space and it must be 8-16 characters long. Usage of any other special character other than underscore is optional.

/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*_)(?!.* ).{8,16}$/

Difference with the Pattern 2

Here, we have not used (?!.*\W) what was on the Pattern 2.

But it still has the (?=.*_)

By just removing the (?!.*\W), special characters have become optional. Now, one underscore is required but any other special character can be used or not as it's optional.

Pattern 4:

Password must contain one digit from 1 to 9, one lowercase letter, one uppercase letter, and one underscore, and it must be 8-16 characters long. Usage of any other special character and usage of space is optional.

/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,16}$/

Difference with the Pattern 3

Here, we have not used (?=.*_) & (?!.* ) which was on the Pattern 3.

By removing (?=.*_), it's no longer mandatory to pass one underscore. Now, passing special characters is optional.

By removing the (?!.* ), usage of space has become optional too.

That's it. 😃 Thanks for Reading.🎉