Custom Hooks

Why ? How ? When ?
Why ?
- Readability,
- Resuability,
- maintainability / modularity / sepration of concern
- testability
Why we use functions ?
- To perform some task that can be reused.
There should be something common, where we can keep our utility functions and use in our code
- utils folder: reusable functions could be placed here

RestaurantMenu.js Component is doing two things : fetching data & displaying data
Now, we simply want the component tp do only one job : display data. So, we are moving fetching logic to custom hook
Whenever creating a custom hook
- create in a new file .
- create hook name with use word. [This is a react way of doing things. Eg: useState()]
Why export default for custom hook
- Since there is only one separate hook for each hook function.
Why named export for config file
- As, there are many functions and variables in config.js
Update state using custom hook
- Inside custom hook => state & useEffect and async API call
Create Custom hook for checking internet connection : to use only once
- How to fake offline -> network tab -> offline
- Cleanup eventListener while moving out of that component.
Assigment :
- creat custom hook for Local Storage. [Hint: Get and Set local variables]

Code Splittling

Code Splittling
- also known as Dynamic bundling
- also known as Lazy loading
- also known as Chunking
- also known as On Demand loading
- also known as On Logical bundles
Import Instamart.js using lazy load
- This is a promise
- Initially, on demand loaded components, will not be laoded
- React suspends the loading using Suspense
DISCLAMER: Don't lazy load inside component, As, it will reload everytime during re-renders.