Use null for mempty ReactElement (#187)

* Use null for mempty ReactElement

* Update CHANGELOG

Author: natefaubion

CHANGELOG.md

@@ -5,6 +5,7 @@ Notable changes to this project are documented in this file. The format is based
 ## [Unreleased]
 
 Breaking changes:
+- Update the Monoid/Semigroup instance of `ReactElement` to use `null` for `mempty` instead of an empty fragment. (#187)
 
 New features:
 

packages.dhall

@@ -1,4 +1,5 @@
 let upstream =
-      https://raw.githubusercontent.com/purescript/package-sets/prepare-0.15/src/packages.dhall
+      https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20221208/packages.dhall
+        sha256:e3549e48d0170e14838d8f0c44172253947dcb6117b51a763f33dca34f00ba43
 
 in  upstream

src/React.js

@@ -153,3 +153,11 @@ function createContext(defaultValue) {
   };
 }
 export {createContext};
+
+export var emptyReactElement = null;
+
+function isEmptyReactElement(a) {
+  return a === emptyReactElement;
+};
+
+export {isEmptyReactElement};

src/React.purs

@@ -81,11 +81,18 @@ type TagName = String
 -- | A virtual DOM node, or component.
 foreign import data ReactElement :: Type
 
+foreign import emptyReactElement :: ReactElement
+
+foreign import isEmptyReactElement :: ReactElement -> Boolean
+
 instance semigroupReactElement :: Semigroup ReactElement where
-  append a b = toElement [ a, b ]
+  append a b
+    | isEmptyReactElement a = b
+    | isEmptyReactElement b = a
+    | otherwise = toElement [ a, b ]
 
 instance monoidReactElement :: Monoid ReactElement where
-  mempty = toElement ([] :: Array ReactElement)
+  mempty = emptyReactElement
 
 -- | A mounted react component
 foreign import data ReactComponent :: Type
@@ -493,7 +500,9 @@ instance isReactElementReactElement :: IsReactElement ReactElement where
   toElement = identity
 
 instance isReactElementArray :: IsReactElement (Array ReactElement) where
-  toElement = createElement fragment {}
+  toElement = case _ of
+    [] -> mempty
+    children -> createElement fragment {} children
 
 -- | Creates a keyed fragment.
 fragmentWithKey :: String -> Array ReactElement -> ReactElement