Bug: Removing an attribute does not reset it to its default value

[guillaumebrunerie]

Current Behavior

When a component rerenders, resulting in an attribute being removed, the corresponding PIXI property is not reset to its default value.

In the code below, a button toggles between the initial state (scale 100%, no rotation, no blend mode) and a special state (scale 400%, rotation 90°, add mode).

Note that clicking twice on the button only resets the scale but does not reset the rotation and the blend mode, resulting in tearing (what is displayed doesn’t correspond anymore to what one would expect based on React's internal state).

Expected Behavior

When an attribute gets removed from a component, the corresponding property should be reset to its default value.

Steps to Reproduce

See https://codepen.io/Latcarf/pen/MWddqXL?editors=0010 for a running demo.

Click the button twice times and note that it results in the sprite having scale 100% and a rotation and add mode, which should not be possible given how the component is written:

const RotatingBunny = ({isSpecial}) => {
  if (isSpecial) {
    return (
      <Sprite
        image={url}
        scale={4}
        rotation={Math.PI / 2}
        blendMode={PIXI.BLEND_MODES.ADD}
      />
    );
  } else {
    return (
      <Sprite
        image={url}
        scale={1}
        // rotation={0}
        // blendMode={PIXI.BLEND_MODES.NORMAL}
      />
    );
  }
};

Environment

The codepen uses old versions of pixi/react/pixi-react, but I have the same issue with:

• @pixi/react version: 7.1.1
• pixi.js version: 7.4.0
• React version: 18.2.0
• ReactDOM version: 18.2.0
• Browser & Version: Chrome 126
• OS & Version: Ubuntu 22.04

Possible Solution

No response

Additional Information

No response

[dewang002]

in else statement there is one commented out rotate value I used it and it take the initial value and when we click on it its size ,increased. I saw it on the snippt that you have provided

[guillaumebrunerie]

in else statement there is one commented out rotate value I used it and it take the initial value and when we click on it its size ,increased. I saw it on the snippt that you have provided

Yes, if you explicitly provide the default value, it works. The point is that it should work even if you don't provide the default value explicitly.

[trezy]

Closing since v7 is no longer the latest version and will only receive security updates moving forward.