Potential rules of hooks violation

[josephsavona]

This is exciting! I just wanted to check my understanding. From the implementation at

react-compiler-demo-with-mobx-state-tree/hooks/useObservable.ts

Line 45 in 8d9d622

return useObservableProperty(

, it looks like this allows calling hooks dynamically? Basically any object access could under the hood be a hook call, and there's no linter to guard that those property accesses are unconditional. So it isn't clear to me how this makes Mobx State Tree compatible. Did I miss something?

[coolsoftwaretyler]

Thanks @josephsavona! Good call. I can probably refactor this conditional hook somehow and get the condition out of there by making the useObservableProperty hook a little more resilient to other types of values.

Linter

I just realized I broke my linter config, so I fixed it and I do see the error you bring up:

  30:12  error  React Hook "useObservable" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?                                                         react-hooks/rules-of-hooks
  45:16  error  React Hook "useObservableProperty" is called in function "get" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Again, I should be able to fix that with some refactoring.

Compatibility

As far as compatibility, I see the React Compiler working, based on the documented steps for validation. If you spin up the Remix app and go to http://localhost:5173/hook, you'll see this (notice HookPage has the "memo" tag with stars/highlight):

Compared to the observer page at http://localhost:5173/observer, which shows this (the memo tag is not highlighted, does not have the little stars):

[coolsoftwaretyler]

Linter is much happier with this: #3. React compiler is still giving me the memo tags.

I'll still need to figure out how to get the value back from lazily evaluated views, which are functions and need to be evaluated as such.

Thanks for taking a look at this! Exactly the kind of feedback I've been looking for, and it's great you caught my misconfiguration haha.