What kind of issue is this?
Link to repro
https://playground.react.dev/#N4Igzg9grgTgxgUxALhHCA7MAXABAUQA8BDAWwAcAbBXAXlwAoBKOgPl2AB0Ndd0s8AbRgIw5TGAQAaXJOwAlUeKwIAunVxRJAZWzFsCADzBcAE33FkuDFEqVcAX1wAfDmYtWTAMwQJTAI2I4AGsrHBgASwwAcwBuXGwAT3IEK05wKDhEMDB0x3zXE3M9TwTk1Nx0hBgYCBg8pwdWBiKPa1t7ByZY7m5efhxcAAtiDFNqbUzssC9bSf9SCJyIzA0tBHwvHzhsfAA3BAxsBmY2Dj7eXGIc6uORMQkEADpi4gB+J6SUulp6dLApqJciAZOkACpDJayIbQSimXD+GhRPYQYJ+XCYSiJXAAdyGh3celwUIBWSBszs2IBCwi2AMpnS3V6PEuAwg1CelAg0RauB8fkCISs92UkheFie-ICQWCjiZLK6PQwF3Wm22x1OtHYXBZvAiXkYIse4r0Hy+NF+fwyZJyjPOusuIzGE0BOQp80Wy0wzCVl0cFwcMmESmNr1U8ouImwsB4DAuvEM-igdMw8cumAAwpQIiFaMBNdq0365IoHipea9SlLBaFKiADDh0jJzWlrdMGnLfX7HA4i2UUrR0kmU8qQGnWH2ABIIOwQXF1OFpwwAemH2EwE5Z8ocSpBaEwXgi0RQIAiFDqeHNbgACpQoNEogB5cjYFZYfJeWqkXAAckCiMoABaKh7yiQCRCCbBAPQCgImoGBl1MJZsB-JVuBaC5l2XGDyDg-Q3wAWQgUwKnSYg7HSbgnDAfCZgiURcFvUCMGfV8JG6PcwBhHEAEkjmqDByLAFAvCEhAHCAA
Repro steps
I'm using React Router fetchers for mutations, while migrating the app to 19.2.0 and trying to migrate some useRef() latest pattern to useEffectEvent I spotted weird bug with something being accessed despite being undefined at render.
Basically, having a function that's supposed to be invoked only when some state is in shape X (e.g. successful response) eagerly accesses state that this function uses to cache it. It causes the error "cannot read property of undefined" error to occur
- I'm having a state which is an union of few different states (in original example this is RR
useFetcher)
- I'm having a
useEffectEvent callback that's supposed to be called within useEffect when data becomes successful, additionaly I have an assertion so TypeScript allows me to access the .feedback part and no-one tries to invoke the callback otherwise
- Mentioned
useEffect that invokes (2)
- User action invokes state change (in original example this is asynchronous, and happens in background, hence
useEffect usage at all).
In the output the data is eagerly accessed to cache the function, causing the error:
Random thoughts: maybe it's somehow partially related to my assert function, where compiler doesn't know what does it do? But it causes me to don't use optional chaining, but compiler doesn't know why I'm not using it and is not informed by the types 🤔 Also it's not strictly related to the useEffectEvent or anything like that, because if I remove it - it'll still cause the same problem
How often does this bug happen?
Every time
What version of React are you using?
19.2.0
What version of React Compiler are you using?
19.1.0-rc.3
What kind of issue is this?
Link to repro
https://playground.react.dev/#N4Igzg9grgTgxgUxALhHCA7MAXABAUQA8BDAWwAcAbBXAXlwAoBKOgPl2AB0Ndd0s8AbRgIw5TGAQAaXJOwAlUeKwIAunVxRJAZWzFsCADzBcAE33FkuDFEqVcAX1wAfDmYtWTAMwQJTAI2I4AGsrHBgASwwAcwBuXGwAT3IEK05wKDhEMDB0x3zXE3M9TwTk1Nx0hBgYCBg8pwdWBiKPa1t7ByZY7m5efhxcAAtiDFNqbUzssC9bSf9SCJyIzA0tBHwvHzhsfAA3BAxsBmY2Dj7eXGIc6uORMQkEADpi4gB+J6SUulp6dLApqJciAZOkACpDJayIbQSimXD+GhRPYQYJ+XCYSiJXAAdyGh3celwUIBWSBszs2IBCwi2AMpnS3V6PEuAwg1CelAg0RauB8fkCISs92UkheFie-ICQWCjiZLK6PQwF3Wm22x1OtHYXBZvAiXkYIse4r0Hy+NF+fwyZJyjPOusuIzGE0BOQp80Wy0wzCVl0cFwcMmESmNr1U8ouImwsB4DAuvEM-igdMw8cumAAwpQIiFaMBNdq0365IoHipea9SlLBaFKiADDh0jJzWlrdMGnLfX7HA4i2UUrR0kmU8qQGnWH2ABIIOwQXF1OFpwwAemH2EwE5Z8ocSpBaEwXgi0RQIAiFDqeHNbgACpQoNEogB5cjYFZYfJeWqkXAAckCiMoABaKh7yiQCRCCbBAPQCgImoGBl1MJZsB-JVuBaC5l2XGDyDg-Q3wAWQgUwKnSYg7HSbgnDAfCZgiURcFvUCMGfV8JG6PcwBhHEAEkjmqDByLAFAvCEhAHCAA
Repro steps
I'm using React Router fetchers for mutations, while migrating the app to 19.2.0 and trying to migrate some
useRef()latest pattern touseEffectEventI spotted weird bug with something being accessed despite being undefined at render.Basically, having a function that's supposed to be invoked only when some state is in shape X (e.g. successful response) eagerly accesses state that this function uses to cache it. It causes the error "cannot read property of undefined" error to occur
useFetcher)useEffectEventcallback that's supposed to be called withinuseEffectwhen data becomes successful, additionaly I have an assertion so TypeScript allows me to access the.feedbackpart and no-one tries to invoke the callback otherwiseuseEffectthat invokes (2)useEffectusage at all).In the output the data is eagerly accessed to cache the function, causing the error:
Random thoughts: maybe it's somehow partially related to my
assertfunction, where compiler doesn't know what does it do? But it causes me to don't use optional chaining, but compiler doesn't know why I'm not using it and is not informed by the types 🤔 Also it's not strictly related to theuseEffectEventor anything like that, because if I remove it - it'll still cause the same problemHow often does this bug happen?
Every time
What version of React are you using?
19.2.0
What version of React Compiler are you using?
19.1.0-rc.3