DEV Community: Rajat Gupta

React Router: Basics

Rajat Gupta — Wed, 23 Mar 2022 06:06:17 +0000

Let's get the party started.

If you have not used react-router before most probably you are using server-side routing. If you don't know what's server side routing, see the below example:

As you could see there is a splash of the white screen when we move to different pages. This is because every time the user clicks on a link, the request goes to the server and the requested page is sent by the server to the client machine. This process takes some time and is called server-side rendering.

When we use React Router there is no splash of the white screen since the pages we need are already on the client machine and this is called Single Page Application (SPA). SPA is like your mobile or desktop app. It has a very native feeling, It feels super fast and gives the best user experience. Most importantly SPA for browsers can only be written in JavaScript. That's why you guys are in such high demand 😉.

now, let's move to code: Our app will have 3 pages namely Home, Product, and Cart (in pages folder). Now, let's see the initial code inside index.js, App.js, and the 3 pages.

//index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
      <App />
  </StrictMode>,
  rootElement
);

//App.js

import Home from "./pages/Home";
import Product from "./pages/Product";
import Cart from "./pages/Cart";

export default function App() {
  return (
    <div className="App">

    </div>
  );
}

//pages/Home.js

export function Home() {
  return (
    <div>
      <p>Welcome to the home page.</p>
    </div>
  );
}

//pages/Product.js

export function Products() {
  return (
    <div>
      <p>Check out the awesome our awesome products.</p>
    </div>
  );
}

//pages/Cart.js

export function Cart() {
  return (
    <div>
      <p>I am the cart. Checkout now!</p>
    </div>
  );
}

Now, In order to use react-router, you have to add react-router-dom dependency. You can install it by running the below command in command prompt.

$ npm install react-router-dom@6

Now, let's apply react-router to index.js and App.js:

//index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
  rootElement
);

Above, wee did 3 things, just 3 no big deal.

added React Router Dom as dependency.
imported { BrowserRouter } from "react-router-dom".
wrapped our inside , so that we could perform all browser operations on our App. (similar to ContextProvider: ignore, if you don't know about it)

//App.js

import { Home } from "./pages/Home";
import { Product } from "./pages/Product";
import { Cart } from "./pages/Cart";
import { Route, Routes } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product-page" element={<Product />} />
        <Route path="/awesome-cart" element={<Cart />} />
      </Routes>
    </div>
  );
}

What we did in App.js

Imported Home, Product and Cart page.
Imported { Route, Routes } from "react-router-dom";
Gave 3 Route inside the Routes tag.

a)<Route path="/" element={<Home />} /> means that whenever in our URL we add "/", the page (or component) will be rendered.

b) <Route path="/product-page" element={<Product />} /> means that whenever we add "/product-page" to our URL, the Product page will be rendered.

c) and similarly <Route path="/awesome-cart" element={<Cart />} /> means that whenever we add "/awesome-cart" to the URL, the Cart page will be rendered.

Let's see the above code in action:

You can see above that as we assign different paths (from App.js), different page (or component) is being rendered.

Now one thing that many you might be thinking "but the user won't edit the URL manually", he or she will prefer clicking on a link to get to any page. So, let's solve this problem.

//App.js


import { Home } from "./pages/Home";
import { Product } from "./pages/Product";
import { Cart } from "./pages/Cart";
import { Route, Routes, Link } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product-page" element={<Product />} />
        <Route path="/awesome-cart" element={<Cart />} />
      </Routes>

      <Link to="/">Home</Link>
      <Link to="/product-page">Product</Link>
      <Link to="/awesome-cart">Cart</Link>
    </div>
  );
}

Did 2 changes in the App.js code.

imported {Link} from "react-router-dom".
added 3 Link tags.

Here's what will happen: As soon as the user clicks on Product, the Link tag will take him to the URL (/product-page) given in the "to" attribute, and in the Route tag above, we can see that this path is corresponding to the {<Product/>} element and hence, the Product page will be rendered.

A similar process will ensue after clicking on Home and Cart as well. See the below gif:

(You can style the above page)

One more thing: we can give a link inside another link. Let's give the Cart link inside of the Product page.

//App.js

import { Home } from "./pages/Home";
import { Product } from "./pages/Product";
import { Cart } from "./pages/Cart";
import { Route, Routes, Link } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product-page" element={<Product />} />
        <Route path="/awesome-cart" element={<Cart />} />
      </Routes>

      <Link to="/">Home</Link>
      <Link to="/product-page">Product</Link>
    </div>
  );
}

//pages/Product.js

import { Link } from "react-router-dom";

export function Product() {
  return (
    <div>
      <p>Check out the awesome our awesome products.</p>
      <Link to="/awesome-cart">Cart</Link>
    </div>
  );
}

That's all for this blog. I am gonna teach the remaining react-router topics in the ensuing blogs. To get notified of the same, subscribe to my newsletter here.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write 3 articles related to web development every single week. Subscribe to my newsletter (It's free) here, if you are learning the same.

Twitter: @therajatg

PS: show some love by giving a thumbs up.

Originally published at https://rajatgupta.net/

promises and async-await in JavaScript

Rajat Gupta — Wed, 16 Mar 2022 18:36:34 +0000

Let's see what MDN has to say:

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

A Promise can be in one of the following states:

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

JavaScript is a synchronous and single-threaded language. It basically means that it does one task at a time. The javascript code runs from top to bottom and if there is a code block that is doing some complex calculations then all the code below that block will not run until the code block above has finished executing. To learn more about this, read my blog here: https://rajatgupta.net/javascript-single-threaded-and-synchronous.

We use callbacks with setTimeout to make JavaScript behave Asynchronously.
Here's an example of how setTimeout makes JS async.

setTimeout(()=>console.log("Welcome to my blog, Elon"), 5000)
console.log(2 + 2);

Result:

4
Welcome to my blog, Elon

As you can see above that although the welcome statement is written first, it is printed after the second statement (2+2 = 4). Hence, we just made the code asynchronous.

Now, the problem with using callbacks is the Callback hell.

getA(getB(getC))

getA(){
    doX();
    doY()
    getB(data => {
            doOne();
            doTwo();
            getC(cData => {
                    doEleven()
                    doTwelve();
                }
            }
}

We call it ☝️ callback hell because the code is not easy to follow and soon becomes messy (after adding a few more functions).

Here Promise comes into the picture.

Let's understand promises:
In real life, the promise is mostly used when we need to get some data or response from the network. promise in JS is the same as promise in real life.

I promise you that you'll understand promises after reading this blog. Now 3 things can happen:

promise is resolved: You understood promises in JS.
promise is rejected: I wasted your time, you still did not understand promises.
Promise is pending: you are still reading.

Syntax of promise:

callAPromise().then(successHandler).catch(rejectHandler)

First, we call a promise. If the promise is resolved then whatever is inside .then will run. However, if the promise is rejected then whatever is inside .catch will run. Yaa! It's that simple.

promises are really great when we wanna do something in the background for example downloading an image from a different server and meanwhile doing whatever we are doing instead of waiting for the image download to finish and if the image downloading fails we can catch it and give an error message to the user.

Now, let us do some question based on the below promise:

function fakeFetch(msg, shouldReject) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldReject) {
        reject(`error from server: ${msg}`)
      }
      resolve(`from server: ${msg}`)
    }, 3000)
  })
}

