Ability to draw on canvas only when needed (no rAF ticker)

[slorber]

Hi,

Currently, if I have a stage that does not change over time, the Pixi.Application will create a ticker and re-render the stage on every frame. I think it does not make much sense and that we should only re-render when the react component re-render, so that using a PureComponent stage would help prevent re-rendering a stage that does not change.

More infos here:

This is what I see, when profiling and doing nothing at all in my browser:

I think in such case the browser should not do any work

[michalochman]

Hi @slorber, thanks for reporting however this is intended behaviour by default, you are only considering the most basic case. Please see discussion in #48 which also shows some examples.

[slorber]

Thanks @michalochman

I've found a workaround anyway

class OptimizedStage extends React.PureComponent {
  componentDidMount() {
    this.renderStage();
  }
  componentDidUpdate() {
    this.renderStage();
  }
  renderStage = () => this.application.render();
  render() {
    return (
      <Stage
        {...this.props}
        options={{
          ...this.props.options,
          autoStart: false,
        }}
        ref={ref => {
          if ( ref ) {
            this.application = ref._app;
          }
          else {
            this.application = null;
          }
        }}
      />
    )
  }
}

Didn't think of using the context to get access to the app, that would probably be more convenient that my current code based on refs

[michalochman]

FYI You also don't need to use provided <Stage> component, it is available out of convenience. If you don't need react-dom at all then it's better to render without it by instantiating Pixi Application and setting the options there.