Create a pure function instead of using classes?

[RodrigoHamuy]

Is this possible?

Something like

function MySprite(props) {
  return new PIXI.Sprite(props.texture);
}

Thanks

[fabienjuif]

I think this is something similar you can find in the source code: https://github.com/inlet/react-pixi/blob/master/src/components/Sprite.js#L4

[inlet]

You are totally free to use pure functions. If you’d like to use custom PIXI primitives you can use custom components, see docs.

[RodrigoHamuy]

Hey @fabienjuif @inlet thanks for the quick response.

I want to call react-pixi functional components as functions instead of mounting them using createElement. This is to improve performance when creating lots of instances, as shown here: https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

Using PixiComponent

My attempt to create a custom component using PixiComponent didn't work, as this is still creating an Object and not just a pure function.

https://codesandbox.io/s/github/RodrigoHamuy/pixi-performance-test/tree/inlet-only Try to toggle src\inlet-react-pixi\ReactPixiTest.tsx lines 42 and 43.

Following the source code as suggested by @fabienjuif

I am most certainly doing something terribly wrong (sorry, React newbie), but here is my attempt, which doesn't work either.

https://codesandbox.io/s/github/RodrigoHamuy/pixi-performance-test/tree/inlet-only-2

[inlet]

Hi @RodrigoHamuy,

First, the article you are referring is quite outdated and the preferred way is using JSX syntax. Although you might gain performance using a pure function (instead of JSX) It’s not possible to change the internals as this custom renderer is basically providing a way to turn JSX into PIXI components. If you look closely you can see that the React PIXI components return strings which is picked up by the reconciler and transformed into working PIXI components.

Hope this helps you 😉