Note: You don't have to write your own promise at this stage, just understand it ☝️ and do the questions given below (in browser console) as you read.

Question 1: use the fakeFetch() to get data and show on success?

fakeFetch('I am awesome').then(response => console.log(response).catch(response => console.log("This won't run")))

Result:

Promise {<pending>}[[Prototype]]
from server: I am awesome

Here is what's happening:

1 .then and .catch are the methods of Promise.

When we don't pass the 2nd parameter in the fakeFetch, the promise is resolved else it gets rejected.
As soon as we call fakeFetch('I am awesome'), the I am awesome is passed to the msg parameter of fakeFetch. However, nothing will be passed to the shouldReject parameter of fakeFectch.
The fakeFetch will return a promise after 3 seconds as we have set the delay of 3 seconds. Hence, for the initial 3 seconds, the promise will be in the pending state.
but what do I mean when I say a promise will be returned: I mean that since there is no shouldReject, the promise will be resolved, and from server: ${msg} will be passed as a parameter (response) inside the .then method and then we can do whatever we want with this parameter (response). Here I just printed it in the console.

Question 2: Call fakeFetch(msg, true) to get a rejected promise. Handle the error with the error handler. Show a message using console.error for errors?

fakeFetch('I am awesome', 'anything').then(response => console.log(response).catch(response => console.error(response))

Result:

In the 2nd question ☝️, the promise will be rejected as we have passed the value to the shouldReject parameter and hence the catch part will run. As far as console.error is concerned, I used it instead of console.log just to show the error in red.

Question 3: Create a function getServerResponseLength(msg) This function will use fakeFetch() internally with the message and return the length of the response received by the server?

function getServerResponseLength(msg){
    fakeFetch(msg).then(response => console.log(response.length))
}

getServerResponseLength('I am awesome');


Result: 25

As I told you before that we can do anything with the response we get from the server and here instead of printing the response, we calculated its length.

Question 4: Write a function syncCallsToServer(msg1, msg2) which will take two messages and call fakeFetch() with the second message only when the first message has returned from the server.

function syncCallsToServer(msg1, msg2){
    fakeFetch(msg1).then(response1 => fakeFetch(msg2).then(response2 => console.log({response1, response2})))
}

syncCallsToServer('I am awesome', 'react is also awesome');



Result:
{response1: 'from server: I am awesome', response2: 'from server: react is also awesome'}

Just read the above code again and you'll understand what's happening. In case you don't read this => This is nesting. In the syncCallsToServer function we passed 2 parameters, msg1 and msg2. However in the fakeFetch we only passed msg1 and since there is no 2nd argument to pass inside shouldReject, the promise will be resolved then we'll pass the msg2 in fakeFetch and then finally we'll print both the responses.

In the above code, it will take 6 seconds to get the result (3 seconds for each fakeFetch() call). However we can also do the same thing in parallel and it will take only 3 seconds to get both the results printed. See below.

function syncCallsToServer(msg1, msg2){
    fakeFetch(msg1).then(response1 => console.log({response1})
    fakeFetch(msg2).then(response2 => console.log({response2})
}

syncCallsToServer('I am awesome', 'react is also awesome');



Result:
{response1: 'from server: I am awesome'} 
{response2: 'from server: react is also awesome'}

The above responses will take only 3 seconds (parallel call)

Async-Await:

Although this is just syntactic sugar and nothing else, I recommend using this.

Let's see the syntax in terms of arrow function:

// Doing this in es6 arrow function would be

const printDataFromServer = async () => {
    try {
        const serverData = await anyPromiseWhichWillReturnData();
      console.log(serverData);
    } catch (err) {
     console.error(err)
    }
}

In arrow function async keyword is used before the (). While in normal functions, it is used before the function keyword itself. Let's see the async-await syntax with normal function.

async function printDataFromServer() {
  const serverData = await anyPromiseWhichWillReturnData()
  console.log(serverData);
}

Note: Always take care of error handling.

Now, let's do some questions.

Question 5: Call fakeFetch() with some msg and use await to get the data and then print it.

const testing = async (msg) => {
    try{
        const serverData = await fakeFetch(msg);
        console.log(serverData);
    }
    catch (err){
        console.log(err)
    }
}

testing('I am awesome')
Promise {<pending>}
from server: I am awesome

In the above code, await is saying that until the promise (fakeFetch) is returned don't execute the next line. rest I think, you can understand.

Question 6: Write a function syncCallsToServer(msg1, msg2) which will take two messages and call fakeFetch() with the second message only when the first message has returned from the server. use async-await for this purpose.

    const testing = async (msg1, msg2) => {
        try{
            const serverDataOne = await fakeFetch(msg1);
            const serverDataTwo = await fakeFetch(msg2);   
            console.log({serverDataOne, serverDataTwo})  
        }
        catch (err){
            console.log(err)
        }

    }

testing('I am awesome', 'react is also awesome');

Promise {<pending>}
{serverDataOne: 'from server: I am awesome', serverDataTwo: 'from server: react is also awesome'}

Although we can also do the above question without using try-catch. However, I recommend you to always use try-catch.

If you wanna read more about async-await, read it here: https://javascript.info/async-await.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write 3 articles related to web development every single week. Subscribe to my newsletter (It's free) here[https://www.getrevue.co/profile/therajatg], if you are learning the same.

Twitter: @therajatg

PS: show some love by giving a thumbs up.

Have an awesome day ahead 😀!

Originally published at: rajatgupta.net

useReducer in react: Everything you need to know

Rajat Gupta — Tue, 15 Mar 2022 03:49:11 +0000

prerequisites:

Grasp of reduce method in JavaScript and
useState in react

For reduce method, I recommend you to read my blog here: https://rajatgupta.net/reduce-method-in-javascript

Ok, Let's get started.

The useReducer Hook is similar to the useState Hook. We use useReducer because managing multiple states (like more than 3) using useStates is a hassle. that's all.

Since talk is cheap, let me show you the code.
Let's make a simple counter to increment the value by 1 with useState, then I'll show you how to do it with useReduce and some more complex examples.

import "./styles.css";
import {useState} from 'react';

export default function App() {

  const [counter, setCounter] = useState(0);

  return (
    <div className="App">
     <h1>{counter}</h1>
     <button onClick={() => setCounter(counter+1)}>+</button>
    </div>
  );
}

Now, let me show you how to do it with useReducer. Just see the code:

import "./styles.css";
import {useReducer} from 'react';

export default function App() {

function reducerFunc(state, action){
  return state+1;
}

  // Syntax:
 //const [state, dispatch] = useReduce(theReducerFunction, initialValueOfState);

  const [state, dispatch] = useReducer(reducerFunc, 0);

  return (
    <div className="App">
     <h1>{state}</h1>
     <button onClick={() => dispatch(1)}>+</button>
    </div>
  );
}

Done!
Now, let's hear the conversation between Ravi and Rajat to understand how the above code is working:

Rajat: As soon as the user will click on the "+" button, the dispatch function will be called and yes dispatch is a function.

Ravi: Ok, I get it but what is the role of dispatch.

Rajat: Listen very carefully, this is the most important part. You can see the dispatch function in the useReducer syntax and as soon as the dispatch is called, it will further call the reducerFunc.

Ravi: ok, but the reducerFunc takes 2 parameters, where we'll get them.

Rajat: Good question man. The reducerFunc will automatically be called with 2 arguments. The 1st one is 0 which you can see as the 2nd parameter inside useReducer() (useReducer(reducerFunc, 0)) and it goes to the state parameter in reducerFunc and the 2nd one is 1 which is being picked up from onClick (<button onClick={() => dispatch(1)}>+</button>) and goes to the action parameter in reducerFunc.

Ravi: That's too much information to wrap my head around.

Rajat: No, it's not read it again and one more thing, the parameters you see in the reducerFunc that is state and action will behave similarly to accumulator and initialValue that we provide in the reduce method in JavaScript because the reducerFunc will behave like the function that we pass inside the reduce method in JavaScript that used to return the accumulator.

does the above conversation made sense?
If it still does not make much sense don't worry, let's move on to the next example, and make a simple counter but this time there will be 2 states, one to increment and another one to decrement the counter value. The increment counter will increment the counter value by 40 and the decrement counter will decrease it by 10.

import "./styles.css";
import {useState} from 'react';

export default function App() {

  const [counter, setCounter] = useState(0);

  return (
    <div className="App">
     <h1>{counter}</h1>
     <button onClick={() => setCounter(counter+40)}>+</button>

     <button onClick={() => setCounter(counter-10)}>-</button>
    </div>
  );
}

Now, let's make it using useReducer.

import "./styles.css";
import {useReducer} from 'react';

export default function App() {

function reducerFunc(state, action){
  switch(action.type){
    case 'INCREMENT':
      return {...state, counter: state.counter + action.payload}
    case 'DECREMENT':
      return {...state, counter: state.counter - action.payload}
    default:
      return state;
  }
}

  const [state, dispatch] = useReducer(reducerFunc,{counter: 0});

  return (
    <div className="App">
     <h1>{state.counter}</h1>
     <button onClick={() => dispatch({type: 'INCREMENT', payload: 40})}>+</button>

     <button onClick={() => dispatch({type: 'DECREMENT', payload: 10})}>-</button>
    </div>
  );
}

Again, let's hear the conversation between Ravi and Rajat.

Ravi: I understood what you told about the previous code but here you did some changes such as instead of passing a value such as 1 you passed an object in dispatch in the onClick statement. why?

Rajat: Remember, I told you at the start of this blog that useReducer is used to manage multiple states.

Ravi: yes

Rajat: In order to manage multiple states with a single useReducer, we need to differentiate between the states and based on type we do that.

Rajat: Let me tell you what's happening in the above code. As soon as the user clicks any button (- or +), dispatch is called which in turn calls the reducerFunc with state and {counter: 0} as argument and state and action as the corresponding parameters. Further, as I told you before, imagine state and action as accumulator and current value respectively (that we used to use in simple reduce in JavaScript).

Ravi: Ok so the reducerFunc is called what is happening inside reducerFunc.

Rajat: Well, that is simple.

Rajat: If user click +, the objects {counter: 0} and {type: 'INCREMENT', payload: 40} are passed as state and action respectively. then, we see the value of action.type and since it is 'INCREMENT', the first case runs and '{...state, counter: state.counter + action.payload}' is returned in which state.counter is the previous value of counter and action.payload is 40.
(If you do not know what is ...state, read my blog about spread operator here: https://rajatgupta.net/spread-syntax-in-javascript)

Rajat: similarly, the 'DECREMENT' case is executed when the user clicks on -.

Ravi: and what is the {state.counter} that you are rendering.

Rajat: Think logically bro, the value of state is getting updated and by state I mean the number in {counter: number} is getting updated, and in order to access this number we have to do state.counter.

Ravi: Awesome, I understood. Just need to practice this problem once on my own and I recommend the ones reading this blog to do the same and then come back to read further.

Many of you must be thinking that why all this hassle when we can use useState. This is because in the above ☝️ example we are managing only 2 states, but what if we have a complex app and there are 10 states to manage then useState will be a hassle. As a rule of thumb, I suggest using useReducer when there are more than 3 states to manage.

Ok, now let's get to the next example and make this:

On clicking Add to Cart button, items should be added in the cart, and Items in Cart and Total Price should increase. However, on clicking Remove from Cart button, the opposite should happen.

I expect you try this on your own using useReducer and give this problem at least 30 minutes and after that if you can't figure it out then jump to below code.

import { useReducer } from "react";
import "./styles.css";

const itemsInCart = [
  {
    id: 1,
    name: "kala chasma",
    price: 1000
  },
  {
    id: 2,
    name: "rumali roti",
    price: 500
  },
  {
    id: 3,
    name: "jalebi",
    price: 50
  },
  {
    id: 4,
    name: "joota",
    price: 10000
  }
];

export default function App() {
  const [state, dispatch] = useReducer(
    (state, action) => {
      switch (action.type) {
        case "ADD_TO_CART":
          return {
            ...state,
            totalItems: state.totalItems + 1,
            totalPrice: state.totalPrice + action.payload
          };
        case "REMOVE_FROM_CART":
          return {
            ...state,
            totalItems: state.totalItems - 1,
            totalPrice: state.totalPrice - action.payload
          };
        default:
          return { ...state };
      }
    },
    { totalItems: 0, totalPrice: 0 }
  );

  return (
    <div className="App">
      <h2>Items in Cart: {state.totalItems}</h2>
      <h2>Total Price: {state.totalPrice}</h2>
      <hr />
      {itemsInCart.map(({ name, price }) => (
        <div>
          <h3>
            Product: {name} || Price: {price}
          </h3>
          <button
            onClick={() => dispatch({ type: "ADD_TO_CART", payload: price })}
          >
            Add to Cart
          </button>
          <button
            onClick={() =>
              dispatch({ type: "REMOVE_FROM_CART", payload: price })
            }
          >
            Remove from Cart
          </button>
        </div>
      ))}
    </div>
  );
}

I wanna end this blog here as the logic of the above code is the same as the example before it but it does not feel complete without explaining the above code. So, here we go.

customer clicks on the Add to Cart button.
As soon as the click happens, the dispatch function is called which in turn calls the function defined inside useReducer (here I did not define the reducerFunc separately and used the arrow function inside useReducer as this way I like the code more) which in turn calls the function defined inside useReducer with state and action as a parameter where the state is { totalItems: 0, totalPrice: 0 } and action is { type: "ADD_TO_CART", payload: price }.

From the above assignment, you can get the values of state.totalItems, state.totalPrice and action.payload which are further used to update the value of state after every click. Finally, we render state.totalItems and state.totalPrice.

Now wrestle with the above code fro sometime and you'll get a better understanding.

Just one more thing: The names we gave that are state, action, type, payload, and dispatch are not keywords. You can give any name you want. It's just out of the convention that we used these names (and I like conventions since I don't have to think about trivial stuff and It brings people on the same page in terms of understanding the code.)

If you like this blog and have some confusion about useEffect, or any other react hooks then read my blogs here: https://rajatgupta.net/.

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write 3 articles every week related to web development. Hence, you should subscribe to my newsletter if you are learning web development

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!

useEffect in react: Everything you need to know

Rajat Gupta — Wed, 09 Mar 2022 18:03:00 +0000

Only understand this: We use useEffect to do something after the view has been rendered.

Now, let's get to code and make a simple counter to understand useEffect:

import {useState, useEffect} from 'react'

export default function App() {
  const [counter, setCounter] = useState(0)

  useEffect(() => {
    console.log('from useEffect...', counter)
  })

  function incrementClickHandler() {
    setCounter(counter+1)
    console.log("Inside incrementClickHandler.....", counter)
  }

  console.log('before render...', counter)

  return (
    <div className='App'>
      <h1>{counter} </h1>
      <button onClick={incrementClickHandler}>Increment</button>
    </div>
  )
}

Here's the console result after the initial render (that is the increment button still not clicked):

It does not matter where the code or function is written, this will be the flow 👇:

The HTML inside the return will be rendered for the first time. However, just before the render

console.log('before render...', counter)

will run and the function inside of useEffect will run immediately after the view has been rendered. (The incrementClickHandler function will not run since we have not clicked on the increment button yet).

Here's what happens when we click the increment button for the first time:

Below 👇 is the flow when the increment button is clicked:

Step 1: While executing the HTML part, we encounter an onClick and as a result the incrementClickHandler function will be called.

Step 2: Note that there is a state update inside the incrementClickHandler function. However, the console.log following the state update is printing the previous state. This is because whenever a state is updated inside a function, the actual state update can be used only outside the function and the whole App will run again with the new state after exiting the incrementClickHandler function.

Step 3: Although the whole App is running again the useEffect and the function inside which state is updated will not be executed.

Step 4: Since the whole App is running,

console.log('before render...', counter)

will be executed.

Step 5: Now, the view will be rendered and number above the increment button will change from 0 to 1.

Step 6. Now, that the view has been rendered useEffect will run.

I explained all the above code to make you understand that the useEffect runs after the view has been rendered.

Now, you may ask: What's the point of running the function inside useState after rendering the view.

here's why? because user only cares about the view, he does not care about your console.log or localStorage (or any other side effect for that matter) that is why you should change state in the backend at last and view should reflect the state immidiately. If there is some process between state change and the render (view), then that process will always slow down the render and degrade the user experience.

Now that you have basic understanding of useEffect hook, let's understand the dependencies.

Dependency Array

The dependency array is the second optional argument in the useEffect function.
As the name implies, it is an array of dependencies that, when changed will run the function inside useEffect accordingly.
See the below picture:

Let's understand the above table by the below example:

import "./styles.css";
import { useEffect, useState } from 'react'

export default function App() {

  const [resource, setResource] = useState('');
  const [input, setInput] = useState('');

  useEffect(() => {console.log('See The Magic')})

  return (
    <div className="App">
      <h3>Input Element</h3>
      <input onChange={e => setInput(e.target.value)}></input>

      <h3>Buttons</h3>
      <button onClick={() => setResource('Users')}>Users</button>
      <button onClick={() => setResource('Posts')}>Posts</button>
      <button onClick={() => setResource('Comments')}>Comments</button>
    </div>
  );
}

In the dependency array only state variables are passed and the function inside useEffect will run only when the provided state in array changes.
We'll use the above example to understand all the dependencies (array values) given in the above table.

Case 1: Array Value: No Value Passed

This is the default case and therefore the function inside useEffect will run after every render or after every state change.

useEffect(() => {console.log('See The Magic')})

Case 2: Array Value: Empty array passed

In the definition, I told you that the dependency array is the second optional argument. Therefore, for this case we'll add an empty array ([]) in useEffect and everything else remains the same.

useEffect(() => {console.log('See The Magic')}, [])

Since our array is empty and no state is passed inside it. The function inside useEffect will run only once (at the time initial render).

Case 3: Array Value: [State Variable 1]

In the definition, I told you that the dependency array is the second optional argument. Therefore, for this case we'll add an array with a single state variable in useEffect and see what happens.

useEffect(() => {console.log('See The Magic')}, [resource])

Since in our array we have passed the value resource. Therefore, The function inside useEffect will run only when the value of resource will change.

Note that the function inside useEffect is not running when we enter in the input field, although there is a state change. This is because we only passed the resource state in the dependency array.

Array Value: [State Variable 2]

Now, instead of resource state, let's pass the input state and see what happens.

useEffect(() => {console.log('See The Magic')}, [input])

As expected, function inside useEffect is not running when we clicking on the buttons. However, it is running when we type in the input box.
Since we passed input state in the dependency array, the useEffect function is dependent only on the input state.

### Case 4: Array Value: [stateVariable1, stateVariable2]
For this case we'll pass both the state variables ([resource, input]) in useEffect and see what happens.

useEffect(() => {console.log('See The Magic')}, [resource, input])

You can see above, that useEffect is responding if any of the 2 states provided changes. However, you may notice that it's behaving exactly like the very first condition where no dependency array is passed. This is because we have only 2 states and we passed both of them in the dependency array. If we had more than 2 states, this may not be the case.

One more thing to note is that the in dependecy array only state variables are passed )(no normal variables).

That's all folks, I hope you understood useEffect.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one articles related to web-development (mainly react).

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!

Originally published at https://rajatgupta.net/useeffect-in-react-everything-you-need-to-know

Local Storage and Session Storage (JavaScript)

Rajat Gupta — Tue, 01 Mar 2022 17:20:09 +0000

No, I won't tell you any definition. Just get on the train and by the end of this blog, you'll have a clear understanding of local storage and session storage.

Inspect whatever page you are on.
Click on Application.
Click on storage and you'll see local storage and session storage right there. Both local storage and session storage store key-value pairs.

The major difference between local storage and session storage is that after closing the browser the key-value pairs stored in session storage get lost.

Now, let's understand how to operate on local storage with some examples.

Example1: give key-value pair to the local storage.

localStorage.setItem(Name1, 'Rajat');

Let's see "typeof" of the local storage:

In the above example, we saw how to set key-value pairs in the local storage. Now, let's understand how to get items from the local storage.

Example 2:

let name = localStorage.getItem('Name1')
console.log(name)

Result: Rajat

Now, let's try to get some value that did not exist.

Example3:

let name = localStorage.getItem('Name2')
console.log(name)

Result: null

The result is null if you try to fetch something from local storage that did not exist.

Many times we want to store arrays in local storage since arrays are easy to work with (we have so many inbuilt methods for arrays). However, one limitation of local storage is that it stores the array as a string. let's see what I mean:

  localStorage.setItem('Name1', 'Rajat');

  let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
  localStorage.setItem('impArray', fruitsArray);

In order to overcome this issue ☝️, we use JSON.stringify. See it in action below:

Example 4: storing array in local storage:

  localStorage.setItem('Name1', 'Rajat');

  let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
  localStorage.setItem('impArray', JSON.stringify(fruitsArray));

Example 5: getting array from local storage.

 console.log(localStorage.getItem('impArray'));

The above result may look like an array but we are getting string from local storage instead of array. let me prove it.

 console.log(typeof localStorage.getItem('impArray'));

Therefore, in order to get an array from local storage, we use JSON.parse. See below.

Example 6: get an array from the local storage?

 console.log(JSON.parse(localStorage.getItem('impArray')));

Hence, we use:

JSON.stringify: To set array as the value in local storage.
JSON.parse: To get an array from local storage.

Example 7: Clear local storage.

  localStorage.setItem('Name1', 'Rajat');

  let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
  localStorage.setItem('impArray', JSON.stringify(fruitsArray));

  localStorage.clear()

Hence, we can clear localStorage using


.<br/>

Example 8: Remove only the 'name1' key-value pair from local storage.


```javascript
  localStorage.setItem('Name1', 'Rajat');

  let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
  localStorage.setItem('impArray', JSON.stringify(fruitsArray));

  localStorage.removeItem('Name1');

As you can see above, In order to remove a particular key-value pair we use


. 

That's all about local storage. <br/>
We run similar operations in session storage, the only difference being we use session storage in place of local storage:

sessionStorage.setItem(Name1, 'Rajat');
sessionStorage.getItem(Name1, 'Rajat');
sessionStorage.setItem('impArray', JSON.stringify(fruitsArray));
console.log(JSON.parse(sessionStorage.getItem('impArray')));
sessionStorage.clear()
sessionStorage.removeItem('Name1'); ```

Let me reiterate: The only major difference between local storage and session storage is as soon as we close the browser, we lose whatever is saved in session storage. However, this is not the case with local storage.

and finally, let's see what MDN has to say:

The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

The read-only sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!

PropTypes in react (JS)

Rajat Gupta — Sun, 27 Feb 2022 08:08:29 +0000

Let's see what reactjs.org has to say:

As your app grows, you can catch a lot of bugs with typechecking. React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special propTypes property:

Here we'll see 3 main propTypes properties and I promise you'll understand:

1. props with different validators
2. Default prop values
3. props with isRequired

Since you are here I guess you have a basic idea about props, if you don't first read my previous blog here: https://rajatgupta.net/what-the-heck-are-props-in-react.

We'll understand PropTypes with the help of the navbar component. See below:

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar logo="Kitab" anyName="login"/>
    </div>
  );
}

//Navbar.js

import React from "react";
import './App.css'

export default function Navbar(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">{props.anyName}</a></span>
        </div>
      </nav>
    </div>
  );
}

In the above example, we have imported the navbar component in our App.js and changed 2 variables (logo and anyName) in the navbar component with the help of props.

1. props with different validators:

In the below code I have included PropTypes, have a quick glance at the below code and move on to what I have to say immediately following it.

//Navbar.js

import React from "react";
import PropTypes from 'prop-types'
import './App.css'

export default function Navbar(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">{props.anyName}</a></span>
        </div>
      </nav>
    </div>
  );
}

Navbar.propTypes = {logo: PropTypes.string}

In the above code for Navbar.js we have done 2 changes:

Included import PropTypes from 'prop-types' in order to use PropTypes.
Included Navbar.propTypes = {logo: PropTypes.string} so that whatever the logo we define in App.js will always be a string type.

Therefore, instead of (logo="Kitab"), if I do (logo=9) in App.js, it will result in an error (see the error in chrome console)

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar logo={9} anyName="login"/>
    </div>
  );
}

Read the error☝️

prop type can be a string (PropTypes.string), number (PropTypes.number), boolean (PropTypes.bool), function (PropTypes.func), object ( PropTypes.object) or array (PropTypes.array).

Now you may think that why all this typechecking, I'll take care and will send only string but you are saying this now, however, as your program will grow in size and compexity you may send an object and at that time the problem will be very hard to detect.

2. Default prop values

Let's shoot directly to the example:

//Navbar.js

import React from "react";
import PropTypes from 'prop-types'
import './App.css'

export default function Navbar(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">{props.anyName}</a></span>
        </div>
      </nav>
    </div>
  );
}

Navbar.propTypes = {logo: PropTypes.string}

Navbar.defaultProps = {
  logo: "Enter logo",
  anyText: "3rd link"
}

In the above code we have added

Navbar.defaultProps = {
  logo: "Enter logo",
  anyName: "3rd link"
}

at the bottom.

Hmmm... I could not see any changes happening. This is because we have given defaultProps in Navbar.js and default props will only be effective when we forget to pass any value to props (In this case we have already passed values to logo and anyName in App.js).

Let's remove the values passed and see what happens:

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar/>
    </div>
  );
}

You can see below that the default values are now effective👇.

Hence, whenever I forget to pass values, the browser will assign default values.

3. isRequired

When we assign isRequired to a prop that prop must be assigned a value, otherwise we'll get an error.

Now, let's see the below example to understand how isRequired works.

//Navbar.js

import React from "react";
import PropTypes from 'prop-types'
import './App.css'

export default function Navbar(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="https://github.com/therajatg/parts">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">{props.anyName}</a></span>
        </div>
      </nav>
    </div>
  );
}

Navbar.propTypes = {logo: PropTypes.string.isRequired,
                    anyName: PropTypes.isRequired};

Navbar.defaultProps = {
  logo: "Enter logo",
  anyName: "3rd link"
}

☝️Hmmmmm.... nothing happened. This is because we have already passed default props. Hence, the value has already been passed to the props.

Let's remove the default props and see what happens:

//Navbar.js

import React from "react";
import PropTypes from 'prop-types'
import './App.css'

export default function Navbar(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="https://github.com/therajatg/parts">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">{props.anyName}</a></span>
        </div>
      </nav>
    </div>
  );
}

Navbar.propTypes = {logo: PropTypes.string.isRequired,
                    anyName: PropTypes.isRequired};

See the error.☝️

Hence, if you think some prop value is important to assign use isRequired for that prop.

I recommend you to use Default prop values and props with isRequired frequently in order to avoid any issues in your code (when it becomes complex).

Now I think I have fulfilled my promise and you understand props with different validators, Default prop values, props with isRequired. If you don't tell me in the comments section and I'll try to explain it again (by editing).

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

*Have an awesome day ahead 😀!

What the heck are props in react

Rajat Gupta — Fri, 25 Feb 2022 15:46:19 +0000

Although we can make web apps using JavaScript. One of the reasons we are using react over JS is component reusability.

What is component reusability: make a component once and use it again and again for different websites (or projects). for example, we can make a navigation bar once and can reuse it for our blogging website, e-commerce website, social media app etc.

props help us to do just that ☝️.

In this blog, we'll understand how prop works by

first making a Navbar component in Navbar.js.
then Importing it in App.js

(Import-Export is quite straightforward but if you don't know how it works click here.)

(I will be making the nav component from my own component library, check it out here: https://parts-builder.netlify.app/).

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar/>
    </div>
  );
}

//Navigation.js

import React from "react";
import './App.css'

export default function App() {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">Logo</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">Services</a></span>
        </div>
      </nav>
    </div>
  );
}

Now, let's I wanna make a website which sells books (I'll name it "Kitab") and wanna reuse the above navbar component.

Sure, I can do that, what's the harm

Only 2 problems:

I wanna use my own logo.
I wanna give an option to login instead of services.

Here comes our superhero prop to enable us to do just that.

Let's change the logo first:

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar logo="Kitab"/>
    </div>
  );
}

//Navigation.js

import React from "react";
import './App.css'

export default function App(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">Services</a></span>
        </div>
      </nav>
    </div>
  );
}

Hell yaa! we did it.

but what changed: 3 things

See this "Navbar logo="Kitab"/" in App.js
"props" given as parameter in Navigation.js
Instead of the word "logo" we used {props.logo} in Navigation.js

Similarly, let's replace the "services" link with the "login" link.

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar logo="Kitab" anyName="login"/>
    </div>
  );
}

//Navigation.js

import React from "react";
import './App.css'

export default function App(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">{props.anyName}</a></span>
        </div>
      </nav>
    </div>
  );
}

I hope you understood how props enable us to reuse the same component again and again.

Note that instead of a string, I could have passed an object, a link, an array, or anything else for that matter.

Now, that you have understood what prop is, you should know what PropTypes are and how they work. To know this read my next blog here (will publish tomorrow).

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!

How to run react in VSCode

Rajat Gupta — Wed, 23 Feb 2022 12:16:26 +0000

Till now I was practicing react on codesandbox. Since I am familiar with VSCode and its integration with git, I thought why not run react in VSCode and after figuring it out I thought to write a guide for fellow coders.

Hence, here it goes👇

Since you are here, I am assuming that you already have Visual Studio Code installed. If not then go to this link: https://code.visualstudio.com/download and install VSCode as per your system specification.
Now that you have installed vscode, it's time to install nodejs and npm. If you don't know what is npm, don't worry, just do what I say and you are good to go.
Go to this link: https://nodejs.org/en/download/ (google "nodejs download" and this will be the first link).

I am on windows hence I have downloaded the windows version. You can download as per the platform you are on. Just install the default settings, they are good enough (click next...next...and...next, you can read terms and conditions).
Now open the folder where you want to store the react files in VSCode.
Open terminal in VSCode and paste the below-mentioned command in the terminal and hit enter:

npx create-react-app my-app

Now wait and let the magic happen.<br/>
on a side note: Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. 
![3.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1645616689577/iGTfMubpg.PNG)

5. If the above command ran properly you can skip this step. However, if you got an error as shown below in the picture, the solution is to simply restart VS Code ( as this could be the result of installing Node.js while having VS Code open).
![6.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1645617901006/bCvRF_MGC.PNG)

6. The above step automatically created the template required for react in the my-app folder.
![4.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1645616850711/h_xTPJVzK.PNG)

7. Now go ahead and write some code in app.js (my-app/src/app.js).

8. To run the code, first, write the below command in the terminal to enter the my-app folder.

cd my-app

9. Now, write the below command to finally run your code:

npm start

10. Congrats, you have done it.
![5.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1645617574576/EpU-K_Rf7.PNG)
Now, you can just make and save changes in app.js and see those changes reflected in the browser.

That's all folks.

**If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.**

**I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..**

**If you love the article follow me on Twitter:** @therajatg

**If you are the Linkedin type, let's connect**: https://www.linkedin.com/in/therajatg/

**Have an awesome day ahead 😀!**

Sibling combinator in CSS

Rajat Gupta — Tue, 22 Feb 2022 14:53:59 +0000

There may be some confusion as what we are calling sibling. So, let's first get that out of the way. See the below code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sibling combinator</title>
</head>
<body>
    <div class="div1">
        <h2>1st Heading</h2>
    </div>
    <div class="div2">
        <p>Lorem ipsum text</p>
        <h2>2nd Heading</h2>
        <p>Lorem ipsum  text</p>
        <p>Lorem ipsum text</p>
    </div>
</body>
</html>

In the above code:

h2(1st heading) has no sibling (parent: .div1)

p, h2(2nd heading), p and p are siblings (parent: .div2)

classes div1 and div2 are siblings (parent: body)

There are 2 types of sibling combinators:

Adjacent sibling combinator
General sibling combinator

Let's first understand the Adjacent sibling combinator.

Here's what MDN has to say: The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

