Hooks are basically meant to maintain state in ReactJS without writing a class component. Hooks are a new addition in React 16.8. There are various hooks in react for different purposes. Let us see what is a useState hook.

The useState hook

The useState() is a Hook that allows you to have state variables in functional components. so basically useState is the ability to encapsulate local state in a functional component. When thinking about functionality, useState allows thinking in two or more states. Then events are required to change the state from one value to another.

The useState cycle

state → event → state

Syntax

 const [state, setState] = useState(initialState);

Here
state - Name of the state
setState - The function eventually used to change the value of this state
initialState - The initial value of the state
The only argument we pass in useState is the initial state. useState returns two values, the current state and the function that updates the state.
useState() can only be used in functional components and not class components. We need to import useState from react in order to use it.

import { useState } from 'react'

Example

Increase counter on + button click and decrease counter on - button click and display the counter.

const [count, setCount] = useState(0);

Now we will define the setCount() function.

const increaseCount = () => setCount(count => count + 1);
const decreaseCount = () => setCount(count => count - 1);

Here we are passing the parameter as count to setCount() which on every call of increaseCount() gets incremented by 1 and of decreaseCount() gets decremented by 1.

<button onClick = {decreaseCount}> - </button>
<p><strong> {counter} </strong></p>
<button onClick = {increaseCount}> + </button>

Here on clicking - button every time, decreaseCount() function gets called and the counter is decreased by 1. On clicking + button every tine, increaseCount() function gets called and the counter is increased by 1. To display the counter, simply put the {counter} variable in HTML tag.
Output initially

Output after clicking on - button one time and + button two times respectively

This was all about the introduction of useState() hook in react. Congrats! After this article you are well known about how to use useState(), why to use useState() and many more basic concepts related to it!

What are CSS selectors?

CSS selectors define the elements to which a set of CSS rules apply.

Basic selectors

1. Universal selector

A universal selector selects all elements which are present in HTML dom.
Syntax: * { CSS body }

2. Type selector

A type selector will select a specific tag.
Syntax: tagname { CSS body }
For example: p will select all the <p> tags in HTML DOM.

3. Class selector

A class selector selects all the elements with the same class attribute.
Syntax: .classname { CSS body }
Example:

<div classname = "container"></div>
<div classname = "container"></div>

.container {
    width: 100%;
    margin: auto;
}

4. ID selector

An ID selector selects an elements based on its ID attribute.
Syntax: #id { CSS body }
Example:

<div id = "container"></div>

#container {
    width: 100%;
    margin: auto;
}

5. Attribute selector

An attribute selector selects all the elements with the same attribute.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example:

<label>
    <input type = "radio" />
    This is input
</label>

input[type = "radio"] {
    font-size: 1.5rem;
}

Grouping Selectors

, is used to group various elements for which we have to set the same properties.
Syntax: a, b { CSS body }
Example: div, section

Combinators

1. Descendant combinator

" " selects nodes that are descendants of the first element.
Syntax: a b { CSS body }
Example: div p will match all <p> elements that are inside a <div> element.

2. Child combinator

> combinator selects the elements that are direct children of the first element.
Syntax: a > b { CSS body }
Example: div > span will match all <span> which are direct children of <div> element.

3. General sibling combinator

~ combinator selects siblings. This means that the elements are consecutively and both share the same parent. Syntax: a ~ b Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.

4. Adjacent sibling combinator

The + combinator only matches the second element if it immediately follows the first element. Syntax: a + b { CSS body }
Example: h1 + span will match all <span> elements that immediately follow an <h1> element.

5. Column combinator Experimental

|| combinator selects nodes which belong to a column.
Syntax: a || b { CSS body }
Example: col || td will match all <td> elements that belong to the <col> scope.

So that's it! These are all the CSS selectors covered.
We learned how to select an element with the help of CSS selectors. We learned the basic selectors, grouping selectors, and combinators. Now you can easily select any element and pace your CSS journey!🤩

The nullish coalescing operator returns the right-hand side expression if the left-hand side expression is null or undefined.
This operator is written as two question marks ??

Operator precedence:

Syntax: left-hand-side-expression ?? right-hand-side-expression

Let's take a deep dive to understand how the nullish coalescing operator works!

let foo;
console.log(foo ?? "hi!")
// Output : hi!

Here we are not initializing variable foo with any value i.e. it is undefined. That's why the right-hand-side expression is getting printed.

Let us see the same example using the ternary operator.

let foo;
console.log((foo !== undefined || foo !== null) ? foo : "hi!")
// Output : hi!

As we can see, both the outputs we get, one by using the nullish coalescing operator and the other by using the ternary operator are the same.

What is the difference between nullish coalescing operator and ternary operator?

The main difference is that the ternary operator returns the right-hand side expression if the left-hand side expression has a falsy value while the nullish coalescing operator returns the right-hand side expression if the left-hand side expression is null or undefined (but no other falsy values)

What are the falsy values?

Falsy evaluates to false.
There are total 6 falsy values in JavaScript

• undefined
• null
• NaN
• 0
• "" //empty string
• false

Let us see the examples:

const obj = {
    isBoy : false,
    rollNo : 45
}
const nullishVal = obj.isBoy ?? obj.rollNo
console.log(nullishVal) // Output : false

const ternaryVal = obj.isBoy ? obj.isBoy : obj.rollNo
console.log(ternaryVal) // Output : 45

const logicalOrVal = obj.isBoy || obj.rollNo
console.log(logicalOrVal) // Output : 45

Here obj.isBoy is neither undefined nor null, it is false, that's why the nullishVal is returning the value of obj.isBoy while ternaryVal and logicalOrVal are returning the obj.rollNo i.e. 45 as the value of obj.isBoy is falsy.

const price = 0;
console.log(price || 100) // Output : 100
console.log(price ? price : 100) //Output: 100
console.log(price ?? 100) // Output : 0

const name = null;
const age = 20;
const height = undefined;
console.log(name ?? age ?? height ?? "Nothing") // Output : 20
//Returns first value which is neither null nor undefined
console.log(name || age || height || "Nothing") // Output : 20
//Returns first defined value

Example using function:

const A = () => {
  console.log("a");
  return null;
}
const B = () => {
  console.log("b");
  return "function B";
}
const C = () => {
  console.log("c");
  return "";
}
A() ?? B() // Output : a b
// As A() is returning null value both functions will be evaluated
C() ?? B() // Output: c
// "" is a falsy value but not null or undefined so C() will be evaluated

Now that you have understood the basics of nullish coalescing operator and what is difference between ..??.., ..?.. : .., ..||.. YOU ARE READY TO ROCK THE OPERATOR!!!.🤩