https://github.com/manikmaity/coingecko-cryptotracker

https://github.com/manikmaity/coingecko-cryptotracker

Last synced: about 18 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/manikmaity/coingecko-cryptotracker
• Owner: ManikMaity
• Created: 2024-08-16T03:29:48.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-23T15:40:53.000Z (3 months ago)
• Last Synced: 2024-08-23T17:39:41.092Z (3 months ago)
• Language: JavaScript
• Homepage: https://coin-gecko-crypto-tracker.vercel.app
• Size: 1.11 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Detailed Notes on Lazy Loading, Suspense, and Error Handling in React

## 1. Lazy Loading in React

Lazy loading is a technique used to defer the loading of components until they are needed. This helps in reducing the initial load time of the application.

### Using `React.lazy`

- `React.lazy` is used to dynamically import a component.

- The component is only loaded when it’s actually needed.

```javascript

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {

  return (

    


      Loading...
}>

        

      

    

  );

}


export default App;

```

- **`React.lazy(() => import('./LazyComponent'))`:** This imports the `LazyComponent` only when it is rendered.

- **`Loading...}>`:** The `Suspense` component wraps the lazy-loaded component. The `fallback` prop is used to show a loading UI while the component is being loaded.

## 2. Code Splitting

Code splitting allows you to split your code into separate bundles that can be loaded on demand.

- React uses dynamic `import()` for code splitting.

- Combined with lazy loading, this can significantly improve performance.

```javascript

import React, { Suspense } from 'react';

const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function App() {

  return (

    


      Loading Another Component...
}>

        

      

    

  );

}


export default App;

```

## 3. Handling Routes with `react-router-dom`

### Using `useParams` and `useLocation`

- `useParams`: A hook to access route parameters.

- `useLocation`: A hook to access the current location object, which represents where the app is now.

```javascript

import React from 'react';

import { useParams, useLocation } from 'react-router-dom';

function DetailPage() {

  const { id } = useParams();

  const location = useLocation();

  return (

    


      
Details for item {id}

      
Current URL: {location.pathname}

    

  );

}


export default DetailPage;

```

### Using Layout with `Outlet`

- The `Outlet` component is used to render child routes in nested routing scenarios.

```javascript

import React from 'react';

import { Outlet } from 'react-router-dom';

function Layout() {

  return (

    


      My App

      

         {/* Renders the matched child route component */}

      

      © 2024 My App

    

  );

}


export default Layout;

```

## 4. State Management with Zustand

Zustand is a small, fast, and scalable state management library for React.

### Setting Up a Store

```javascript

import create from 'zustand';

const useStore = create((set) => ({

  count: 0,

  increment: () => set((state) => ({ count: state.count + 1 })),

  decrement: () => set((state) => ({ count: state.count - 1 })),

}));

export default useStore;

```

### Using the Store in a Component

```javascript

import React from 'react';

import useStore from './store';

function Counter() {

  const { count, increment, decrement } = useStore();

  return (

    


      
Count: {count}

      Increment

      Decrement

    

  );

}


export default Counter;

```

## 5. Handling Errors with React Error Boundaries

### Using `react-error-boundary`

The `react-error-boundary` package provides a simple way to handle errors in React.

### Setup an Error Boundary

```javascript

import React from 'react';

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {

  return (

    


      
Something went wrong:

      
{error.message}

      Try again

    

  );

}


function MyComponent() {

  // some code that might throw an error

  return 
My Component
;

}


function App() {

  return (

    

      

    

  );

}

export default App;

```

- **`ErrorFallback`:** A custom UI component to display when an error occurs.

- **`resetErrorBoundary`:** A function to reset the error boundary's state, allowing for a retry.

## 6. Lazy Loading Images in HTML

In HTML, you can defer the loading of images using the `loading="lazy"` attribute. This is useful for improving page load performance.

```html



```

- **`loading="lazy"`:** This attribute tells the browser to only load the image when it comes into view.

# Summary

- **Lazy Loading and Code Splitting:** Optimize performance by loading components only when needed.

- **Routing with `react-router-dom`:** Use `useParams`, `useLocation`, and `Outlet` for effective route management.

- **State Management with Zustand:** Simplify state management with a lightweight store.

- **Error Handling with `react-error-boundary`:** Gracefully handle errors with custom fallback UIs.

- **Lazy Loading Images:** Use HTML’s native lazy loading for better performance.