I’m trying to make a GUI like figma, powerpoint or event slide, where you can drag items wherever you like and even off the screen (where in this case, the screen will follow the box).
The fact is that when I implement this, the react-electron app begins to slow down but only when scrolling the div.

Here is my code:

`import React from ‘react’;
import { useState, useEffect, useRef } from ‘react’;

import { throttle } from ‘lodash’;

import Box from ‘./components/box’;

const App = () => {
const container = useRef(null);

const [scrollX, setScrollX] = useState(0);
const [scrollY, setScrollY] = useState(0);

const scrollXRef = useRef(scrollX);
const scrollYRef = useRef(scrollY);

useEffect(() => {
    scrollXRef.current = scrollX;
    scrollYRef.current = scrollY;
}, [scrollX, scrollY]);

useEffect(() => {
    const handleScroll = throttle((event) => {
        const newPosY = -event.deltaY/6 + scrollYRef.current;
        if (-200 - 100/window.innerHeight * 50 < newPosY && newPosY < 200 + 100/window.innerHeight * 20) {
            setScrollY(newPosY);
        }

        const newPosX = -event.deltaX/6 + scrollXRef.current;
        if (-200 - 100/window.innerWidth * 50 < newPosX && newPosX < 200 + 100/window.innerWidth * 20) {
            setScrollX(newPosX);
        }
        console.log(event.deltaX, event.deltaY)
    }, 10);

    container.current.addEventListener('wheel', handleScroll);

    // Cleanup event listener on component unmount
    return () => {
        container.current.removeEventListener('wheel', handleScroll);
    };
}, 10);


return (
    <div id="container">
        <div style={{top: (scrollY - 200) + "vh", left: (scrollX - 200) + "vw"}} ref={container}>
            <Box container={container} scroll={[scrollX, scrollY]} type="Insert into"/>
            <Box container={container} scroll={[scrollX, scrollY]} type="Select"/>
        </div>
    </div>
)

}

export default App;
`

Consider the component render an empty div (honnestly is not much than that)
And to move the I use the librairie framer-motion of react

(The boxes and the container are in absolute position)

If you have any idea of why it does slow down when “wheeling” or if you have an idea to remake the option but working properly it would be great.

I’m open to every proposition,

Thank’s!

Dependencies and versions:

• react: 18.3.1
• electron: 31.1.0
• framer-motion: 1.0.10