Functional based lifecycle Hook

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

//Implement a function which convert the given boolean value into its string representation.
//Note: Only valid inputs will be given.

function booleanToString(b){
  const b = new Boolean(true);
  
console.log(b.toString())
}

//Complete the method that takes a boolean value and return a "Yes" string for true, or a "No" string for false.

function boolToWord( bool ){
const str = bool === true ? "Yes" : "No"
return str
  }

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

onClick={() => window.open(url, "_blank")}

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

//componentDidMount
useEffect(() => {
    console.log("Behavior before the component is added to the DOM");
  }, []);

//componentDidUpdate
useEffect(() => {
    console.log("Behavior when the component receives new state or props.");
  });

//Or

useEffect(() => {
    console.log("Behavior when the value of 'stateName' changes.");
  }, [stateName]);

//Or
import React, { useEffect, useRef } from "react"
const mounted = useRef()
useEffect(() => {
  if (!mounted.current) {
    // do componentDidMount logic
    mounted.current = true
  } else {
    // do componentDidUpdate logic
  }
})

//componentWillUnmount
useEffect(() => {
    return () => {
            console.log("Behavior right before the component is removed from the DOM.");
        }
  }, []);

//Putting it all together
  useEffect(() => {
    const intervalId = setInterval(() => {
      document.title = `Time is: ${new Date()}`;
    }, 1000);
 
    return () => {
      document.title = "Time stopped.";
      clearInterval(intervalId);
    }
  }, []);

const student = {
    name: 'Monica',
    class: 7,
    age: 12
}

// using for...in
for ( let key in student ) {

    // display the properties
    console.log(`${key} => ${student[key]}`);
}

const student = {
    name: 'Monica',
    class: 7,
    age: 12
}

// using for...in
for ( let key in student ) {

    // display the properties
    console.log(`${key} => ${student[key]}`);
}

	const { data: cryptoList, isFetching } = useGetCryptosQuery(count);
	const [cryptos, setCryptos] = useState([]);
	const [searchTerm, setSearchTerm] = useState("");

	useEffect(() => {
		setCryptos(cryptoList?.data?.coins);

		const filteredData = cryptoList?.data?.coins.filter((coin) =>
			coin.name.toLowerCase().includes(searchTerm.toLowerCase())
		);

		setCryptos(filteredData);
	}, [cryptoList, searchTerm]);

//Instead of writing
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";

for (let i = 0; i < cars.length; i++{
  text += cars[i] + "<br>";
}
     
syntax: for(statement 1; statement 2; statement 3){
  //code block to be executed
}     
     
//Statement 1 initializes the variable used in the loop (let i = 0). Many values can be initiated (separated by coma)
     
//Statement 2 evaluates the condition of the inital value. If it returns true, the loop will start over again, if it returns false, the loop wil end
     
//Statement 3 increments the value of the inital variable. It can do anything like negative increment (i--), and positive increment (i = i +15)

//The JS "for in" statement loops through the properties of an Object:

//Syntax
for (key in object){
  //code block to be executed
}

const person = {first_name: "John", last_name: "Doe", age:25};

let text = "";
for (let x in person) {
  text += person[x]
}

//John Doe 25

// Example explained
-   The for in loop iterates over a person object
-   Each iteration returns a key (x)
-   The key is used to access the value of the key
-   The value of the key is person[x]

//For in over arrays
for (variable in array){
  code
}

const numbers = [45,4,9]

let txt = "";
for (let x in numbers){
  txt += numbers[x]
}

// 45
//  4
//  9

//NOTE: It is better to use a "for" loop, a "for of" loop, or "Array.forEach()" when the order matters


///Array.forEach()
//forEach() method calls a function (a callback function) once for each array element
const numbers = [45,4,9]

let txt = "" (or let arr = []);
numbers.forEach(myFunction);

function myFunction(value, index, array){
  txt += value;
}