When React.useEffect is provided with a function that returns another (cleanup) function without doing anything else, the compiled code ends up calling the cleanup function directly inside the body of useEffect instead of returning it.
For example:
[<ReactComponent>]
let MyComponent () =
React.useEffect (fun () ->
(fun () -> cleanupEffect ())
)
React.useEffect (fun () ->
() // No-op, added so there's something in the body
(fun () -> cleanupEffect ())
)
React.Fragment []This produces the following JS code:
export function MyComponent() {
useEffect(() => {
const setup = ((unitVar_1, unitVar_2) => {
cleanupEffect();
})();
return setup;
}, undefined);;
useEffect(() => {
const setup = (() => {
return () => {
cleanupEffect();
};
})();
return setup;
}, undefined);;
return createElement(Fragment, defaultOf());
}You can see that in the first useEffect, the setup function calls the provided cleanup function directly, while in the second one, it correctly returns a function that then calls it.
When
React.useEffectis provided with a function that returns another (cleanup) function without doing anything else, the compiled code ends up calling the cleanup function directly inside the body ofuseEffectinstead of returning it.For example:
This produces the following JS code:
You can see that in the first
useEffect, thesetupfunction calls the provided cleanup function directly, while in the second one, it correctly returns a function that then calls it.