Project: Optimisation

[yogeshtakeo]

Optimization Suggestions:

1. Lazy Loading with react-lazyload:

   • Integrate the react-lazyload library for better control over lazy loading.
   • This library provides a LazyLoad component that can be wrapped around the images.

   npm install react-lazyload

   // src/components/ImageGallery.js
   import LazyLoad from 'react-lazyload';
   
   // Replace the <img> tag inside the map with the following:
   {images.map((image) => (
    <LazyLoad height={150} key={image.id}>
      <img
        src={image.thumbnailUrl}
        alt={image.title}
        style={{ width: '150px', margin: '10px' }}
      />
    </LazyLoad>
   ))}

2. State Batching:

   • When updating the state with multiple images, consider batching the updates for better performance.

   // src/components/ImageGallery.js
   useEffect(() => {
    const fetchImages = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/photos?_limit=10');
        const data = await response.json();
        setImages((prevImages) => [...prevImages, ...data]);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching images:', error);
      }
    };
   
    fetchImages();
   }, []);

3. Memoization:

   • Use the React.memo higher-order component to memoize the ImageGallery component and prevent unnecessary renders.

   // src/components/ImageGallery.js
   const ImageGallery = React.memo(() => {
    // ... (no changes)
   });

4. CSS-in-JS for Styling:

   • Consider using a CSS-in-JS solution like styled-components for better styling and component encapsulation.

   npm install styled-components

   // src/components/ImageGallery.js
   import styled from 'styled-components';
   
   const GalleryContainer = styled.div`
    // Add your styles here
   `;
   
   const Thumbnail = styled.img`
    width: 150px;
    margin: 10px;
   `;

5. Error Boundary:

   • Implement an error boundary to catch and handle errors gracefully.

   // src/components/ErrorBoundary.js
   import React, { Component } from 'react';
   
   class ErrorBoundary extends Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
   
    static getDerivedStateFromError(error) {
      return { hasError: true };
    }
   
    componentDidCatch(error, errorInfo) {
      console.error('Error caught by error boundary:', error, errorInfo);
    }
   
    render() {
      if (this.state.hasError) {
        return <p>Something went wrong!</p>;
      }
   
      return this.props.children;
    }
   }
   
   export default ErrorBoundary;

   • Wrap the ImageGallery component with the ErrorBoundary.

   // src/components/ImageGallery.js
   import ErrorBoundary from './ErrorBoundary';
   
   // Wrap the ImageGallery component with the ErrorBoundary
   const ImageGallery = React.memo(() => {
    // ... (no changes)
   });
   
   const GalleryWithBoundary = () => (
    <ErrorBoundary>
      <ImageGallery />
    </ErrorBoundary>
   );
   
   export default GalleryWithBoundary;

Task:

1. Implement the suggested optimisation's in their own ways.
2. Measure the performance improvements using browser developer tools.
3. Explain the reasoning behind their optimisation choices.
4. Discuss any trade-offs made during the optimisation process.
5. Consider additional features or improvements they can add to the project.

Encouraging students to experiment with these optimisations will provide them with a deeper understanding of React and how to write more efficient and maintainable code.

[Narayanadhikari9]

Name: Narayan Adhikari Project: Optimization GitHub Link: https://github.com/Narayanadhikari9/Lazyloading-project