HOOKS come first I would say, one of the most important part of React, I would say one of the most important part in any other js framework

RULES

Only Call Hooks at the Top Level

Only Call Hooks from React Functions

Basic Hook
useState()		Acts like a container for the state of the variables, as well as lets to change, one of the most used hooks in react js
Basic Hook
useEffect()		This hook is being used for having control over rendering in the component, it can be called every time when something will be changed in the component, in case we will not pass an empty array for example in the call as a param, or else if its empty it will call it automatically, use cases can be websockets, API fetching
useEffect can not be async itself, so you use async in your functions, but also u can use inside it the promises then, catch, final chains.

NOTE: in case you will use timers or anything like subscriptions from RxJS, WebSockets, make sure you clean up after yourself by unsubscribing an example u can see bellow



return there will clean up the timer when we wont use the component anymore.

The component can have more than one useEffect() hook, to separate the logic, and split the code, they will be called by the order that they have been defined by the developer.
Basic Hook
useContext()		useContext() hook is being used to solve the “prop” hell, as an example of it you can think of a component that has 6 7 levels of the hierarchy, and you need to pass a data to the grandchild of level 7, so in that case you need to have props in all those components, useContext() solves it by letting you to use createContext from react and then defining the context, that must be available in the container.

const MyContext = React.createContext(defaultValue);
Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.

<MyContext.Provider value={/* some value */}>

We must also note, that it’s a global to application-level state, which is dangerous.

useContext() can be used instead of Redux, in case the app is small.



One of the most popular use cases is the theme configuration and authentication of your users.

useContext lets you “use” context without a Consumer

function HeaderBar() {
const user = useContext(CurrentUser);
const notifications = useContext(Notifications);
return (
<header> Welcome back, {user.name}! You have {notifications.length} notifications. </header>
);
}
useRef()useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

A common use case is to access a child imperatively:

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.
useLayoutEffect()The signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.
Prefer the standard useEffect when possible to avoid blocking visual updates.
useReducser()
An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)
useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.
useCallback()Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
useMemo()This hook is being used for the optimization of the app, in case there is an action that takes a bit amount of time to compute something, which can affect the performance of the component.