Carousel changes velocity bug

[Arturovj]

Hi!

asap i click on my connect metamask button the carousel changes the velocity(so fast) if i click again to disconnect it goes faster and faster. dont know if its a problem about the use of a canvas above...

Thanks in advance

this is my repo https://github.com/Arturovj/Metamask-logger

[maxmarinich]

Hi, @Arturovj! Please, use React correctly!!! Don't mutate props, consider specifics of react hooks or pure components. Save props, consider that pure components rerender every time and reset component to initial state if other not provided. To fix your case:

1. Set correct width for carousel container.

   .carousel {
   width: 100vw; // add this line
   }

2. Save intermediate state.

   
   import React, { useEffect, useState } from 'react'
   import axios from "axios";
   import { TrendingCoins } from '../../libs/api';
   import { CryptoState } from '../../CryptoContext';
   import AliceCarousel from "react-alice-carousel"
   import "react-alice-carousel/lib/alice-carousel.css";
   import './Carousel.css'

export default function Carousel() {

const [trending, setTrending ] = useState([])
const [items, setItems ] = useState([])
const [responsive, setResponsive ] = useState({
    0: {
        items:10,
    },
    1024: {
        items: 4,
    },
    2048: {
        items: 1,
    }
})

const { currency } = CryptoState();
const fetchTrendingCoins = async () => {
    const { data } = await axios.get(TrendingCoins(currency))
    setTrending(data)
};

useEffect(() => {
    fetchTrendingCoins();
}, [currency]);

useEffect(() => {
    const items = trending.map((coin) => {
        let profit = coin.price_change_percentage_24h >= 0;

        return (
          <>
              <div className='coin' >
                  <img
                    src={coin?.image}
                    alt={coin.name}
                    height="150"
                    width="150"
                    style={{ marginBottom: 10, marginTop: 40}}
                  />
                  <span>{coin?.symbol}
                      &nbsp;
                      <span>{profit && "+"} {coin?.price_change_percentage_24h?.toFixed(2)}%</span>
            </span>
              </div>
          </>
        )
    });

    setItems(items);
}, [trending]);

return (

) }

[Arturovj]

Thank you a lot Max!