purescript-react/purescript-react-basic-hooks

useEffectAlways does not always run

alextes opened this issue · 1 comments

In the following example based on the counter example:

module ReactExample where

import Prelude
import Data.Maybe (Maybe(..))
import Effect (Effect)
import Effect.Console as Console
import Effect.Exception (throw)
import React.Basic.DOM (render)
import React.Basic.DOM as R
import React.Basic.Events (handler_)
import React.Basic.Hooks (Component, component, fragment, useEffect, useEffectAlways, useState, (/\))
import React.Basic.Hooks as React
import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toNonElementParentNode)
import Web.HTML.Window (document)

mkExample :: Component Unit
mkExample = do
  component "Counter" \_ -> React.do
    counter /\ setCounter <- useState 0
    useEffect counter $ Console.log ("useEffect " <> show counter) *> pure mempty
    useEffectAlways $ Console.log ("useEffectAlways " <> show counter) *> pure mempty
    pure
      $ fragment
          [ R.button
              { onClick: handler_ $ setCounter (_ + 1)
              , children: [ R.text $ "Increment: " <> show counter ]
              }
          ]

main :: Effect Unit
main = do
  container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
  case container of
    Nothing -> throw "Container element not found."
    Just c -> do
      ex <- mkExample
      render (ex unit) c

Hitting the increment button runs the useEffect hook but does not run the useEffectAlways hook. I expected the -Always hook to run at least as often as any sibling effect hook, but it appears this is not the case. Could you help me understand why?

Thanks for an awesome library 🙏 !

Oh interesting.. I'll have to look into it. Thanks for reporting!