React Hooks

1. useState hook

The useState hook in used to create react variable.
Normal variable in react are static variable and cannot be modified at runtime as well it is not a good practice to directly update the variable using dom update functions like getelementbyid().
Hence, create variables using useState.
It can be modified using 2 methods
By passing the state directly or use the previous state then update the current state.
Initialization:
const [state, setState] = useState(“InitialState”);
Modifications:
1. setState(“newState”)
2. setState(state => state + “ → update”)

Also, react reconcilation uses diff algorithm which have a constant watch on every state variables once change in state variable the same will be reflected inside the dom at runtime by rerendering the component.

For more understanding read:
https://react.dev/reference/react/useState

2. useEffect hook
It is function have 2 params 1 is callback and other dependency array
It call every time thus we use dependency array to call use effect
to use it once -> pass empty dependency array
to use it based on state variable > pass state variable in the dependency array
The callback function cannot be async as it always have a return statement used for unmount or clearing events.
React never re-renders because of useEffect hook. But if there in a state inside the useEffect hook that state change triggers the re-render.
React always maintain how many times we require to call useEffect hook.

3. useCallback
cache a function defination between re-renders
const cachedFn = useCallback(fn, dependencies)
Usage
- Skipping re-rendering of components
- Updating state from a memoized callback
- Preventing an Effect from firing too often
- Optimizing a custom hook

4. useRef
Lets you reference a value that’s not needed for rendering.
const ref = useRef(initialValue)
useRef top level component to declare a ref.
initialValue — ref object’s current property to be initially. ignored after initial render.
returns — object with a single property.
current — initially set to initialValue.
pass the ref attribute to JSX node. react will set its current property.
next renders -> useRef will retruns the same object.

5. useContext
Call this at the top level of your component to *read* and *subscribe* to context.
The context itself does not hold the information, it only represents the kind of information you can provide or read from components.

Parameter: Some Context.

Returns: context value. Always up to date. React re renders components that read some context if it changes.

How context value determined?
It is determined as the value passed to the closest (maybe the closest parent component that determines the context value) SomeContext.Provider above the calling component in the tree. If there is no such provider, defaultValue.
Doesn’t consider providers in the component from which you’re calling useContext().
Object.is?

How to create, read, pass, and update the context?
const ContextName = createContext(null); // creating the context here null is the fallback default value
const contextValue = useContext(contextName); // reading the context value
<ContextName.Provider value=’defaultValue’><ComponentToBePassed /></ContextName.provider> //passing the context
use state instead of passing static default value. To update the context.