Bug: Internal React error: Expected static flag was missing

[Developer-Nijat]

React version: V18.0.0
React router DOM: V5.2.1

Steps To Reproduce

1. Going to profile page
2. Warning: Internal React error: Expected static flag was missing. Please notify the React team.

Link to code example:

DynamicFilter.js component

The current behavior

The expected behavior

[gaearon]

Please provide a reproducible example. Either on GitHub or a sandbox. Otherwise we can’t really fix this. Thanks!

[Developer-Nijat]

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.

[gaearon]

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.

Probably it is not possible. Because this is the large project and totally code sharing is prohibited.

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.

[orangecoding]

@gaearon Here's a small test repo, that will reproduce the bug.
https://github.com/orangecoding/react-static-flag-exception

[gaearon]

Thank you! This example seems to use a Hook conditionally — it (data) useStyles(). This is not supported in React. If you use Hooks you need to either follow rules or use the linter rule which forbids this.

[orangecoding]

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...

[gaearon]

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.

[orangecoding]

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.
However not sure if this is the only case where such an error occurs. Maybe @Developer-Nijat can check this with his code as well?

[Developer-Nijat]

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.
However not sure if this is the only case where such an error occurs. Maybe @Developer-Nijat can check this with his code as well?

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

[firoz2580]

The issue is exactly as what @gaearon said.
In my case, the very first line of the component was checking a prop 'hidden' and returning a fragment if it is true.
That was causing this error. Though it was not a best practice, V17 was OK with this.

SidebarItem.tsx
Issue:

The fix was to do the check after initiating the hook.

Fix:

[eps1lon]

Reproducible if an additional useEffect was called: https://codesandbox.io/s/conditional-useeffect-static-flag-was-missing-gg94qy

An additional useState will throw the expected "rendered more hooks than expected" error.

In React 17, no error is logged nor thrown: https://codesandbox.io/s/react-17-conditional-useeffect-static-flag-was-missing-forked-qbgm67