2

I have a website where I post my p5/processing/visual sketches made using p5js. I made the website from scratch, and it sorta became dated and cumbersome to update. So I figured I would try out ReactJS (NextJS to be specific) for the website scaffolding. It all seemed to work until I noticed that p5 sketches run really slow when loaded through ReactJS. I don't really understand why because two frameworks are independent. Code is the same as far as p5 is concerned. Outside React, they seem to run about 60 fps, with React at about 1-10fps.

I first started the project using P5Wrapper, but eventually switched to modified version like 

import React from 'react'
import p5 from 'p5'

export default class P5Container extends React.Component 
{
    componentDidMount() 
    {
        this.canvas = new p5(this.props.sketch, this.wrapper)
        if( this.canvas.myCustomRedrawAccordingToNewPropsHandler ) 
        {
            this.canvas.myCustomRedrawAccordingToNewPropsHandler(this.props)
        }
    }

    componentWillReceiveProps(newprops) 
    {
        if(this.props.sketch !== newprops.sketch)
        {
            this.canvas.remove()
            this.canvas = new p5(newprops.sketch, this.wrapper)
        }
        if( this.canvas.myCustomRedrawAccordingToNewPropsHandler ) 
        {
            this.canvas.myCustomRedrawAccordingToNewPropsHandler(newprops)
        }
    }

    componentWillUnmount() 
    {
        this.canvas.remove()
    }

    render() 
    {
        return <div ref={wrapper => this.wrapper = wrapper}></div>
    }
}

And usage like this:

<P5Container sketch={sketch} params={this.props.query} />

I also found an article describing the process here: Medium, but that didn't solve the issue.

I also found older questions about the same thing: here and here, but both were not answered / solved.

Is there something about React frame work that causes slower rendering? Or maybe the way p5 is loaded causes slow downs? any ideas? please halp!

SpaceBear
  • 832
  • 3
  • 8
  • 22
  • I use, virtually, the same modified wrapper with little to no performance decrease. The only difference worthy of note is that I use the `componentDidUpdate` life cycle instead of `componentWillReceiveProps`... Maybe try that? – Julian Mar 21 '19 at 04:49
  • @Julian Thanks for your response. I switched to componentDidUpdate and I feels like there is a bump in performance, but it is still so slow. Are you running react in production / minified? What browser do you use? I tried with FF and Safari, and both behave the same. Also, how complex is your sketch? Most of my sketches are pretty involved and were already pushing limits of my machine, so now with this - they just look so bad – SpaceBear Mar 21 '19 at 15:36
  • Minified. Tested in FF, Chrome, Edge and Safari with pretty much the same results. Sketches can be taxing, sometimes dropping as low as 20 fps, even when running without React. Maybe share a link so we could take a closer look? – Julian Mar 21 '19 at 15:48
  • i don't have react hosted anywhere, it's just local. I'll try to set it up sometime soon. But here is an example of a sketch that just chugs with React http://iamkon.com/projects/tree_sim_p5/index.html – SpaceBear Mar 22 '19 at 00:09
  • So, did you notice a performance boost when it was minified compared to before? – SpaceBear Mar 22 '19 at 00:10

0 Answers0