Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/subrat611/learn-from-oss-1
This is part 1 of the open-source codebase covering the project 🔴 Idurar 🔴. Learn every concept with performance insights and examples.
https://github.com/subrat611/learn-from-oss-1
Last synced: about 7 hours ago
JSON representation
This is part 1 of the open-source codebase covering the project 🔴 Idurar 🔴. Learn every concept with performance insights and examples.
- Host: GitHub
- URL: https://github.com/subrat611/learn-from-oss-1
- Owner: subrat611
- Created: 2024-07-15T18:19:16.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-07-16T17:53:57.000Z (4 months ago)
- Last Synced: 2024-07-16T22:54:29.943Z (4 months ago)
- Language: JavaScript
- Size: 43.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> **⚠️ NOTE: The Order In Which I Have Written Explains How I Read The Codebase.**
## Folder Structure
| Name | Description |
| ---------- | -------------- |
| apps | update soon... |
| assets | update soon... |
| auth | update soon... |
| components | update soon... |
| config | update soon... |
| context | update soon... |
| forms | update soon... |
| hooks | update soon... |
| layout | update soon... |
| locale | update soon... |
| modules | update soon... |
| pages | update soon... |
| redux | update soon... |
| request | update soon... |
| router | update soon... |
| settings | update soon... |
| style | update soon... |
| utils | update soon... |
## App.jsx
### Code
```jsx
import { lazy, Suspense } from "react";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
const MainOs = lazy(() => import("./apps/AppMainOs"));
function App() {
return (
Loading...}>
);
}
export default App;
```
### Explanation
- React's `lazy` and `Suspense` features to load the `MainOs` component asynchronously.
- The `lazy` function allows you to dynamically import a component. **This means the component is not included in the initial JavaScript bundle and will only be loaded when it is needed.**
- `Suspense` is a component that wraps lazy-loaded components. **It allows you to specify a fallback UI (like a loading spinner or placeholder) that will be displayed while the lazy component is being loaded.**
### Benefits of lazy and Suspense
**1. Improved Performance**
- Reduced Initial Load Time: By splitting your code and loading components only when needed, you can reduce the initial load time of your application.
- Smaller Initial Bundle Size: Lazy loading helps in creating smaller initial JavaScript bundles, which means quicker load times and less bandwidth usage.
**2. Better User Experience**
- Smooth Loading States: With Suspense, you can show loading indicators or placeholders, providing a smoother user experience while waiting for components to load.
- Perceived Performance: Users perceive applications as faster when they see immediate feedback, such as loading spinners, rather than waiting with no indication of progress.
**3. Efficient Resource Usage**
- On-Demand Loading: Resources are loaded only when needed, which means that users don't have to download code for features they may not use immediately, or at all, in their session.
### How lazy and Suspense Work Together
> Lazy:
>
> When you use lazy to import a component, it returns a promise that resolves to the component. This allows React to handle it as an asynchronous operation.
>
> Suspense:
>
> When React encounters a lazy-loaded component wrapped in Suspense, it shows the fallback UI (like or
Loading...
) until the promise returned by lazy resolves. Once resolved, it replaces the fallback UI with the loaded component.
### Example Scenario
> Imagine an application with multiple routes and some of them are rarely accessed.
>
> Instead of loading all components at once, you can load each route’s component only when the user navigates to it.
>
> This significantly reduces the initial load time and enhances performance.
### Advanced Usage Tips
- **Error Boundaries:** Combine Suspense with error boundaries to handle loading errors gracefully.
- **React Router Integration:** Use React.lazy with React Router to lazy load route components, making routing efficient.
- **Chunking Strategies:** Implement chunking strategies for more efficient code splitting, such as grouping related components together.