Chapter 09- Optimizing Our App

1. when to create own custom hooks:
2. how “
3. why ” => modularity, reusability, readability, testable, maintainable
4. why not to make normal function instead of hooks => we can’t create state or write useState, useEffect or other hooks inside normal function. if we are using it, it is hooks. using these inbuilt hooks help react for reconcillation, render

Modulararity means we have broken down our code in meaningful peaces

Functional Component: Function that return some JSX.

Hooks peace of JS code that extract some logic

whenever you leaving the page you should clear the event lister or other trash you created in your component

Optimize React App

1. chunking / code splitting / lazy loading / Dynamic Bundling / on-demand Loading / Dynamic Import
2. keep image over the CDN (Content Delivery Network)
3. when you are loading the component on demand, react will try to render the component which is not ever there so it suspense the operation. to fix this we should use keep component inside <Suspense></Suspense>
4. Never ever dynamically load the component inside other component because it will lazy load the component on each render cycle to lazy load on the top (where we are importing the component)