Slow and laggy render

[msagerup]

Hi, I am having some issues.

The Mapbox is very "sticky and slow" . Compared to i.e the uber example.

any tips on what could be the issue?

It is especially slow when in mobile view, or viewing on a phone. (this is a mobile-first web app so it would be primary viewed on the phone)

here is the map. www.diggmeny.no

import axios from 'axios';
import ReactMapGL, { Marker, Popup } from 'react-map-gl';
import { Trail, animated, config } from 'react-spring/renderprops';
import { useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { getCompany } from 'src/slices/company';
import { Img } from 'react-image';
import PropTypes from 'prop-types';
import {
  makeStyles,
  useTheme,
  Card,
  CardContent,
  Container,
  Box,
  Typography
} from '@material-ui/core';
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';
import ResturantIcon from 'src/svgs/resturant';
import zIndex from '@material-ui/core/styles/zIndex';
// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

const useStyles = makeStyles(theme => ({
  root: {},
  resturantIcon: {
    backgroundColor: 'white',
    borderRadius: '10px'
  }
}));

const MapBox = () => {
  const classes = useStyles();
  const theme = useTheme();
  let history = useHistory();
  const dispatch = useDispatch();

  // Mapviewport
  const [viewPort, setViewPort] = useState({
    latitude: 59.9133301,
    longitude: 10.7469701,
    zoom: 13,
    width: '100vw',
    height: '100vh'
  });
  const [resturants, setResutrants] = useState('');
  const [selectedResturant, setSelectedResurant] = useState(null);
  const [resturantMenu, setResturantMenu] = useState(null);

  // Get Resturants
  useEffect(async () => {
    try {
      const result = await axios.get(`${process.env.REACT_APP_API}/api`);
      // console.log(result)
      setResutrants(result.data.data);
      localStorage.removeItem('establishment');
    } catch (error) {
      console.log(error);
    }
  }, []);

  const handleGetMenu = async id => {
    try {
      const result = await axios.get(
        `${process.env.REACT_APP_API}/api/menus/${id}`
      );
      setResturantMenu(result.data.data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      {/* <h2 style={{ color: 'white' }}>MAP</h2> */}
      <ReactMapGL
        mapStyle="mapbox://styles/msagerup/cklxt469w575l17o4urp8v69n"
        {...viewPort}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_KEY}
        onViewportChange={viewPort => {
          setViewPort(viewPort);
        }}
      >
        {/* Map resturant with marker */}
        {resturants &&
          resturants.map((resturant, index) => {
            return (
              <Marker
                key={index}
                latitude={resturant.location.coordinates[0]}
                longitude={resturant.location.coordinates[1]}
              >
                <Box
                  onClick={e => {
                    e.preventDefault();
                    setSelectedResurant(resturant);
                    // Get Selected Resturant Menu.
                    handleGetMenu(resturant._id);
                  }}
                  p={0.2}
                  className={classes.resturantIcon}
                >
                  <ResturantIcon />
                </Box>
              </Marker>
            );
          })}

        {/* If selected resturant */}
        {selectedResturant && (
          <div style={{ zIndex: 1, position: 'absolute' }}>
            <Popup
              anchor="top"
              offsetTop={63}
              offsetLeft={25}
              closeButton={false}
              closeOnClick={true}
              dynamicPosition
              onClose={() => {
                setSelectedResurant(null);
              }}
              // dynamicPosition
              latitude={selectedResturant.location.coordinates[0]}
              longitude={selectedResturant.location.coordinates[1]}
            >
              <Typography variant="subtitle1">
                {selectedResturant.name}
              </Typography>
            </Popup>
          </div>
        )}
        {/* Render info about resturants */}
        {selectedResturant && (
          <Box
            mt={2}
            style={{ zIndex: 5, position: 'absolute', width: '95%' }}
            onClick={() => {
              history.push(`/${selectedResturant.codeURI}`);
            }}
          >
            <Container>
              <Box width="100%">
                <Card>
                  <CardContent>
                    <Typography variant="h3" style={{ color: 'white' }}>
                      {selectedResturant.name}
                    </Typography>
                    <Typography>{selectedResturant.description}</Typography>
                    {resturantMenu && (
                      <Box
                        display="flex"
                        mt={1}
                        flexWrap="wrap"
                        flexDirection="row"
                      >
                        <Trail
                          native
                          config={config.stiff}
                          items={resturantMenu}
                          keys={resturantMenu => resturantMenu.name}
                          from={{
                            transform: 'translate3d(0px,100px,0) scale(0.4)',
                            opacity: 0
                          }}
                          to={{
                            transform: 'translate3d(0px,0px,0) scale(1)',
                            opacity: 1
                          }}
                        >
                          {(item, index) => props => {
                            return (
                              <Box key={index}>
                                <animated.div style={props}>
                                  <Box m={0.3}>
                                    <Img
                                      style={{ width: '90px' }}
                                      src={`${process.env.REACT_APP_API}/uploads/${item.photo}`}
                                      title="item Picture"
                                    />
                                  </Box>
                                </animated.div>
                              </Box>
                            );
                          }}
                        </Trail>
                      </Box>
                    )}
                  </CardContent>
                </Card>
              </Box>
            </Container>
          </Box>
        )}
      </ReactMapGL>
    </>
  );
};
// 59.94385598307512, 10.75984982232587

export default MapBox;

[Pessimistress]

You are recreating too many nodes during each rerender. See example on https://visgl.github.io/react-map-gl/docs/api-reference/marker about improving performance with useMemo.