-
Notifications
You must be signed in to change notification settings - Fork 292
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Production build optimization sometimes break React hooks rules #3798
Comments
I am not familiar with the portion of Fable code which handle these optimisation. It is possible that the optimisation are done by FCS itself in which case I don't think we can do much unfortunately. Or this is perhaps done by Fable when applying the transformation: https://github.com/fable-compiler/Fable/blob/main/src/Fable.Transforms/FableTransforms.fs#L803-L820 The problem is that we need to keep the optimisation for normal JavaScript usage and want to perhaps disable them for Warning Below I am just thinking out loud and that's probably not the correct path If this is coming from Fable perhaps it could be possible to add an attribute or something to disable the optimisation locally and have it applied by |
@MangelMaxime I agree, it could be either F# compiler (FCS) doing the optimization, or Fable. |
Thank you for the information. I guess that |
@lukaszkrzywizna Until we have such an attribute, another workaround that prevents identifiers from being beta-reduced is to mark them as mutable. I know, not very functional, and not very pretty, but at least it doesn't add another line like using let mutable isThreshold = useVerticalScroll(threshold, scrollRef) |
Description
When compiling F# code for production, Fable optimizations sometimes seem to break React hooks rules by altering the execution order of hooks. The debug build maintains the correct order and usage of hooks, but the production build optimizes the code in a way that could potentially violate the Rules of Hooks by conditionally executing a hook.
Repro code
The F# source code for the custom hook:
Debug build JavaScript output:
Production build JavaScript output (where the issue arises):
A workaround involving an extra function call with a hook's dependency as an argument mitigates the issue, but it's not an ideal solution:
I wonder if there is any option/attribute that would block that kind of optimization?
Expected and actual results
Expected: The production build should preserve the order and unconditional execution of hooks as per the debug build and React's rules.
Actual: The production build optimizes the code in a way that could conditionally execute a hook, potentially breaking React's rules of hooks and leading to unpredictable component behavior.
Related information
The text was updated successfully, but these errors were encountered: