Bug: Internal React error: Expected static flag was missing #24391
Comments
Developer-Nijat
added
the
Status: Unconfirmed
|
Please provide a reproducible example. Either on GitHub or a sandbox. Otherwise we can’t really fix this. Thanks! |
Probably it is not possible. Because this is the large project and totally code sharing is prohibited. It is understandable, React v18 is not good for old projects. |
That's absolutely not correct. We're running huge codebases from 2013-2014 with almost no changes on React 18. The error is just a bug in React that will be easy to fix as soon as somebody gives us a reproducible example.
Usually the way you can do this is by deleting code until you're left with a small example that doesn't contain any app-specific logic. |
|
@gaearon Here's a small test repo, that will reproduce the bug. |
|
Thank you! This example seems to use a Hook conditionally — |
|
Yeah I know this. Unfortunatelly lot's of ppl doesn't seem to know this and this is a common thing that I'm seeing throughout a lot of libs. I copied this particular issue from here: https://github.com/farahat80/react-open-weather/blob/master/src/js/components/ReactWeather.js#L20 Going back to react 17, these things work without any issues... |
|
It works accidentally and likely breaks in other cases. But we do need a better error. I would’ve expected “rendered more hooks than last time” error to appear. |
|
I fear that when this is going to be thrown as an error (which it actually is, no discussion here), a lot of external libs will be broken. |
First of all, let's say this is not understandable error. We can't figure out where the error is. Again there is a high risk of errors in the next days. Currently v18 is risk for large projects. I will check this error again but |
|
The issue is exactly as what @gaearon said. SidebarItem.tsx The fix was to do the check after initiating the hook. Fix: |
|
Reproducible if an additional An additional In React 17, no error is logged nor thrown: https://codesandbox.io/s/react-17-conditional-useeffect-static-flag-was-missing-forked-qbgm67 |
I want to make it clear that it worked accidentally and in a narrow range of circumstances. You should absolutely not rely on this. For example, any person who adds state to the corresponding custom Hook would break every component relying on this even in 17. I agree it’s a problem that the error is unclear and removed from the actual case. That has to be fixed. But this has nothing to do with 18. If your code relies on this, it is extremely fragile in 17. Enable the linter and fix it. |
|
|
I had the same warning migrating from v17 to v18: Beforeconst C = () => {
if (condition) return null;
useEffect(() => {/*...*/}, []);
return <div></div>
}Afterconst C = () => {
useEffect(() => {/*...*/}, []);
if (condition) return null;
return <div></div>
}The above change solved. Thanks. |
|
I can confirm, I get the same error: "Expected static flag was missing. Please notify the React team." with the code below: import React, { useMemo } from "react";
import { useTable, useSortBy, usePagination } from "react-table";
const JSONTable = ({ arr }: { arr?: object[] }) => {
if (!arr?.length) return null;
const data = useMemo(() => arr, [arr]);
const keys = Object.keys(arr[0]);
const columns = useMemo(
() => keys.map((key) => ({ Header: key, accessor: key })),
[arr]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
page, // Instead of using 'rows', we'll use page,
// which has only the rows for the active page
// The rest of these things are super handy, too ;)
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{ columns, data, initialState: { pageIndex: 0 } },
useSortBy,
usePagination
);
return null;
}However, I stop getting the error when I remove the following code below: const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
page, // Instead of using 'rows', we'll use page,
// which has only the rows for the active page
// The rest of these things are super handy, too ;)
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{ columns, data, initialState: { pageIndex: 0 } },
useSortBy,
usePagination
); |
|
The issue is the early return. Put the return after calls to Hooks. Please add the linter to your setup to detect these issues at compile time as originally intended. |
Bad case: https://codepen.io/ahuigo/pen/YzOVPQv |
|
Just ran at this error trying to validate forms within Modal with zod validation library and react hook form. Basically the error was coming when I was checking (conditional rendering) for the modal and I was doing before the useForm hook of react-hook-form. The lesson here is: when you have any kind of hooks always do your conditional renderings at the bottom right before returning your jsx/tsx! |
totally solved my problem. I had in code and just moved up of component return: |
|
Similar issue here. I am using react-native-web: Is a simple hook that does this: const [cards, setCards] = useState([])
useEffect(() => {
;(async () => {
try {
const cards = await Server.userCards({ user_id })
setCards(cards)
} catch (error) {
//
}
})()
}, [user_id, setCards])If a comment the line |
|
Getting this when using import { captureRemixErrorBoundaryError, withSentry } from '@sentry/remix';
const Root = () => {};
const RootWithSentry = withSentry(Root);
export default Root; |
|
@adaboese I'm not able to reproduce that example in a new Remix project, can you provide a full repro? I want to rule out the known issue above that hooks are being called conditionally. |
That turned out to be a false-positive. Although I am not clear why adding/removing |
React version: V18.0.0
React router DOM: V5.2.1
Steps To Reproduce
Link to code example:
DynamicFilter.js component
The current behavior
The expected behavior
The text was updated successfully, but these errors were encountered: