I have a component that I call AnswerBetaComponent. It returns a beta distribution (a mathematical function, a probability distribution, which could just as well be any other function), based on the inputs of the user. A beta distribution is dependent upon two variables, which the user decides by interacting with the screen, alpha and beta.

By swiping right, the user increases alpha and decreases beta. By swiping left the user does the opposite. By swiping upwards the user increases alpha and beta proportionately.

When alpha and beta are set, I calculate a new set of points based on those values in my AnswerBetaComponent. I then return another component called BetaGraph, responsible for displaying the function in the form of an svg.

A general explanation of the AnswerBetaComponent can be found below.

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>
  );
};

The BetaGraph component looks somewhat like this:

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

Since the polygon with the points defined in AnswerBetaComponent is passed as a child to BetaGraph, it gets displayed through the svg.

The problem I have is that the function renders quite slow, especially on mobile devices, meaning that it feels somewhat laggy when a user swipes the function left, right, up or down.

Is there any way I can increase the rendering speed of my component, such that what is displayed on the screen is a beta distribution which can be seamlessly drawn to any side of the screen?