lesson 11: Understanding React Hooks: useEffect

lesson-11: Understanding React Hooks: useEffect()


. Understanding every usecase of useEffect() hook in React

. What are the reason to use useEffect()
. What is Side Effect in React
. How useEffect create Infinite Loop by useEffect depencencies
. What is the reason to creating infinite loop in React useEffect
. How to solve the useEffect() hooks infinite loop
. Understanding Component Life-Cycle methods in React
. What are the use case of clean up function in useEffect() hook
. How to handle async/await inside useEffect() hook
. Every usecase of useEffect() hook in real-world senerio



Side Effects:

. API call
. To conditionally re-render the Component
. Over come `One-Step-Behind` of useState lagging



Life Cycle of Render:

1. Render the module
2. Render the Component
3. useLayoutEffect is called
4. useEffect is called
. Mount Phase : component added to DOM is called mounted
. Unmount Phase : component removed from DOM is called unmounted
. Update Phase


React Component's Life-Cycle has 3 phase: [for Functional component]

. Component added / Mounted : Happend Only once per component
. Component's State Updated : Everytime state value changes component re-render again and again
. Component Removed / Un-Mounted : Happend Only once per component



useEffect()
. useState()
. useCallback() : Same as useMemo(), but useCallback prevent function re-rendering




Infinite Loop by useEffect():
- if we use any variable as dependency and try to modify that value inside that useEffect() hooks,
then it create infinite loop.

Prevention Infinite Loop:
- To prevent infinete the easiest way to use useCallback() hook, it create cache,
and cache ignore 2nd time to create same value.


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Music: Ambient Corporate by RinkevichMusic
https://soundcloud.com/rinkevichmusic
https://protunes.net/
Video Link: • RinkevichMusic - ...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