Topics we should know of js for Mern Stack Development

1: Variables
2: Arrow Functions

3: Work with objects and arrays using rest and spread (The JavaScript spread
operator (...) allows us to quickly copy all or part of an existing array or object
into another array or object.)

4: object and array destructuring

5: Template literals (To write the js in string is known as template literals)
6: classes
7: call backs

"async and await make promises easier to write"

async makes a function return a Promise

await makes a function wait for a Promise

To illustrate destructuring, we'll make a sandwich. Do you take everything out of

the refrigerator to make your sandwich? No, you only take out the items you would
like to use on your sandwich.

Destructuring is exactly the same. We may have an array or object that we are
working with, but we only need some of the items contained in these.

Destructuring makes it easy to extract only what is needed.

Hooks were added to React in version 16.8.

Hooks allow function components to have access to state and other React features.
Because of this, class components are generally no longer needed.

Although Hooks generally replace class components, there are no plans to remove
classes from React.

The React useState Hook allows us to track state in a function component.

We initialize our state by calling useState in our function component.

useState accepts an initial state and returns two values:

The current state.

A function that updates the state.

Initialize state at the top of the function component.

import { useState } from "react";

function FavoriteColor() {
 const [color, setColor] = useState("");
}
Notice that again, we are destructuring the returned values from useState.

The first value, color, is our current state.

The second value, setColor, is the function that is used to update our state.

These names are variables that can be named anything you would like.

Lastly, we set the initial state to an empty string: useState("")

The useEffect Hook allows you to perform side effects in your components.

Some examples of side effects are: fetching data, directly updating the DOM, and
timers.

useEffect accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)