With React 18 bringing a breaking change that will cause React.useEffect to fire twice, it would probably be a good idea to update the Feliz useEffectOnce to prevent breakage.
type React =
member this.useEffectOnce(effect: unit -> unit) =
let calledOnce = React.useRef false
React.useEffect (fun () ->
if calledOnce.current
then ()
else
calledOnce.current <- true
effect()
, [||])
member this.useEffectOnce(effect: unit -> IDisposable) =
let destroyFunc = React.useRef None
let calledOnce = React.useRef false
let renderAfterCalled = React.useRef false
if calledOnce.current then
renderAfterCalled.current <- true
React.useEffect (fun () ->
if calledOnce.current
then None
else
calledOnce.current <- true
destroyFunc.current <- effect() |> Some
if renderAfterCalled.current
then destroyFunc.current
else None
, [||])
member this.useEffectOnce(effect: unit -> IDisposable option) =
let destroyFunc = React.useRef None
let calledOnce = React.useRef false
let renderAfterCalled = React.useRef false
if calledOnce.current then
renderAfterCalled.current <- true
React.useEffect (fun () ->
if calledOnce.current
then None
else
calledOnce.current <- true
destroyFunc.current <- effect()
if renderAfterCalled.current
then destroyFunc.current
else None
, [||])
Probably needs a bit more work, but that's the idea anyway.
With React 18 bringing a breaking change that will cause
React.useEffect
to fire twice, it would probably be a good idea to update the FelizuseEffectOnce
to prevent breakage.Here is an adaptation from https://dev.to/ag-grid/react-18-avoiding-use-effect-getting-called-twice-4i9e:
Probably needs a bit more work, but that's the idea anyway.
Thoughts?