Comments (11)
This occurs ONLY on the first instance of taking the "problematic action" that causes the bug, and only if take on the the first mount of the problem component.
Identical actions after this crash has occurred and the component is re-mounted via the ErrorBoundary
will not produce any errors. Loading the component a second time (different props of the same sort) also prevents this issue from occurring.
This extremely strange circumstance is making debugging unrelated issues quite difficult.
from react.
This is really plaguing us. I hope this can be resolved.
from react.
Friendly bump. I know this seems like impatience but an unmitigatable bug in React is a big problem for us.
from react.
Calling hooks conditionally usually leads to these kind of bugs. If you want help fixing this issue, we need a minimal reproduction.
from react.
Thanks for your reply @eps1lon. We're 100% not calling hooks conditionally. I manually reviewed the code three times, asked ChatGPT, and ESLint also agrees. Unfortunately I have no idea what code is really causing the problem because commenting out the "problem hook" is what leads to this error. How can I glean any clue about the underlying cause?
I can't share our private code and the error message provides not a single avenue to pursue. It would be a different thing if I knew commenting out some code resolved an issue - but in this case it causes the issue.
from react.
I'd start by removing surrounding code until it no longer reproduces. It might also be a sibling or parent component that calls hooks conditionally.
from react.
Thanks for the advice @eps1lon! I'll see if I can uncover anything.
from react.
Results in error: should have queue
:
export const useEditExploreCapabilities = ({
noEdits,
isHashtag,
}) => {
const [canEdit, setCanEdit] = useState(!noEdits && !isHashtag);
const [canExplore, setCanExplore] = useState(canEdit);
useEffect(() => {
setCanEdit(noEdits && !isHashtag);
}, [noEdits, isHashtag]);
useEffect(() => {
setCanExplore(canEdit || (isHashtag));
}, [isHashtag, canEdit]);
return [canEdit, canExplore];
};
Works fine:
export const useEditExploreCapabilities = ({
noEdits,
isHashtag
}) => {
const [canEdit, setCanEdit] = useState(!noEdits && !isHashtag);
const [canExplore, setCanExplore] = useState(canEdit);
useEffect(() => {
setCanEdit(!noEdits && !isHashtag);
setCanExplore(canEdit || (isHashtag));
}, [noEdits, isHashtag, canEdit]);
return [canEdit, canExplore];
};
Is this expected? As far as I'm aware my original code didn't break any rules of hooks and seems, on the surface, more correct to me.
from react.
I can't repro this in isolation: https://codesandbox.io/p/sandbox/cranky-currying-gn777q-gn777q
Maybe another component in your tree is violating Rule of React? For minimal reproductions, try to remove as much as possible from the whole component tree.
from react.
I am quite certain no rules of React (most especially rules of hooks) are being broken. ESLint agrees. I'm the only developer.
Since I have found a workaround I won't have time to work on this, but despite the inability to reproduce it in isolation, I feel confident this is a bug in React. The fact it was masked under other React errors further bolsters my belief.
from react.
For what it's worth, this is inside StrictMode
, but adding that to your repro didn't change anything.
from react.
Related Issues (20)
- Bug: Object.keys inside the Shallow Equal can be improved HOT 1
- [React 19] No re-render after 'useActionState' action queue finishes HOT 1
- Bug: No "exports" in use-sync-external-store package.json
- [React 19] Conditionally rendered suspendable component using `use()` shows fallback even if promise already resolved HOT 15
- [React 19]JSX asking that I should declare react at the top of the file HOT 3
- [React 19] RSC and `as` property pattern HOT 1
- [React 19] `use()` promise from state causes "async/await is not yet supported in Client Components" error HOT 1
- Bug: [Strict Mode] Inconsistent behavior updating reducer state in mount Effect vs. update Effect HOT 2
- Bug: Memory leak of old state until next render
- Bug:
- [React 19] style using precedence does not produce valid CSS when using string children HOT 2
- [React 19] style using precedence can produce many additional style elements after initial render HOT 6
- [Compiler]: Ref values (the `current` property) may not be accessed during render - showing error message for custom hooks HOT 2
- [DevTools Bug]: Inconsistent behavior; React dev tools does not recognize a react website; 'service worker(inactive)'
- Bug: Strict mode effect cleanup order doesn't match normal unmount HOT 2
- [DevTools Bug]: inspecting pseudo-elements in Firefox gives error `Permission denied to access property "__reactFiber$sofadm08s2"`
- Bug: Image Preview Not Showing in Chrome and Other Browsers Except Safari
- [React 19] useActionState when firing the action multiple times doesn't behave like transition HOT 1
- [Compiler Bug]: eslint-plugin-react-compiler errors when updating initialization of ref.current HOT 3
- [React 19] Upgrading React causes infinite refetching 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.