DEV Community: Vansh Sharma

useReducer Hook in React

Vansh Sharma — Tue, 10 May 2022 13:23:07 +0000

Welcome back again!

This is the fifth blog in the React Hook series, where we're learning about different hooks used in React, and today's hook is the useReducer hook. Before we get started, I'd recommend reading the last blogs of this series React Hooks. Though this hook is entirely independent of we can read and learn it without any prior knowledge of hooks, it would be beneficial to have some basic understanding of the hooks.

What is useReducer Hook

To handle the complex state in our application, we use the useReducer hook. It is the same as the useState hook, but instead, it is used to handle the states where we have to keep track of the complex states which rely on the complex logic.

Syntax:

useReducer(reducerFn, initialState )

reducerFn is the function that contains the logic to handle the manipulation of our state.

initialState is the initial state value of our state. It is primarily objects while using the useReducer.

useReducer hooks return the two values:

const [ state, dispatch ] = useReducer ( reducerFn, initialState )

the state is the value of the current state

dispatch is the method that will be used to call our reducerFn.

Understand useReducer by Example

In the following example, we will create a simple app that will display the user's Name and Account Number. We will be using useReducer for this.

Step 1 => Import the useReducer Hook

Import the useReducer hook and define it in the component.

import React, { useReducer } from "react";

const UseReducer = () => {
  const [userData, dispatchData] = useReducer(userReducer, {
    userName: "Please Login!",
    userAccount: null
  });
};

Here userData will be our value of the state then, and the initial value of the state will be an object with properties userName and userAccount.
dispatchData will be the method to call the userReducer function, which we will define in the coming section.

Step 2 => Define userReducer function:

We can define the userReducer function outside our component since all the values will be passed using the dispatchData method.

// Reducer function

const userReducer = (state, action) => {
  if (action.type === "LOGIN") {
    return {
      userName: action.data.name,
      userAccount: action.data.account
    };
  }
  if (action.type === "LOGGED_OUT") {
    return {
      userName: "You are logged out!",
      userAccount: null
    };
  }
};

The userReducer function will take two arguments state and action. state is the value of the state then, and action is used to check for what action which if condition to render, and this type will be passed by the dispatchData method that we will define in the coming section.

Step 3 => Add the UI for the Application

We will create the UI for the application that will show the userName and userAccount numbers along with two buttons. One of them is to handle the login function and will call the loginHandler function once clicked, and the other button will handle the logoutHandler function.
Here is how the code for the UI will look like:

return (
    <div className="component">
      <p>{userData.userName}</p>
      <p>{userData.userAccount}</p>
      <div className="btns">
        <button onClick={loginHandler}>Login</button>
        <button onClick={logoutHandler}>Logout</button>
      </div>
    </div>
  );

Step 4 => Define the loginHandler and logoutHandler functions

loginHandler and logoutHandler functions will use the dispatchData method to pass the object with property type and user details. The type will have the value LOGIN and which we will use in our userReducer function to call the specific if statement according to the value of the type.

// Login Handler
  const loginHandler = () => {
    dispatchData({
      type: "LOGIN",
      data: {
        name: "Hello Vansh Sharma",
        account: "Your account number is: 123456"
      }
    });
  };

  // Logout Handler
  const logoutHandler = () => {
    dispatchData({
      type: "LOGOUT"
    });
  };

Combining the above all code snippets in the following codesandbox we get the following application:

Check the UseReducer.js to understand more.

When to use useReducer

As you can see the, setting up useReducer is more lengthy than using the useState hook; therefore prefer using the useReducer only if the state of the component depends on the complex function or the state of the component is complicated, like an object with many properties.

That's all for this blog. Continue reading this React hook series to learn more about React hooks. In the next blog, we'll look at the useCallback hook that can be used to memorize the function.
Feel free to leave your valuable feedback in the comments below.

To learn more about React, JavaScript, and Web development, follow me on :

Reference: W3Schools

useRef Hook in React

Vansh Sharma — Sun, 01 May 2022 13:58:59 +0000

Welcome back again!

This is the fourth blog in the React Hook series, where we're learning about different hooks used in React, and our today's hook is the useRef hook. Before we get started, I'd recommend reading the last blogs of this series React Hooks. Though this hook is completely independent of we can read and learn it without any prior knowledge of hooks, it would be beneficial to have some basic understanding of the hooks.

What is useRef Hook

We can build a direct reference to a DOM element using the useRef hooks. It's used to keep track of mutable values that do not cause re-rendering every time they're changed.

Syntax:

const refContainer = useRef(intialValue)

Example:

const countRef = useRef(0)

useRef returns a mutable object whose current property can be used to access the value.
In the above syntax, we have initialized the useRef with the initial value of 0.

const countRef = {counter:0} is same as const count = useRef(0)

Difference between useState and useRef

We can see in the following codesandbox that using the useRef we can persist the previous value on every render. But using the same with useState is not possible.

Advantage of using useRef

It allows us to directly access the DOM element without causing any issue.
Values updated using useRef do not cause re-rendering.

Ending

That's all for this blog. Continue reading this React hook series to learn more about React hooks. In the next blog, we'll look at the 'useReducer' hook, which is used to handle state management in React globally.
Feel free to leave your valuable feedback in the comments below.

To learn more about React, JavaScript, and Web development, follow me on Twitter.

Reference: W3Schools

useContext Hook in React

Vansh Sharma — Tue, 26 Apr 2022 12:19:46 +0000

Welcome back again!

This is the third blog in the React Hook series, where we're learning about different hooks used in React, and our today's hook is the useContext hook. Before we get started, I'd recommend reading the last blogs of this series React Hooks . Though this hook is completely independent of we can read and learn it without any prior knowledge of hooks, it would be beneficial to have some basic understanding of the hooks.

What is the useContext Hook

Until now, we've learned that if we need to pass state from one component to another, we must do so via props.

This method of passing the state through the props is called prop drilling.

However, passing the state with props is only useful for small applications; as our application grows in size, the number of components grows as well, making prop drilling ineffective.

The useContext hook comes to our rescue because it offers state at a global level, making it simple to give state directly to the component rather than passing it through many components.

Example of Prop Drilling

Though the state was not necessary for the ComponentB and ComponentC in the following widget, this is the only way to move the state from one component to another without using the useContext method.

Use useContext Hook

We're going to make a simple counter app with three components, each of which will update the global state of the counter. The three components are Increase, Decrease, and Reset.
useContext will be used for all of this state updating and providing count value back to the components.

Easy method to remember the flow of useContext:

Create > Provide > Use

Now we will learn step by step to use and create useContext :

Step 1 (Create)

Always prefer to create a separate Context.js file in the src folder to use the useContext.
As told in the above flow, our first step would be to create the useContext hook. In the following snippet, we will import the different hooks and function to create the context. We use createContext function to create the context.

// Context.js

import React, { useState, createContext, useContext } from "react";

const CounterContext = createContext();

Step 2 (Provide)

Now we will use the above CounterContext and wrap our whole application to provide the values to every component.

// Context.js

export const NameContextProvider = ({ children }) => {
  const [counter, setCounter] = useState(0);
  return (
    <CounterContext.Provider value={{ counter, setCounter }}>
      {children}
    </CounterContext.Provider>
  );
};


// index.js

import { NameContextProvider } from "./Context";
import App from "./App";

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

Because we wrapped our application in the index.js file using the NameContextProvider, children will be our application in the above snippet. To build the state, we're using a simple useState hook. The component Provider in the CounterContext.Provider></CounterContext.Provider> helps the context deliver state values to all the components that have been wrapped around. The value of all the states and functions that we want to share with components is referred to as value In the value field, we can put anything we want.

Step 3 (Use)

Now the last step is using the context we have created using the useContext hook.

export const UseCounterContext = () => useContext(CounterContext);

Note: Always remember to export the UseCounterContext and NameContextProvider.

These were the steps for creating the context.

Now all we have to do is create the various components and use this state value to update the state value as needed. We'll make three separate components: one to increase the value, one to decrease the value, and one to reset the state's value to zero. I will show only one component in the following snippet all other components will follow the same method with some changes in the state updating function setCounter.

// Increase.js

import { UseCounterContext } from "./Context";

const Increase = () => {

  const { counter, setCounter } = UseCounterContext();

  const increaseHandler = () => {
    setCounter((prevValue) => prevValue + 1);
  };

  return (
    <div className="component">
      <h3>I am counter {counter} in ComponentA</h3>
      <button onClick={increaseHandler}>Increase</button>
    </div>
  );
};

export default Increase;

To utilize the value of the context we have to import the UseCounterContext which we created in Step 3 (Use) of the context. After importing the UseCounterContext we will destructure all the values passed in values in the Context.js file. Since we passed the counter and setCounter and we need only these values in our component so we will destructure these values and use them in the component.

Note: We can destructure only those values that we are going to use in the particular component.
Since the above snippet is for Increase.js component we will increase the value of the counter using the setCounter function.

Create the Decrease.js and Reset.js functions similarly.
Here is the final codesandbox.

Ending

Always remember to follow the flow of the context ie

Create > Provide > Use

That's all for this blog. Continue reading this React hook series to learn more about React hooks. In the next blog, we'll look at the 'useContext' hook, which is used to handle state management in React globally.
Feel free to leave your valuable feedback in the comments below.

To learn more about React, JavaScript, and Web development, follow me on Twitter.

Reference: W3Schools

useEffect hook in React

Vansh Sharma — Tue, 19 Apr 2022 15:02:39 +0000

Welcome back!

This is the second blog in the React Hook series, where we're learning about different hooks used in React, and our today's hook is the useEffect hook. Before we get started, I'd recommend reading the last blog of this series useState Hook. Though this hook is completely independent of the useState hook, and you can read and learn from it without any prior knowledge of hooks, it would beneficial to have some basic understanding of the hooks.

What is the use of useEffect hook in React?

The useEffect hook is used in our components to perform side effects. Side effects are the task that happens outside the normal component evaluation. Data fetching, web API, and manually changing the DOM are some examples of side effects.

How to use the useEffect hook

Import useEffect hook

It can be imported by destructuring from the React library using the following code:

import {useEffect} from "react"

Syntax of useEffect hook

useEffect (  <function> , [dependency] )

There are two arguments:

(i) The first is a function that will be invoked on every render until the dependence is provided.

(ii) The second argument is the dependence which will enable useEffect to call our specified function if it changes.

Why use dependency

As previously stated, the useEffect hook will call our function on every render, resulting in an infinite loop and crashing the browser. However, there are ways to avoid it by providing dependency.

1) Providing an empty array [] as a dependency

 useEffect( () =>{

// it will run only on the first render

},[]}

2) Providing the props or state as the dependencies

useEffect( () =>{

// it will run on the first render
// it will also run every time the given dependencies changes

},[  props , state  ]}

Check out the file NonEmptyDependency.js, and EmptyDependency.js. and console of the following codesandbox to better understand the examples.

Cleanup function in useEffect

Consider the following scenario: we obtain a fetch of a specific user via the user's id, but before the fetch is completed, we change our minds and attempt to obtain another user. While the previous retrieve request is still in progress, the prop, or in this example, the id, updates.
To avoid exposing our application to a memory leak, we must then cancel the fetch using the cleanup function.
Every time the useEffect is called the cleanup function will also run except on the first render.

Let us clean the Timeout function at the end of the useEffect hook in the following codesandbox.

To learn more about React, JavaScript, and Web development, follow me on Twitter.

Reference: W3Schools, Blog

React useState hook

Vansh Sharma — Tue, 12 Apr 2022 17:05:03 +0000

Before we get into the core of the article, let's go over some key details around React hooks.

What are Hooks?

Hooks were introduced in the React version 16.8. Hooks are the functions that let the user have access to the state and lifecycle method in the function component. Before the hooks were introduced in React, the class component was the only option to access the state and lifecycle methods. Even though class components are no longer required, they can still be found in some legacy code.

There are no plans to remove classes from React — we all need to keep shipping products and can’t afford rewrites. We recommend trying Hooks in new code. React doc

Rules for using hooks

Hooks can only be used with function components.
Hooks can not be conditional like inside the if...else, switch statements.
Hooks must only be called at the top level of a component.

React useState Hook

useState hook allows us to track the information of the component between the rendering of the component such information is called the state of the component. State is like the value of the variable declared within the function.

How to use useState

Import useState hook

As useState hook is the named export in the React library we can easily import it by destructuring from the React.

import {useState} from "react"

How to initialize useState hook

useState hook is initialized on the top of the component by calling in our function component.

Here again, we are destructuring the returning value.

const Counter = () => {

const [count , setCount ] = useState(0)

}

It returns the two values :

"count" is the current state.
"setCount" is the function that is used to update our state.

Common naming convention for the useState hook is:

[ variable , setVariable ] = useState()

Here "variable" can be anything.

Finally, we give the initial state to the hook, which can be anything from object, string, number, array, boolean, or any combination of these. In our case, it is the number.

Initial state = useState(0)

How to read the state

Our first returning value will be the value of the state. We can use it anywhere in our component to read the state.

const Counter = () => {

const [count , setCount ] = useState(0)

return (

<h1> Current value is  {count} </h1>

)}

How to update the state

We can only update the value of the state using the function returned by the useState hook in this case setCount.

Note: Never update the state directly. Example: count= 25 .

function increaseCount(){

setCount( prevValue => prevValue+1 )

}

Combining the above all code snippets, we get the following codesandbox. Check the App.js file of the following codesandbox.

Update the Objects in the State

In the above section we discussed how to update the numbers in the state but as explained earlier that useState can take object, string, number, array, boolean, or any combination of these as the state. So now in the following points, we will learn How to update the Objects in the state?
When the component's state is updated, the entire state of the component is fully overwritten. However, while using objects in the state, we simply want to update the object's specific property and leave the rest of the properties unchanged.

Let's look at how the state update entirely replaces the prior state without using the previous values from the state.
Here in the function withoutPrevious we update the lastName property to "Bhardwaj".

 function User() {

  // Update without prev values

  const [user, setUser] = useState({
    firstName: "Vansh",
    lastName: "Sharma",
    city: "Delhi"
  });

//  Function to update without prev value
  const withoutPrevious = () => {
    setUser((prev) => {
      return { lastName: "Bhardwaj" };
    });
  };

return (
    <div className="App">
      <h3>
        I am {user.firstName} {user.lastName} from {user.city}.
      </h3>

      <button onClick={withoutPrevious}>
        Update last name without previous values.
      </button>

}

// Original  I am Vansh Sharma from Delhi.

// Output  I am Bhardwaj from.

Now let us look at how to update only the specific property of the object and retaining the actual value of all other properties.
Unlike in the above function here to update the lastName in the function withPrevious we have used the spread operator to spread the previous value in the new state and overwriting only the lastName property.

function User() {

  //  Update with prev values
  const [user1, setUser1] = useState({
    firstName: "Vansh",
    lastName: "Sharma",
    city: "Delhi"
  });

   // Function to update with prev values
  const withPrevious = () => {
    setUser1((prev) => {
      return { ...prev, lastName: "Bhardwaj" };
    });
  };

  return (
    <div className="App">

        I am {user1.firstName} {user1.lastName} from {user1.city}.
      </h3>

      <button onClick={withPrevious}>
        Update last name with previous values.
      </button>
    </div>
  );
}

// Original  I am Vansh Sharma from Delhi.

// Output  I am Vansh Bhardwaj from Delhi.

Check out the codesandbox of the above code here. Do check out the App.js file in the following codesandbox.

That's all for this blog. Continue reading this React hook series to learn more about React hooks. In the next blog, we'll look at the 'useEffect' hook, which can be used to handle side effect functions in React.
Feel free to leave your valuable feedback in the comments below.

To learn more about React, JavaScript, and Web development, follow me on Twitter.

Reference: W3Schools

Functions in JavaScript

Vansh Sharma — Sun, 09 Jan 2022 08:31:42 +0000

In this blog, we will learn about functions like any other programming language JavaScript also has functions that help us to perform the same task again and again without writing the same code again.

1. Function

Syntax:

functionName = Name of the function (add, sub etc.)

para1, para2 = Parameters

functionName( arg1 ,arg2 ) = Function calling

arg1 , arg2 = Arguments

The function call is used to execute the code inside the function body.

Hoisting

It is the JavaScript feature that allows us to call the function before it is declared.

NOTE: Arrow function does not support Hoisting.

Argument VS Parameter

Most of the time developers use both these words interchangeably. However, they are different.

Arguments are the values that you pass while calling the function.
Parameters are the values that you give while defining the function.

*** First-Class Citizens***

JavaScript functions are First-Class-Citizens that means you can store functions in variables, you can pass them into another function as an argument, you can also return another function as a return value.

a. Store function as a variable

Here we stored subtract function in the result variable.

b. Pass function as an argument

anotherFunction = is a High Order Function

subtract = is a callback function

Here we passed the subtract function as an argument to anotherFunction.
Functions that accept other functions as an argument, or return another function are called High Order Function and that function which is passed as an argument is called callback function.

c. Return another function as a return value

Here we are returning multiply function as a return value to the calculation function.

Types of the functions in JavaScript

(i) Anonymous Functions

(ii) Immediately Invoked Function Expression (IIFE)

(iii) Arrow functions

2. Anonymous Functions

Anonymous functions are functions without names. The anonymous function has no name between the function keyword and the parentheses (). These functions are defined by declaring a function body to a variable.

3. Immediately Invoked Function Expression (IIFE)

IIFE are the functions expressions that are invoked just after the declaration of the function.

4. Arrow Function

Arrow function was provided in the ES6 version of JavaScript. It is the shorter syntax to write the functions.

You can avoid using parentheses() if there is only ONE parameter used in the function. But if there are no parameters used then you MUST USE parentheses().

You can also avoid the curly brackets { } if the function is only of one line.

Thanks for reading the blog. Do share your valuable feedbacks.

Connect on Twitter

Difference b/w for...in & for...of

Vansh Sharma — Mon, 06 Dec 2021 09:33:26 +0000

The distinction between the for..in and for..of methods of arrays in JavaScript will be discussed in this blog.

These methods are a simplified form of the actual for loop, however they should not be used in place of the standard for loop.

for loop

for( let i=0; i<length; i++)

This is the standard for loop which iterates over the length and returns i .

for...in loop

Synatx: for( let key in obj)

👉 It is for iterating over the "enumerable" properties of an object.

👉 It gives us the keys/properties of an object.

👉 It is mostly used with objects.

👉 It does not have a specific order of execution.

for...of loop

Synatx: for(let value of array)

👉 It is used to iterate over "iterable".

👉 It is mostly used with strings and arrays

👉 It does not work with objects as they are not
"iterable".

❤️// 👍

This topic had always been a source of uncertainty for me, so I decided to write a blog on it in order to learn more about it so that I might help someone else who was in the same boat.

Do Like and SHARE your valuable feedback.

Connect 🔗

Twitter

REST vs. SPREAD

Vansh Sharma — Sun, 14 Nov 2021 10:23:54 +0000

The Rest parameter and Spread Syntax were added in JavaScript ES6 (ECMAScript 6) despite the fact that their symbols are the same they work differently.

NOTE:

Parameters are value passed inside the function definition :

function add(paramter){ }

Arguments are value passed while calling the functions

add(arguments)

Let's discuss about them using the explanation and examples.

Rest Parameter

Sometimes while creating the function we face the situation where the value of number of arguments to be passed are unknown to us. There comes the Rest Parameter to our rescue.

<--- Without Rest parameter --->

function add(a, b) {
  console.log(a + b);
}

add(5, 6) // 11
add(5, 6, 2, 3) // 11, It will just ignore the rest of the arguments except(2,3) because we have given only 2 parameters

<--- With Rest Parameter --->

function add(...args) {
  let sum = 0;
  for (let arg of args) {
    sum += arg;
  }
  return sum;
}

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(add(2, 3)) // 5
console.log(add(2, 3, 6)) // 11
console.log(add(2, 3, 7, 4, 2, 5)) // 23

Point to Remember

The rest parameter is always used at the end of the function parameters

function add(a, b, ...rest){}

Spread Syntax

Sometimes we need to add the an array of values as the arguments to the functions because adding each value to the arguments will not be good practice. There comes the Spread Synatx for our rescue.

<--- Without Spread Sytax --->

console.log(Math.max(1,3,4,6,7,9,98,74,56,32,12,36)) // 98

<---With Spread Syntax --->

let arr = [1,3,4,6,7,9,98,74,56,32,12,36];

console.log(Math.max(...arr)) // 98 



let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

console.log(Math.max(1, ...arr1, 2, ...arr2, 25)); // 25

Point to Remember

Unlike rest parameter, spread syntax can be used anywhere in the function arguments.

console.log(Math.max(1, ...arr1, 2, ...arr2, 25));

Difference

Rest Parameter	Spread Syntax
When {...} appears in the function definition it is called Rest Parameter	When {...} appears in the function call it is called Spread Syntax.
function add(...restParameter){ // code }	let arr= [1,2,3,4,5,6,7,8,9] add(...spreadSynatx)

Connect:
Twitter
Reference

Operators in JavaScript

Vansh Sharma — Sat, 09 Oct 2021 06:06:31 +0000

Credit : Tanmay Sankalp

Operators: Operators are basic mathematical symbols that perform some sort of operation/function on operands.

3 + 5 = 8

3,5 is Operand

+,= is Operator

Topics

Basic Operators +, -, *, /, %
Comparison Operators >, <, >=, ==,===
Ternary Operator ?
Logical Operators ||, &&, !, ??

Basic Operators

Addition `+`, Multiplication `*`, Subtraction `-`, Division (quotient) `/`

let a = 10;
let b = 5;

console.log(a+b); // Output : 15

console.log(a*b); // Output : 50

console.log(a-b); // Output : 5

console.log(a/b); // Output : 2

Remainder `%`, Exponentiation `**`

let a = 4;
let b = 2;

console.log(a%b); // Output : 0

console.log(a**b); // Output : 16

Special use of `+` operator. It is also used for string concatenation. After the introduction of `Backticks () in the ES6 version.`It is not used that frequently.

NOTE: + has a special feature to convert operand to string other operators works only with number

console.log("Vansh " + " Sharma") // Output "Vansh Sharma"

console.log('5' + 1) // Output "51"

console.log(2+'2'+'1') //Output "221"

Comparison Operators

These are operators are used to compare two values. Comparison operators always returns result in Boolean form `true`( means 'Yes','Correct'), `false`(means 'No','Wrong'). JavaScript converts the value to numbers so always use strict comparison.

Greater than `>`, Less than `<`, Greater than and equal `>=`, Less than and equal `<`

console.log(5 > 4); // Output true

console.log(5 < 4); // Output false

console.log(5 >= 4); // Output true

console.log(5 <= 5); // Output true

Double Equals `==` only compares the value, Triple Equals `===` compares the value and datatype both, Not Equal `!=`/`!==` It is always preferred to use the latter.

console.log(5 == "5") // Output true because it compared 5 with 5

console.log(5 === "5") // Output false because it compared number(5) with string(5)

console.log(5 !== "5") // Output true because it compared number(5) with string(5)

String Comparison

Sting comparison follows the English dictionary order (Unicode).
While comparing the small letter with a capital letter. Small letters are always considered greater because of the greater index.

console.log('Z' > 'A') // true
console.log('l' > 'm') // false
console.log('k' > 'Z') // true

Point to remember

>, <, >=, <= converts null, undefined to 0 and NaN respectively.
null and undefined are only equal (==) to each other.

console.log(null == undefined) // true
console.log(null === undefined) // false
console.log(null == 0) // false
console.log(null <= 0) // true becasue null gets converted into 0

Ternary Operator `?`

It is used as an alternative to small `if` code.

NOTE: Do not use as a complete alternative to if operator, use this only with small if code expressions.

Syntax:

let result = condition ? value1(if condition is true) : value2(if condition is not true


let a, b;
a = 5;
b = 7;

let finalAnswer =
  a > b ?'a is greater than b' : ' a is less than b';

  console.log(finalAnswer) // a is less than b

Logical Operators

`||` (OR)

It always returns the first truthy value. Don't check after that.
Converts the operand to boolean to evaluate the result.
If all operands return the false, returns the last operand.


console.log(5 || 0); // 5 ( only truthy value)

console.log(0 || null || undefined || 3); // 3 ( only truthy value)

console.log(undefined || 0 || null); // null ( if all are false return the last value)

`&&` (AND)

It always returns the first falsy value. Don't check after that.
Converts the operand to boolean to evaluate the result.
If all operands return the true, returns the last operand.

console.log(5 && 0); // 0 (only falsy value)

console.log(1 && null && 5); // null (only falsy value)

console.log(5 && true && 3); // 3 (if all are true returns the last value)

`!` (NOT)

Converts the operand to boolean type to evaluate the result.
Returns the inverse value.

console.log(!0) // true (because inverse of 0( false) is true)

console.log(!5) // false (because inverse of 5( true) is false)

console.log(!" ") // false (because " " is not empty string so inverse is false)

`??` Nullish coalescing operator

It returns the first defined value whereas || returns the first truthy value.
0 for || is falsy on the other hand 0 for the ?? is defined value.

console.log(null ?? undefined ?? 1) // 1 returns the defined value

console.log(0 ?? 1) // 0 because ?? consider 0 as defined value

console.log(0 || 1) // 1 because || consider 0 as falsy value

Points to remember

console.log("" || 5) // 5 (because empty string is 0 (falsy))

console.log(" " || 5) // " " here output is blank space even space is consider as non-empty

console.log( null || 2 && 3 || 4 ) // 3 because precedence of && is higher than that of || )

References

Block Element Modifier

Vansh Sharma — Mon, 04 Oct 2021 12:35:48 +0000

It is popular naming convention for Classes in HTML and CSS. It was invented at Yandex to develop sites that should be launched fast and supported for a long time. It helps to create extendable and reusable interface components.

Block

It is an independent component in HTML that has its own meaning and can be reused. It is more of like a parent element.

Examples: `<header>`, `<nav>`, `<form>` etc.

<header class="header">

<nav class="nav"></nav>

</header>

Element

Elements are the child element of the Block component. It is mostly the text part inside the block. Block and Elements are seperated by 2 double underscores `(block__element)`.

Examples: `<input>`, `<h1>`, `<button>` etc.

<header class="header">

<h1 class="header__title"> Introduction </h1>

</header>

Modifier

As the name suggests it modify the appearance, state, behaviour of elements. Elements and Modifiers are seperated by single undersocre (elements_modifiers)

Examples: `<disabled>`, `<color>`, `<active>` etc.


<form class="form">

<input type="text" class="form__name_disabled" disabled>

</form>

NOTE: Some places you will find elements and modifiers are separated using a single underscore (element--modifiers).

Rules `<block-name__element-name_modifier-name>`

1. Names are written in lowercase Latin letters.

2. Words are seperated by a hyphen (search-form).

3. The element name is seperated from the block name by a double underscore (header__title).

4. The element name is seperated from the modifier name by a single underscore (form__input_disabled).

A double hyphen inside a comment (--) may cause an error during validation of an HTML document. So it is mostly avoided.

References

BEM Methodology

Contact

Twitter

Semantic Elements in HTML

Vansh Sharma — Thu, 23 Sep 2021 16:22:42 +0000

Semantic Elements in HTML

According to Wikipedia Semantic means "Semantics is the study of meaning, reference, or truth"

In HTML, we can say that Semantic Elements are those elements that describe the use of the element from their names.

Credit: Shreya

▶️ Examples:

Semantic Elements :

<header>, <nav>, <main>, <section>, <aside>, <footer>, <form>, <summary>, <time>, <details>

Non-Semantic Elements :

<div>, <span>

▶️ Application:

<header>: It is used to give a heading to your website.

 <header>

   <h1> Introduction to HTML </h1>

 </header>

<nav>: It is used to add a navigation bar to your website to provide links for different pages.

    <nav>

     <a href=""> About HTML </a>
     <a href=""> Elements </a>
     <a href=""> Examples</a>
     <a href=""> Quiz</a>

    </nav>

<main>: It is used to specify the main content of the page.

  <main>

  <p>
   HTML is the standard markup language for Web pages. 

   With HTML you can create your own Website.
  </p>

  </main>

<section>: It can be used to group the different sections of the web page.

<section>

  <h2> About HTML </h2>

</section>

<section>

  <h2> Elements </h2>

</section>

<section>

  <h2> Examples </h2>

</section>

<section>

  <h2> Quiz </h2>

</section>

<aside>: It is mostly used to display the contents on the side of the main page related to the content of the web page.

<aside>

<h3> Fact about HTML </h3>

<p> HTML is a programming language or not is a contentious topic among the programmers. </p>

</aside>

<footer>: As its name suggests it is used at the bottom of the page which mostly contains the contact details or query form.

<footer>

<h3> Contact information </h3>

<a href=""> Twitter </a>
<a href=""> LinkedIn </a>
<a href=""> GitHub </a>

<footer>

▶️ Benefits of Semantic Elements:

Screen readers can help visually impaired users to navigate a page.
Helps in improving the SEO ranking of the page.
Makes refactoring of the code easier.
Helps the developer to understand the type of data elements holds

▶️ Semantic elements table:

There are many semantic elements in the HTML some of them are mentioned here.

Elements	Description
`<article>`	Define independent, self-contained content
`<aside>`	Defines content aside from the page content
`<details>`	Defines additional details
`<figcaption>`	Defines the caption for the figure
`<figure>`	Includes the content like image, diagrams, photos
`<footer>`	Defines the footer section of the page
`<header>`	Defines the header section of the page.
`<main>`	Defines the main content of the page
`<nav>`	Contains the navigation bar of the page
`<section>`	Defines the different section of the pages
`<summary>`	Defines a visible heading for a details element

📚 Resources

This blog is part of my contribution to GirlScript Winter of Contributing more contributions to come.

Meet you in the next blog until then Keep Learning, Keep Growing.

Connect:

Twitter

7 Ways to Write Good commit message

Vansh Sharma — Fri, 13 Aug 2021 09:08:13 +0000

What is a commit message?

Brief description of the changes you made to the codebase. So that other members of the team can understand all changes you made to the codebase.

Why is it necessary to write a good commit message?

It is a good habit to write a good commit message because people come and go but code remains there. So you should commit in such a way that future members and the member of other teams can understand What all changes you have made?

Let's see an example of the GOOD & BAD Commit message.

Example1
Example 2

Points to remember while writing Commit message :

Divide the commit message into 2 parts: subject and body.
In the above Example 2 1st message is subject part and 2nd message is body part.
Mention the type of commit you are making in Subject part such as:
- Feat: For any new feature
- Fix: If you fix any bug
- Docs: Changes in documentation
- Style: Any changes in style like color, design etc.
- Refactor: When you refactor the code
- Test: Anything related to testing
- Chore: Regular code maintenance
Limit the subject line to 50 characters.
Don't end the subject line with a period (.)
Use the Imperative mood in subject line

Imperative mood is like giving orders. Like:
- Fix the bug
- Change background color
Wrap the body part at 72 characters.
Capitalize the subject line and each paragraph.

That's all for this blog. We will meet in the next blog until then Keep learning, Keep growing.

Connect with me :

Reference :

FreeCodeCamp
Neogcamp

DEV Community: Vansh Sharma

useReducer Hook in React

What is useReducer Hook

Understand useReducer by Example

Step 1 => Import the useReducer Hook

Step 2 => Define userReducer function:

Step 3 => Add the UI for the Application

Step 4 => Define the loginHandler and logoutHandler functions

When to use useReducer

useRef Hook in React

What is useRef Hook

Difference between useState and useRef

Advantage of using useRef

Ending

useContext Hook in React

What is the useContext Hook

Example of Prop Drilling

Use useContext Hook

Step 1 (Create)

Step 2 (Provide)

Step 3 (Use)

Ending

useEffect hook in React

What is the use of useEffect hook in React?

How to use the useEffect hook

Cleanup function in useEffect

React useState hook

What are Hooks?

Rules for using hooks

React useState Hook

How to use useState

Update the Objects in the State

Functions in JavaScript

1. Function

2. Anonymous Functions

3. Immediately Invoked Function Expression (IIFE)

4. Arrow Function

Difference b/w for...in & for...of

REST vs. SPREAD

The Rest parameter and Spread Syntax were added in JavaScript ES6 (ECMAScript 6) despite the fact that their symbols are the same they work differently.

Let's discuss about them using the explanation and examples.

Rest Parameter

Point to Remember

Spread Syntax

Point to Remember

Difference

Operators in JavaScript

Operators: Operators are basic mathematical symbols that perform some sort of operation/function on operands.

Topics

Basic Operators

Addition +, Multiplication *, Subtraction -, Division (quotient) /

Remainder %, Exponentiation **

Special use of + operator. It is also used for string concatenation. After the introduction of Backticks () in the ES6 version.It is not used that frequently.

NOTE: + has a special feature to convert operand to string other operators works only with number

Comparison Operators

These are operators are used to compare two values. Comparison operators always returns result in Boolean form true( means 'Yes','Correct'), false(means 'No','Wrong'). JavaScript converts the value to numbers so always use strict comparison.

Greater than >, Less than <, Greater than and equal >=, Less than and equal <

Double Equals == only compares the value, Triple Equals === compares the value and datatype both, Not Equal !=/!== It is always preferred to use the latter.

String Comparison

Point to remember

>, <, >=, <= converts null, undefined to 0 and NaN respectively.

null and undefined are only equal (==) to each other.

Ternary Operator ?

It is used as an alternative to small if code.

NOTE: Do not use as a complete alternative to if operator, use this only with small if code expressions.

Logical Operators

|| (OR)

It always returns the first truthy value. Don't check after that.

Converts the operand to boolean to evaluate the result.

If all operands return the false, returns the last operand.

&& (AND)

It always returns the first falsy value. Don't check after that.

Converts the operand to boolean to evaluate the result.

If all operands return the true, returns the last operand.

! (NOT)

Converts the operand to boolean type to evaluate the result.

Returns the inverse value.

?? Nullish coalescing operator

Points to remember

References

Addition `+`, Multiplication `*`, Subtraction `-`, Division (quotient) `/`

Remainder `%`, Exponentiation `**`

Special use of `+` operator. It is also used for string concatenation. After the introduction of `Backticks () in the ES6 version.`It is not used that frequently.

NOTE: `+` has a special feature to convert operand to string other operators works only with number

These are operators are used to compare two values. Comparison operators always returns result in Boolean form `true`( means 'Yes','Correct'), `false`(means 'No','Wrong'). JavaScript converts the value to numbers so always use strict comparison.

Greater than `>`, Less than `<`, Greater than and equal `>=`, Less than and equal `<`

Double Equals `==` only compares the value, Triple Equals `===` compares the value and datatype both, Not Equal `!=`/`!==` It is always preferred to use the latter.

`>`, `<`, `>=`, `<=` converts `null`, `undefined` to 0 and NaN respectively.

`null` and `undefined` are only equal (==) to each other.

Ternary Operator `?`

It is used as an alternative to small `if` code.

NOTE: Do not use as a complete alternative to `if` operator, use this only with small `if` code expressions.

`||` (OR)

If all operands return the `false`, returns the last operand.

`&&` (AND)

If all operands return the `true`, returns the last operand.

`!` (NOT)

`??` Nullish coalescing operator

Examples: `<header>`, `<nav>`, `<form>` etc.

Elements are the child element of the Block component. It is mostly the text part inside the block. Block and Elements are seperated by 2 double underscores `(block__element)`.

Examples: `<input>`, `<h1>`, `<button>` etc.

Examples: `<disabled>`, `<color>`, `<active>` etc.

Rules `<block-name__element-name_modifier-name>`