Comments (6)
Hey @michalochman just wondering if you had a chance to look at this. I've not been able to upgrade to 1.0.0
and I think it is because of issues similar to this one. Thanks!
from react-pixi-fiber.
Hi @zenblender, I had a brief look, but it was not obvious why it is happening. I have yet to dedicate more time to it, but since the example is contrived I didn't make it a priority.
Is this also happening for you in realistic scenarios?
from react-pixi-fiber.
I'm not totally sure @michalochman. I was actually trying to replicate a real issue I'm having with 1.0.0
beta from my full application (a game), simplified to demonstrate just that problem. In doing so, I ran across this scenario. I typically don't use state in my app, and instead use Redux and useSelector
to drive the rendering of components. Whether or not the codesandbox demonstrates the exact issue I'm having, or is the only issue I'm having, it does seem like there's a problem considering it throws an error sometimes and the stable version doesn't throw any errors. Thanks!
from react-pixi-fiber.
@zenblender I found that in your example we're sometimes dealing with PIXI.DisplayObjects
that are destroyed, you can easily confirm it by checking containerRef.current?._destroyed
in your example.
However, the root issue is not a race condition in react-pixi-fiber
, but rather in your containerRefFn
that you pass to <Container ref={containerRefFn} />
.
That function receives null when the container is unmounted, yet your code ignores this fact right at the start of the ref callback:
export const Animation: FC = () => {
const containerRef = useRef<PIXI.Container>()
const containerRefFn = useCallback((container) => {
if (!container) {
return
}
containerRef.current = container
}, [])
// ...
return <Container ref={containerRefFn} />
}
then later your code is still using containerRef.current
even though it should not as it is already destroyed and unmounted.
Essentially, it should rather look like this:
export const Animation: FC = () => {
const containerRef = useRef<PIXI.Container>()
const containerRefFn = useCallback((container) => {
containerRef.current = container
}, [])
// ...
return <Container ref={containerRefFn} />
}
And then, since your not doing anything else in your callback ref, why won't event simplify it more by just passing containerRef
directly as ref
in <Container ref={containerRef} />
?
from react-pixi-fiber.
Thanks for taking a thorough look. I see what you're saying. I was curious as to why the stable version doesn't throw any errors, but I see that in any case, there's an issue with the logic on my end.
I will try to find time for another attempt to identify issues preventing me from upgrading to 1.0.0
. Until then, I am blocked from doing some dependency upgrades.
Thanks again for your time!
from react-pixi-fiber.
I am not 100% certain but, this might be related to changes to react-reconciler
or even react
, not necessarily to changes to react-pixi-fiber
. I would check if it was not time consuming to upgrade all the dependencies of current "stable" branch.
from react-pixi-fiber.
Related Issues (20)
- Performance comparison with react-pixi? HOT 1
- TypeError: Cannot read properties of null (reading 'stencil') at ContextSystem.push../node_modules/@pixi/core/dist/esm/core.js.ContextSystem.validateContext (core.js:5206) HOT 4
- NPM installation of library react-pixi-fiber@[email protected] throws error HOT 4
- 1.0.0-beta.13 missing index.es.js HOT 12
- Error: Vite(esbuild) unable to find matching export in PIXI.js HOT 14
- Attempting to compile an app with PixiJS 5.3.11 or 6.2.2 and the latest beta 15 result in an error. HOT 1
- Is this project dead? HOT 2
- Webpack complains about missing exports in pixi.js HOT 3
- Could not resolve dependency: peer react@"^17.0.2" from [email protected] HOT 3
- Stage is not compatible with the React's StrictMode HOT 5
- Pointer Events don't fire at all HOT 2
- Upgrade reconciler
- Text components style property is not correctly typed HOT 2
- Issue on running demo HOT 1
- rightupoutside event may not be supported? HOT 2
- Can't use with new versions of PixiJS HOT 6
- export 'extras' (imported as 'PIXI') was not found in 'pixi.js' HOT 3
- Explicit "createStageClass" usage causes crash HOT 1
- Breaking changes in React experimental branch
- TypeError dispatcher.useSyncExternalStore is not a function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-pixi-fiber.