React (HOOKS)

 React Hooks: 

1. Feature of class based component into the function based component. 
2. it allows you to use state and other react features without writing the class. 
   

useState :

is a React Hook that lets you add a state variable to your component.

useState(initialState)

const [age, setAge] = useState(42);

Ref : https://react.dev/reference/react/useState

useEffect :  

There is the react lifecycle 

 useEffect hook called when the component started mounted. 

useEffect(setup, dependencies?) 

useEffect hook need a dependency in the second argument, we can set multiple dependency as an args. 

1. useEffect will run every time whenever the component render
   
2. Component will re-render if the dependency updated or changed.
3. Again component will run whenever it will unmounted, it means for un-mounting we need to return function from useEffect.
   

Ref CheatSheet Document : https://drive.google.com/file/d/1dko8AZyv94S0Dxwf6h8wFJt9WP_eNvcR/view

 

Usage:

• Fetching data with Effects
• Specifying reactive dependencies
• Updating state based on previous state from an Effect 
• Reading the latest props and state from an Effect
• Displaying different content on the server and the client  
  

 useContext : 

useContext is a React Hook that lets you read context from your component. 

useContext is used to manage global data in react application.

const value = useContext(SomeContext)

We can pass props from Top component to child component without passing it every component.

We can use useContext by creating the context,

Create context Requires three steps:

1. Creating the context

2. Providing the context

3. Consuming the context
   

   

Usage :

• Passing data deeply into the tree
•  Updating data passed via context
•  Specifying a fallback default value
•  Overriding context for a part of the tree
•  Optimizing re-renders when passing objects and functions 

useRef : 

useRef is a React Hook that lets you reference a value that’s not needed for rendering.

useRef allow us to access the DOM elements.

const ref = useRef(initialValue)

useRef returns a ref object with a single current property initially set to the initial value you provided.

On the next renders, useRef will return the same object. You can change its current property to store information and read it later. 

There is difference between useRef & useState, useState re-render the component while useRef did not re-render the component. 

By using a ref, you ensure that:

• You can store information between re-renders (unlike regular variables, which reset on every render).
• Changing it does not trigger a re-render (unlike state variables, which trigger a re-render).
• The information is local to each copy of your component (unlike the variables outside, which are shared).

 Usage

• Referencing a value with a ref
• Manipulating the DOM with a ref 

Ref : https://react.dev/reference/react/useRef

useReducer 

useReducer is used to manage state in our application. in other words useReducer works like a state management tool.

 What is state management : 

State management is used to manage all state of application in s simple way.
Always use the useReducer hook when you have lot of states and methods to handle
useReducer(reducer,initialState);
here reducer is a pure function that takes state & action and return the new state.

useLayoutEffect

useLayoutEffect is same as useEffect hook, but only the difference is
useEffect run after the DOM is printed on the browser while useLayoutEffect runs before the DOM is printed on the browser,
and useLayoutEffect runs synchronously,
Uses : to get the dimension of the layout.

 

They render in below order :

 

useMemo

useMemo hook is used to memoization in react,
What is memoization : its a technique to improve the performance of the code,
it is usefull to avoid expensive caclculations on every render when the retured is not changed.

const memoCalculation = useMemo(callback, [dependency]);

its similer to useEffect hook but in useEffect we can not store the value while in useMemo hook we can store the value.

useCallback

useCallback is used to return memoize function,
it also usefull for preventing functions from being re-created on re-rendering.
use Callback is same as useMemo only difference is as below.