DEV Community: Amandeep Singh

Some Custom React Hooks I've used so far.

Amandeep Singh — Wed, 12 May 2021 14:34:36 +0000

Hi there,
As we all know, ReactJS is currently the most popular front-end framework. Some years back, a powerful feature was introduced by React devs - React Hooks, where they moved from class-based programming approach to function-based, which turned out to be a game changer!

In addition to the in-built hooks from React's, like useState, useEffect, useContext etc., devs can write their own hooks - termed as Custom Hooks.

In this post, I'm gonna mention my favorite custom hooks, which I found useful for my projects.

useLocalStorage:

The usage is similar to useState, but instead of storing the value in virtual state, we store it in browser's local storage and the value is persisted on page refresh.

Example:
If your site has dark theme mode, you can use the hook to persist theme's switch. So, whenever user returns to your site, it'll apply the theme automatically.

Source code & usage

useMediaQuery

If you're aware of media queries from CSS, you'll get the usage info. from the name itself. Basically, you can use this when you want to conditionally render something according to device-screen's width.

Example:
Without using CSS, you can un-render mobile menu component, whenever screen size exceeds 768px.

Source code & usage

useClickOutside

With this hook, you can detect click events outside of a particular element.

Example:
If you have a modal/dialog component, you want it to close whenever user clicks outside of the main element.

Source code & usage

useScrollDown

This hook will return true, if the scroll hits the specified value.

Example:
If you have a floating button for scroll up, but you only want it to show when your page is scrolled down a bit from initial position.

Source Code:

import { useState, useEffect } from 'react';

const useScrollDown = (height) => {
  const [boolean, setBoolean] = useState(false);

  const handler = () => {
    if (window.pageYOffset >= height) {
      setBoolean(true);
    } else {
      setBoolean(false);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return boolean;
};

export default useScrollDown;

Usage:

const isScrollDown = useScrolldown(90);

return (
  <div>
    {isScrollDown ? "It's down!" : "Initial position."}
  </div>
)

The big 3 of array methods - map, filter & reduce

Amandeep Singh — Fri, 30 Apr 2021 14:56:38 +0000

Hi there,
These array methods are the most important part of functional programming in JavaScript. I'm pretty sure if you're building a project in JS, you're gonna use atleast one of these, if not all.

So, let's get started!

Sample array:
const arr = [2, 4, 6, 8, 10]

map()

It creates a new array with the results of calling a function for every array element.

const mapped = arr.map((element, index) => element * index);
//creates an array, multiplying every element of the original array with its index.

console.log(mapped);
// Outputs: [0, 4, 12, 24, 40]

filter()

It creates a new array filled with all array elements that pass a test (provided as a function).

const filtered = arr.filter((element, index) => element % 4 === 0);
//creates an array, filtering the original array with elements divisible by 4. 

console.log(filtered);
// Outputs: [4, 8]

reduce()

It reduces the array to a single value, executing a provided function for each value of the array (from left-to-right).

const reduced = arr.reduce((sum, current) => sum + current, 0);
//calculates sum of all the array elements

console.log(reduced);
// Outputs: 30

call(), apply() & bind() in JavaScript

Amandeep Singh — Thu, 29 Apr 2021 11:43:02 +0000

Hi there,
In this post, I'm gonna talk about the function methods mentioned in the title. A lot of new JavaScript devs find them difficult to understand, so here I am!

Here's our object for example purposes:

const person = { name: "Aman" }

The function which we want to invoke as object method:

const intro = function(profession, country) {
  return `${this.name} is a ${profession}, who lives in ${country}.`
}

call()

call() is used to invoke a function as method, where first parameter refers to the "this" for the object, remaining parameters acts as regular function parameters.

console.log(intro.call(person, "Developer", "India"));
// Outputs: "Aman is a Developer, who lives in India."

apply()

apply() is similar to call(), only difference is the way function parameters are passed i.e. in an array, instead of comma-separated arguments.

console.log(intro.apply(person, ["Developer", "India"]));
// Outputs: "Aman is a Developer, who lives in India."

bind()

bind() is different compared to call() & apply(). When we pass the "this" of the object as argument, it returns a bound function which we can invoke later.

const boundIntro = intro.bind(person);
console.log(boundIntro("Developer", "India"));
// Outputs: "Aman is a Developer, who lives in India."