DEV Community: Shahid Rizwan

Promise in Javascript

Shahid Rizwan — Thu, 09 Sep 2021 17:36:53 +0000

A promise is one of the most confusing concepts in javascript for someone new to Javascript. It may look quite complicated to understand at first sight, but it is quite simple and is not rocket science.

Promise in javascript is similar to promise in real life, like how we promise to do a task like cleaning the room, it is a guarantee that we are going to do something in the future.

Why do we need Promise?

Before Promise, callback functions were used for performing asynchronous operations. Since it was confusing and had limitations in functionality, Promise was introduced in ES6.

If there are multiple asynchronous operations to be done and if we try to use good-old Callbacks for them, we’ll find ourselves quickly inside a situation called Callback hell.

A simple promise function

let promise = new Promise((resolve, reject) => { 
  let task_performed = true;
  if(task_performed) { 
    resolve('Success!'); 
  } else { 
    reject('Failed!'); 
  } 
});

Different states of Promise

The 3 states of promise object are:

Pending
Resolved
Rejected

Pending: It is the initial state of the Promise before Promise succeeds or fails. When we request data from the server by using a Promise, it will be in pending mode until we receive our data.

Resolved: It is the state where a promise is fulfilled successfully. It's like when we use a promise to get data from the server, we get the resolved state when the data is successfully received.

Rejected: It is the state where a promise is not fulfilled due to some error.

The .then() method is called after a promise is resolved. We can use it to decide what to do with the resolved promise.

let promise = new Promise((resolve, reject) => { 
  let task_performed = true;
  if(task_performed) { 
    resolve('Success!'); 
  } else { 
    reject('Failed!'); 
  } 
}); 

promise.then((response) => console.log(response))

We also know that not all Promises will be resolved every time. What if the promise gets rejected? We use the .catch() method after a promise is rejected. It can be used for throwing a new error or logging the details to the console.

let promise = new Promise((resolve, reject) => { 
  let task_performed = true;
  if(task_performed) { 
    resolve('Success!'); 
  } else { 
    reject('Failed!'); 
  } 
}); 

promise.then((response) => console.log(response))
.catch((error) => console.log(error))

Set your Web App to Dark/Light Mode based on User System Settings

Shahid Rizwan — Sun, 05 Sep 2021 17:17:18 +0000

We all know Dark mode is one of the hottest features from 2019. Everything from smartphones, laptops, and your applications now comes with in-build dark mode.

It comes with a lot of advantages. It's the way forward when spending long hours in front of the laptop under low light.

It also saves significant battery in newer devices using OLED screens by turning off the black pixels.

But, is it the best option to choose all the time over light mode? Let's see.

The dark mode comes with some disadvantages too.

Using dark mode when the surrounding is well lit can cause strain to your eyes just like when you use too much light in low light condition. When in the bright surrounding, your eye finds it hard to focus on the content present in the dark background with very little contrast. Therefore, most users switch between dark and light modes in their devices based on their surroundings.

What if, we as developers, can set our web application theme based on the device settings and reduce that extra step to switch in our apps? Will it be possible?
Well, there is a way.

What is Window.matchMedia() ?

Windows.matchMedia() is a method that returns an object that determines if the document matches the media query string.

Just like how we use @media in CSS, you can detect the same media queries in javascript.

For example, if we have the following media query in CSS

@media screen and (max-width:700px){
}

The javascript equivalent is:

const mw = window.matchMedia("screen and (max-width:700px)")

Detecting System theme using matchMedia()

Consider a simple React component with a Hello World text written in it.

function App() {


  return (
    <div>
      Hello World
    </div>
  );
}

export default App;

To add the dark mode to the component, we use the prefers-color-scheme CSS media feature. It detects if the system is in a dark theme or light theme.

The matches property of the prefers-color-scheme is a boolean value that updates based on the query.

So, to check the system preference, we add as isDark variable to detect if the system uses dark mode.

function App() {

  const isDark = window.matchMedia("(prefers-color-scheme:dark)").matches

  const lightTheme = {
    backgroundColor : "white",
    color : "black"
  }

  const darkTheme = {
    backgroundColor : "black",
    color : "white"
  }

  return (
    <div style={isDark?darkTheme:lightTheme}>
      Hello World
    </div>
  );
}

export default App;

Based on the isDark variable value, either the darkTheme or lightTheme syle applies to the component.

Option to Switch themes inside the application

We can also add a toggle inside the application if the user wants to switch between the themes.

For that, we create a state variable and initialize it with the system theme settings.

Every time the user clicks the button, the state variable toggles accordingly.

import { useState } from 'react';

