0hmx - anyone else face this in regular?

Yes, I face this every couple of hours

From my react experience, this happens when you wrap hook in a condition

So it looks like if there are any errors the ErrorTabComponent exits early and doesn't render anything, but then if error appear while the component is still mounted and there were no error previously, it would crash. If my theory is right, here are steps to reproduce: 1. Make sure there are no errors 2. Open error tab 3. Introduce a code change that triggers an error You should see the error/warning tab crashed

First instance of this violation introduced here: https://github.com/tscircuit/runframe/pull/1524 This is a routine problem with react that is fixable by eslint rule `rules-of-hooks`: ``` { "plugins": ["react-hooks"], "rules": { "react-hooks/rules-of-hooks": "error", } } ```

the biome equivalent: https://biomejs.dev/linter/rules/use-hook-at-top-level/

Shows should be enabled by default

https://github.com/tscircuit/runframe/pull/4295 If this fails, it probably means there's something wrong with biome documentation or version or config If this passes, it means, the biome doesn't catch the error, which would mean the problem with either biome not part of CI or ErrorTabComponent is excluded from linting.

Ok. It passes. Which makes it more puzzling

Ok. I checked the workflow files, and there's no trace of biome running at all, meaning that it's not a part of CI

Yeah, biome wasn't running at all: https://github.com/tscircuit/runframe/actions/runs/30852249198/job/91814790604?pr=4296

<@757706909351411845> This is a kind of task I would delegate to AI ^

But I suspect it would fail meserably

rules of hooks aren't super great fwiw

but yea we definitely have some kind of hook issue here

rules of hooks are difficult to use w/ performance optimizations and it causes a lot of source code inflation

but we should get to the bottom of this, it is likely just one random hook causing the issue

this is not difficult to use at all, this is a basic rule of react

this is how react hooks inherently work

by design

useEffect excessive dependency listing is an example of a major performance issue that rule of hook encourages

the linting of it is the issue, not the fundamental rules

that's a separate lint rule: https://biomejs.dev/linter/rules/use-exhaustive-dependencies/

rule of hooks is a basic rule that would cause a component to crash if you don't follow it

it is non-negotiable

if you don't trust me, ask AI

it has nothing to do with that

you're literally referencing some random third party library

it isn't built into biome

sorry, I don't understand

I referenced rules-of-hooks because I assumed ESLint is used

it isn't

So I corrected myself and referenced biome rule `use-hook-at-top-level/`

which I added to biome.json

it still passed

so I dug deeper and discovered biome isn't being run at CI at all

So I added the workflow to run biome

Which expectedly failed with a number of issues

https://github.com/tscircuit/runframe/blob/main/.github/workflows/bun-formatcheck.yml

yea you're right i think tho- i don't think we're running linting

or if we are, we're allowing warnings

This only checks formatting

like prettier

but honestly

I've literally posted a link with PR that fails linting: https://github.com/tscircuit/runframe/pull/4296

linting is almost completely useless, the only thing that matters is fixing the bug

This bug has been around for a year

sure

Lint would've prevented it since it's trivial

i doubt that

but you can try to prove it

i maintain that linting is not very useful

not to be overly dick-ish but i absolutely hate linting contribs

massive waste of time

if we isolate the bug and prove linting fixes it then i think we would at least force the linting rule that fixed it into CI, but i don't think linting will catch it

for additional clarity, linting contribs plagued this project for a long time and we banned them, because they create far more bugs than they solve

you can imagine these are the easiest to ai contrib

even this i doubt is the root cause

how was this reproduced?

what exactly?

^

the error tab content has an obvious bug, but i'm not sure that's the actual root cause (hopefully it is)

It's literally written on the screenshot "rendered fewer hooks than expected". This is an error message from react

yes we all know that is the error

any time you change number of hooks by changing the conditional

how do you reproduce it is the question

check the conditional

haha

dude

try to change it with component still visible

we are some of the only people who have written a react fiber layer in the world

we know react extremely well

we know exactly how hooks work

the question is how does a user reproduce the issue

i.e. what action do they perform in RunFrame or with their circuit that causes this error page to appear

https://github.com/tscircuit/runframe/pull/4297

^ i'm suggesting that this is not the root cause

I've posted the steps at the very start of the thread: 1. Create a circuit that doesn't cause any warnings or errors 2. Make sure the errors tab is open 3. Introduce a warning or error 4. Fix that warning or eror

It's not that hard for a person who knows react really well

what's hard is producing tsx circuit that has no warnings or errors

https://github.com/tscircuit/schematic-viewer/pull/248/files

The lint error is gone

So it was the only occurrence in runframe

check out the schematic-viewer PR, that is also an out of order issue- but not one a linter picks up

then you can introduce stuff like this that makes it easier to debug these failures with the actual components causing the issue https://github.com/tscircuit/runframe/pull/4304

This also looks like something biome would pick up, this is pretty mechanical: the code should not contain `use*` function after conditional return statements, there should be no conditionals at all between `use*` function calls.

🤷

FYI in production this would be useless

unless keepNames is true

yes perhaps!