{"id":19891186,"url":"https://github.com/barbarpotato/react-lazy-load","last_synced_at":"2026-04-15T13:33:24.371Z","repository":{"id":198689516,"uuid":"701288718","full_name":"Barbarpotato/React-Lazy-Load","owner":"Barbarpotato","description":"Contain about how to use Lazy Load. React's lazy function allows you to load components lazily, which means they are only loaded when they are needed. This can help reduce the initial bundle size and improve the performance.","archived":false,"fork":false,"pushed_at":"2023-10-06T12:30:54.000Z","size":196,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-28T14:46:32.908Z","etag":null,"topics":["dev-console","lazy-loading","performance","react","reactjs","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Barbarpotato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-06T10:27:22.000Z","updated_at":"2023-10-06T12:34:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"24ff9739-997c-4975-ba1b-e6b8729bb926","html_url":"https://github.com/Barbarpotato/React-Lazy-Load","commit_stats":null,"previous_names":["barbarpotato/react-lazy-load"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Barbarpotato/React-Lazy-Load","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Barbarpotato%2FReact-Lazy-Load","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Barbarpotato%2FReact-Lazy-Load/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Barbarpotato%2FReact-Lazy-Load/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Barbarpotato%2FReact-Lazy-Load/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Barbarpotato","download_url":"https://codeload.github.com/Barbarpotato/React-Lazy-Load/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Barbarpotato%2FReact-Lazy-Load/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31842925,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T13:28:40.153Z","status":"ssl_error","status_checked_at":"2026-04-15T13:28:29.396Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dev-console","lazy-loading","performance","react","reactjs","vite"],"created_at":"2024-11-12T18:17:22.467Z","updated_at":"2026-04-15T13:33:24.356Z","avatar_url":"https://github.com/Barbarpotato.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Lazy-Load\nReact Lazy Load is a technique used to load React components lazily, i.e., only when they are needed. This helps reduce the initial bundle size and improve the performance of your React application. You can easily implement lazy loading in your React project using `React.lazy()` along with `Suspense`.\n\n## Real-World Case\n![alt images](/git-image/Scenario.png)\n\nWhen building a dashboard application. This application has high complexity and requires a large size to be loaded by application users in the future. For example, the dashboard application has several different features, depending on the position of each application user. for example, users with the admin position have a different features in the application compared to users with other positions, for example Sales. When Sales enters a dashboard application. Of course, the features contained in admin will not appear for users with sales positions, BUT users with sales positions will still load the features contained in admin even though they are not used. Vice Versa, This affects the performance, speed and efficiency of an application running.\n\n## Solution\nTo asnwer the prbolem above, we will be use `Lazy Load` technique, you can optimize the initial loading time and improve the performance of your React application by dynamically loading components as needed.\n\n## Usage\nHere are the steps on how to use React Lazy Load in your project:\n\n### Create the routes for the web page.\n\nWe have 3 different pags for this case, Main page which can be access for all the role position (Admin, Sales). we have the sales component which can be access by sales person, and the last page is the admin page, where it can only be access by the admin person.\n\n```jsx\nimport { Routes, Route } from 'react-router-dom'\nimport Sales from './pages/Sales'\nimport Home from './pages/Home'\nimport Admin from './pages/Admin'\nimport './App.css'\n\nfunction App() {\n\n  return (\n    \u003cRoutes\u003e\n      \u003cRoute index element={\u003cHome /\u003e} /\u003e\n      \u003cRoute path='/sales' element={\u003cSales /\u003e} /\u003e\n      \u003cRoute path='/admin' element={\u003cAdmin /\u003e} /\u003e\n    \u003c/Routes\u003e\n  )\n}\n\nexport default App\n```\n`If we dont implement the lazy load technique in our react application. it will be load all three pages. which are Main, Sales and the Admin page`\n\n`If we implement the lazy load, whenever we access the Sales Page, it will be load the Main and the Sales Page, Vice Versa.`\n\n### Applied the Lazy Load to your React App\nAfter build the different page and route, we can implement the lazy load by using the `lazy` and `Suspense`\n```jsx\nimport { Routes, Route } from 'react-router-dom'\nimport { lazy, Suspense } from 'react'\nimport Home from './pages/Home'\nimport './App.css'\n\nconst Admin = lazy(() =\u003e import('./pages/Admin'))\nconst Sales = lazy(() =\u003e import('./pages/Sales'))\n\nfunction App() {\n\n  return (\n    \u003cRoutes\u003e\n\n      \u003cRoute index element={\u003cHome /\u003e} /\u003e\n\n      \u003cRoute path='/sales' element={\n        \u003cSuspense fallback={\u003cdiv\u003eLoading Content...\u003c/div\u003e}\u003e\n          \u003cSales /\u003e\n        \u003c/Suspense\u003e} /\u003e\n\n      \u003cRoute path='/admin' element={\n        \u003cSuspense fallback={\u003cdiv\u003eLoading Content...\u003c/div\u003e}\u003e\n          \u003cAdmin /\u003e\n        \u003c/Suspense\u003e} /\u003e\n\n    \u003c/Routes \u003e\n  )\n}\n\nexport default App\n```\n### Implementation Result\nNow, if you go to the Dev Console -\u003e Source. You need to check the page source file. and then check the src folder -\u003e pages . We cannot see our Admin and Sales Component. If we accessing the admin route or the sales route, it will appear in the source dev console. which means that our lazy load implement successfully.\n\n`Case the user is not accessing the Admin page. The Admin File is not loaded, reduce the initial bundle`\n![alt images](/git-image/lazy-load.png)\n\n`Case the user is accessing the Admin page. the Admin component will be added to the bundle size`\n![alt images](/git-images/lazy-load2.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarbarpotato%2Freact-lazy-load","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarbarpotato%2Freact-lazy-load","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarbarpotato%2Freact-lazy-load/lists"}