function App() {

  const isSystemDark = window.matchMedia("(prefers-color-scheme: dark)").matches
  const [isDark,setIsDark] = useState(isSystemDark)

  const lightTheme = {
    backgroundColor : "white",
    color : "black"
  }

  const darkTheme = {
    backgroundColor : "black",
    color : "white"
  }

  return (
    <div style={isDark?darkTheme:lightTheme}>
      Hello World
      <button onClick={()=>setIsDark(toggle =>!toggle)}>Switch Theme</button>
    </div>
  );
}

export default App;

Building custom hooks in React to fetch Data

Shahid Rizwan — Sat, 04 Sep 2021 08:02:10 +0000

Fetching data from the backend is one of the crucial parts of the web application. For every application to work dynamically, it fetches the data from the server and then displays it in the user interface.

We retrieve the data using the API call and using built-in React hooks like useState, useEffect, and useReducer, the retrieved data is set to the state variable. It is then used in components for showing it in the view.

Before jumping into the code of how's it's done, let's first look at what React hooks are and why it is used.

What is React Hooks

React hooks were first introduced in React 16.8. They are functions that let you hook into React state.

Some of the built-in hooks provided by React are useState, useEffect, useContext, useReducer, useRef, useCallback, and useMemo.

Why React Hooks are used

One of the main advantages of using React hooks is the re-usability of logic. The hooks can be used in multiple components where we have to use a specific function.

It also makes the code more readable, efficient, and easy to maintain.

The normal code for fetching the data from the server and updating in the component is shown below



export function Home(){

    const [data,setData] = useState(null)
    const [loading,setLoading] = useState(false)
    const [error,setError] = useState(null)

    useEffect(()=>{
        (
        async function(){
            try{
                setLoading(true)
                const response = await axios.get('http:localhost:4000')
                setData(response.data)
            }
            catch(err){
                setError(err)
            }finally{
                setLoading(false)
            }
        }
        )()
    },[])

    return(
        {loading && <div>Loading...</div>}
        {data && <div>{data}</div>
    )
}

We write the logic inside the useEffect hook to update the state properties like data, loading, and error.

While it's perfectly fine to write like this, what if we want to do the same kind of thing in multiple components where we have to fetch another data.

We have to rewrite all of these codes multiple times in all of those components which is not very efficient and hard to manage.

In big codebases, it is better to follow the Don't Repeat Yourself (DRY) principles, that is, it's better to write code once and make it reusable instead of writing it again and again in multiple components.

That's where the real magic of Custom Hook is. We can write the code in a separate js file and call it with URL from all the components that might need to fetch the data from the server.

This makes the code efficient and easily maintainable.

Like useState and useEffect have their function, we create custom hooks by combining them for a specific ability.

Creating custom useFetch hook

We first create a new javascript file with the name useFetch.js.
The name of the hooks starts with use as a part of react hooks convention.

Inside the file, create a new function with the name of the hook. The difference between React hook and a React component is that hook doesn't return JSX. It only returns the state variable or function that you want to use in a component.



export function useFetch(){

}

To make an API call, use a useEffect hook because it will trigger the API call function inside it when rendered. Here, the API call is made using Axios.

The API Url that needs to be called is passed to the hook as an argument from the component.



import { useEffect } from "react"
import axios from axios

export function useFetch(url){
   useEffect(()=>{
      (
         async function(){
            const response = await axios.get(url)
         }
      )()
   },[url])

}

Usually, we have 3 state variables that are data, error, and loading created using useState to store the response data, error and loading respectively,

If the data is received, we set it to the data variable. If not, the error message will be set to the error variable.

Loader is initialized as false. When the API is called, it is set to true so that a loader component can be loaded in the view.

At the end of the API call, this loader is set back to false by using the finally block.



import { useEffect, useState } from "react"
import axios from "axios"


export default function useFetch(url){

    const [data,setData] = useState(null)
    const [error,setError] = useState(null)
    const [loading,setLoading] = useState(false)

    useEffect(() => {
        (
            async function(){
                try{
                    setLoading(true)
                    const response = await axios.get(url)
                    setData(response.data)
                }catch(err){
                    setError(err)
                }finally{
                    setLoading(false)
                }
            }
        )()
    }, [url])

    return { data, error, loading }

}

The only dependency we're going to put in the useEffect dependency array is Url because if the Url changes, we have to request new data.

That's basically for useEffect. Now we return the states that are created inside the hook as an object.

Using Custom Hook in the Component

Inside the component, import the useFetch hook from its javascript file. After importing, call the hook with the API Url as an argument.

Fetching data using custom Hook



export function Home(){
    const {data,loading,error} = useFetch('https://localhost:4000')

        if(error){
           console.log(error)
        }

    return(
        {loading && <div>Loading...</div>}
        {data && <div>{data.map(item => <div>{item}</div>)}</div>}
    )
}

In addition to this, we can also customize the hook by making it return any function that can be called from the component.

For example, we can create a refetch() function inside the hooks that re-fetches the API when called.

This function can be returned from the hook and can be called from the component.