Let's code it out to understand better.

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sibling combinator</title>
    <style>
        h2 + p{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="div1">
        <h2>1st Heading</h2>
    </div>
    <div class="div2">
        <p>1st para</p>
        <h2>2nd Heading</h2>
        <p>2nd para/p>
        <p>3rd para</p>
    </div>
</body>
</html>

As you can see above, the 2nd para in div2 turned pink as it was immediately following the 2nd heading and both are siblings.

Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sibling combinator</title>
    <style>
        p + p{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="div1">
        <h2>1st Heading</h2>
    </div>
    <div class="div2">
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <h2>2nd Heading</h2>
    </div>

As you can see above, the 2nd para in div2 turned pink as it was immediately following the 1st para and both are siblings.

Example 3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sibling combinator</title>
    <style>
        p + p{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="div1">
        <h2>1st Heading</h2>
    </div>
    <div class="div2">
        <p>1st para</p>
        <h2>2nd Heading</h2>
        <p>2nd para</p>
    <div>

Can You guess why the 2nd paragraph does not turn pink?

Because in div2, the 2nd para is not immediately following the 1st para. There is an "h2" in between.

Now, let's move on to the general combinator.

Here's what MDN has to say: The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

Let's get to the best practice of understanding with an example.

Example 4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sibling combinator</title>
    <style>
        p + p{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="div1">
        <h2>1st Heading</h2>
    </div>
    <div class="div2">
        <p>1st para</p>
        <h2>Heading</h2>
        <p>2nd para</p>
        <h2>Heading</h2>
        <p>3rd para</p>
        <h2>Heading</h2>
        <p>4th para</p>

In the above code, it does not matter if there is "h2" in between. All the para's following the 1st para turned pink.

Although it might be obvious, still know this: In the above examples I used the element name as a selector but you can use any selector (class, id, etc.)

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!

Spread syntax in JavaScript

Rajat Gupta — Mon, 21 Feb 2022 03:26:25 +0000

Let's see what MDN has to say:

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Didn't understand this ☝️

Don't worry!

So, spread syntax is used to spread out the elements of an array (or object) and its syntax is 3 dots followed by array (or object) name. That's all you need to know. Now, let's understand more via below examples:

console.log(...[1, 2, 5, 7, 9]);
//Result: 1, 2, 5, 7, 9

//Hence,    ...[1, 2, 5, 7, 9] = 1, 2, 5, 7, 9

Example 1: spread out "BANANA" using spread.

console.log(..."BANANA");
Result: B A N A N A

Example 2: Make a new array combining the below arrays using spread.

const parentsArray = ['Tom', 'Jenny'];
const childrenArray = ['Nathan', 'Naveen', "Jerry"];

let familyArray = [...parentsArray, ...childrenArray];

console.log(familyArray)

Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry']

Example 3: Add 2 newborns in the above familyArray.

familyArray = [...parentsArray, 'Elon', ...childrenArray, 'Gary'];
console.log(familyArray)

Result: ['Tom', 'Jenny', 'Elon', 'Nathan', 'Naveen', 'Jerry', 'Gary']

Imp: In javascript, arrays and objects are reference data types. It means that whenever we assign an original array to a new variable, actually the address of the original array is assigned and if we make changes in the new array, the original array also gets changed. Let's understand what I mean by the below code:

let originalArray = ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry'];
let newArray = originalArray;

newArray.push("newBaby");

console.log(newArray);
//Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry', 'newBaby']

console.log(originalArray);
//Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry', 'newBaby']

You can see in the example above that our original array also gets changed. We can use spread syntax in order to avoid this from happening. See below 👇

let originalArray = ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry'];

let newArray = [...originalArray, 'newBaby'];

console.log(newArray)
//Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry', 'newBaby']

console.log(originalArray);
//Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry']

The spread syntax can also be used to pass an array (or object) to functions that normally require a list of many arguments. See the below code:

Example 4: Write a function to perform addition.

function sum(a, b, c, d){
      return a+b+c+d;
}

const numbersArray = [2, 5, 9, 6]

We wrote the function to add numbers. Now, there are 2 ways by which we can add all elements of the given array.

sum(numbersArray[0], numbersArray[1], numbersArray[2], numbersArray[3]);

// Alternatively, we can use spread 

sum(...numbersArray);

Whatever operations we performed on array using spread, can also be performed on an object. See the below examples (spread with objects):

Example 5: Merging 2 or more objects:

const personName = {'firstName': 'Elon', 'lastName': 'Musk'};
const personHobbies = {'company': 'spaceX', 'hobby': 'flyingRockets'};

const personsMerged = {...personName, ...personHobbies}
console.log(personsMerged);

//Result: {firstName: 'Elon', lastName: 'Musk', company: 'spaceX', hobby: 'flyingRockets'}

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web-development (yes, every single f*cking day). Follow me here if you are learning the same..

If you love the article follow me on twitter: @therajatg

If you are the linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!

rest parameter in javascript

Rajat Gupta — Sat, 19 Feb 2022 17:29:16 +0000

The rest parameter is introduced in ES6. It allows a function to accept an indefinite number of arguments as an array that is we can call a function with as many arguments as we want and the rest parameter will gather all these arguments into an array.

See the below example to understand how:

Example 1:

function testing(...numbers){
       console.log(numbers)
       console.log(numbers[0])
       console.log(numbers[2])
}

testing(2, 16, 7, 4)

//Result 1: [2, 16, 7, 4]
//Result 2: 2
//Result 3: 7

The syntax of the rest parameter is just 3 dots followed by the array name. In the above ☝️ example, we do not have to know how many arguments are there in order to define parameters. Rather, we can simply use the rest parameter. Using the rest parameter we can tackle an infinite number of arguments.

Let's see some more examples:

Example 2:

function testing(a, ...numbers){
       console.log(a)
       console.log(numbers)
}

testing(2, 16, 7, 4)

//Result 1: 2 
//Result 2: [16, 7, 4]

In the above example, we can see that the parameter "a" is assigned with 2, and the rest of the arguments are stored in the numbers array.

NOTE: The rest parameter must always be the last parameter. The below code will result in an error.
Example 3:

function testing(a, ...numbers, b){
       console.log(a)
       console.log(numbers)
       console.log(b)
}

testing(2, 16, 7, 4)

//Error: Uncaught SyntaxError: Rest parameter must be last formal parameter

Example 4: Write a function to sum all the arguments provided? Number of arguments are not known.

function sumAll(...args) {
  let sum = 0;

  for (let arg of args){
        sum += arg;
    }

  return sum;
}

console.log( sumAll(1) ); 
console.log( sumAll(1, 2) ); 
console.log( sumAll(1, 2, 3) ); 

//Result 1: 1
//Result 2: 3
//Result 3: 6

That's all folks. I'll teach spread syntax and destructuring tomorrow.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single f*cking day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!

reduce() method in javascript

Rajat Gupta — Fri, 18 Feb 2022 19:52:59 +0000

Let's see what MDN has to say:
The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise, the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

pretty intense ☝️.

Actually, this one is quite tricky as compared to map and filter.

for now understand this: Each element of the array passes through the function provided by us in order to give a single value as output.

The best way to understand is through examples. So, let's get the ball rolling:

Example 1: Given an array of numbers, return the sum of all numbers?

const numbersArray = [1, 6, 9, 4];

//we'll understand using normal function:

function sum(accumulator, currentValue){
        return acc+current;
}

const output = numbersArray.reduce(sum);
console.log(output)

Result: 20

So, what the heck just happened. Don't worry, just listen to me carefully and while doing that refer to the above example.

Let's first try to understand this 👇 basic syntax of the reducer function:

reduce((accumulator, currentValue) => accumulator + currentValue)

reducer function is the function that we define inside the reduce method. This is the most important thing to understand. If you get this, the remaining blog will be a cakewalk for you.

accumulator: The value resulting from the call to the reducer function. The very first value of the accumulator is array[0].

currentValue: The current element of the array. The very first value of the currentValue is array[1]. currentValue is always the very next value of the one which the accumulator took in the previous step.

Still not clear. Don't worry just go through the mental model of what happens when we call the sum function in the above example and everything will be crystal clear.

Step 1: Since the very first value of the accumulator is array[0]. Hence. in the above example, it will be 1.

The very first value of the currentValue is array[1]. Hence, in the above example, it will be 6.

Step 2: As per the instructions given in the sum function, accumulator + currentValue that is 1+6 = 7, will be returned (we got the values of both accumulator and currentValue from the above step).

Step 3: The returned value from the above step that is 7 will be stored in the accumulator for the next iteration and the currentValue will now be set to 9.

Step 4: As per the instructions given in the sum function, accumulator + currentValue that is 7+9 = 16, will be returned (we got the values of both accumulator and currentValue from the above step).

Step 5: The returned value from the above step that is 16 will be stored in the accumulator for the next iteration and the currentValue will now be set to 4.

step 6: As per the instructions given in the sum function, accumulator + currentValue that is 16+4 = 20, will be returned (we got the values of both accumulator and currentValue from the above step).

I hope you understood now how the basic version of reduce is working.

Let's do one more similar example:

Example 2: Given an array of numbers return the multiplication of the numbers?

const numbersArray = [1, 6, 9, 4];

//using arrow function:

const output = numbersArray.reduce((acc, current) => acc*current);
console.log(output)

Result: 216

Understand the above example based on the mental model discussed above.

Now, that you have understood the basic version of reduce, let me introduce a little advanced version:

Here's the syntax:

reduce((accumulator, currentValue) => accumulator + currentValue, initialValue)

So, what the heck is initialValue. initialValue is the value to which our accumulator is initialized the first time the reducer function is called value.

Whenever the initialValue is provided the value of other variables changes. Here's what changes when initialValue is present.

accumulator: The very first value of the accumulator is the initialValue, if it is specified.

currentValue: The very first value of the currentValue is array[0] if the initialValue is specified.

Not clear. See the below example.

Example 3:

const numbersArray = [1, 6, 9, 4];

//we'll understand using normal function:

function sum(accumulator, currentValue){
        return acc+current;
}

const output = numbersArray.reduce(sum, 2);
console.log(output)

Result: 22

Here☝️ 2 is the initial value.

Still not clear.

let's again understand via the mental model:

Step 1: Since the very first value of the accumulator is equal to the initialValue. Hence, in the above example, it will be 2.

The very first value of the currentValue this time is array[0]. Hence, in the above example, it will be 1.

Step 2: As per the instructions given in the sum function, accumulator + currentValue that is 2+1 = 3, will be returned (we got the values of both accumulator and currentValue from the above step).

Step 3: The returned value from the above step that is 3 will be stored in the accumulator for the next iteration and the currentValue will now be set to 6.

Step 4: As per the instructions given in the sum function, accumulator + currentValue that is 3+6 = 9, will be returned (we got the values of both accumulator and currentValue from the above step).

Step 5: The returned value from the above step that is 9 will be stored in the accumulator for the next iteration and the currentValue will now be set to 9.

step 6: As per the instructions given in the sum function, accumulator + currentValue that is 9+9 = 18, will be returned (we got the values of both accumulator and currentValue from the above step).

Step 7: The returned value from the above step that is 18 will be stored in the accumulator for the next iteration and the currentValue will now be set to 4.

step 8: As per the instructions given in the sum function, accumulator + currentValue that is 18+4 = 22, will be returned (we got the values of both accumulator and currentValue from the above step).

I hope you understood now how this version too.

MAN WRITING THIS BLOG IS TAKING TOO MUCH TIME. But I have got to complete and you have got to understand. Kill the choices and you'll be free (sounds counterintuitive but it's not).

Let's do some more examples and I'll be using arrow functions only. If you need the same solution to be written in terms of normal functions too, tell me in the comments and I'll be happy to do it.

Example 4: Given an array of numbers, find the sum of all odd numbers.

const numbersArray = [1, 6, 9, 4, 21, 8, 15];
const sumOdd = numbersArray.reduce((acc, current) => current % 2 === 0 ? acc : acc+current, 0)
console.log(sumOdd);

Result: 46

In the above example, for each iteration, the value of the accumulator will remain the same if the number encountered is even. However, the previous value of the accumulator will be added to the currentValue to give us a new accumulator for the next iteration if the number is even. The initialValue is 0.

Let's see another example to understand better:

Example 5: Given an array of numbers, filter out the highest value from the array.

const numbersArray = [1, 6, 9, 4, 21, 8, 15];
const max = numbersArray.reduce((acc, current) => acc > current ? acc:current, 0)
console.log(max);

Result: 21

Logic in the above example: If accumulator is bigger than use the same accumulator for the next iteration and if currentValue is bigger, use currentValue as an accumulator for the next iteration.

Here's one more example:
Example 6: Return an object with the sum of odd and even numbers separately?
I want something like this to be returned: {evenSum: 142, oddSum: 71}. Remember, I told you that reduce only returns a single value. Here's a fun fact: that value can be an object.

const numbersArray = [1, 6, 9, 4, 21, 8, 15];

const sumEvenOdd = numbersArray.reduce((acc, current) => current % 2 === 0 ? {...acc,'even':acc['even'] + current} :  {...acc, 'odd':acc['odd'] + current}, {"even":0, "odd":0})}

console.log(sumEvenOdd)

Result: {even: 18, odd: 46}

Some of you might be dumb like me and don't understand things instantly. So here's a little explanation for my kind.👇

Note: in the above example I used the spread operator (...acc), if you don't understand what it is, you may wanna read about it first.

Step 1: The very first value of the accumulator will be set to {"even":0, "odd":0} as this is the initialValue.

Step 2: Now, the first element of the array will be passed through the reducer function. The reducer function will see if the currentValue is divisible by 2. Since the currentValue is 1 (not divisible by 2), the reducer function will return {...acc, 'odd':acc['odd'] + current} which may seem complicated but it's just {"even":0, "odd":0+1} that is {"even":0, "odd":1}.

Step 3: In this iteration, the currentValue is 6 that is even. Hence, the reducer will return {"even":0+6, "odd":1} that is {"even":6, "odd":1}.

Step 4: In this iteration, the currentValue is 9 that is odd. Hence, the reducer will return {"even":6, "odd":9+1} that is {"even":6, "odd":10} .

Step 5: and so on until we get {even: 18, odd: 46}.

Now, one more example, and I promise this will be the last one.

If you have read my blog on filter, I used the same example there and achieved the result using map and filter both. Here we'll achieve the desired outcome using reduce only.

Remember, I told you that reduce only returns a single value and the value can be an object. Here's a fun fact: that value can be an array too.

Example 7: Given the below array:

const details = [{'firstName': 'Rajat', 'lastName': 'Gupta', 'age': 28},
{'firstName': 'Barack', 'lastName': 'Obama', 'age': 50},
{'firstName': 'Elon', 'lastName': 'Musk', 'age': 45},
{'firstName': 'Joe', 'lastName': 'Rogan', 'age': 36},
{'firstName': 'Abdul', 'lastName': 'Kalam', 'age': 64}]

Can you filter out the firstName of the persons having an age of more than 46?

console.log(details.reduce((acc, current) => current.age>46 ?  [...acc, current.firstName] : acc, []))

Result: ['Barack', 'Abdul']

Again for the people who are a little slow like me. Here's a little explanation:

Note: in the above example I used the spread operator (...acc), if you don't understand what it is, you may wanna read about it first.

Step 1: The very first value of the accumulator will be set to an empty array.

Step 2: Now, the first element of the array (that is an object) will be passed through the reducer function. The reducer function will see the age and if since the age is lesser than 46, the value of the accumulator will remain the same for the next iteration (accumulator = []).

Step 3: In this iteration, the age is greater than 46, hence the accumulator's value will change to ['Barack'].

Step 3: The value of the accumulator will remain the same for the next 2 iterations.

Step 4: In this iteration, the age is greater than 46, hence the accumulator will change its value from ['Barack'] to ['Barack', 'Abdul'].

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single f*cking day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!