Tengo un componente al que llamo AnswerBetaComponent. Devuelve una distribución beta (una función matemática, una distribución de probabilidad, que bien podría ser cualquier otra función), basada en las entradas del usuario. Una distribución beta depende de dos variables, que el usuario decide interactuando con la pantalla, alfa y beta.

Al deslizar hacia la derecha, el usuario aumenta alfa y disminuye beta. Al deslizar hacia la izquierda, el usuario hace lo contrario. Al deslizar hacia arriba, el usuario aumenta alfa y beta proporcionalmente.

Cuando se establecen alfa y beta, calculo un nuevo conjunto de puntos en función de esos valores en mi AnswerBetaComponent. Luego devuelvo otro componente llamado BetaGraph, responsable de mostrar la función en forma de svg.

Una explicación general de AnswerBetaComponent se puede encontrar a continuación.

 export const AnswerBetaComponent = (props) => { ... // calculating alpha and beta through onMouseMove and onTouchMove event handlers. ... return ( <div className="answer-component-container"> <div onMouseMove={mouseMove} > <BetaGraph> <polygon points={pointsDeterminedByUserInteraction} onTouchMove={swipeMove} /> </BetaGraph> </div> </div> ); };

El componente BetaGraph se parece a esto:

 const BetaGraph = (props) => { return <svg>{props.children}</svg> }

Dado que el polígono con los puntos definidos en AnswerBetaComponent se pasa como elemento secundario a BetaGraph, se muestra a través de svg.

El problema que tengo es que la función se vuelve bastante lenta, especialmente en dispositivos móviles, lo que significa que se siente un poco lento cuando un usuario desliza la función hacia la izquierda, hacia la derecha, hacia arriba o hacia abajo.

¿Hay alguna manera de que pueda aumentar la velocidad de representación de mi componente, de modo que lo que se muestra en la pantalla sea una distribución beta que se pueda dibujar sin problemas en cualquier lado de la pantalla?