Refactor the base hook api to be a bit more PureScript-y

Author: Madeline Trotter

examples/memo-callback/src/Example.purs

@@ -1,26 +1,57 @@
 module Example where
 
 import Prelude
+import Data.Foldable (traverse_)
+import Data.Int as Int
+import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Console (log)
 import React.Basic.DOM as R
-import React.Basic.Events (handler_)
-import React.Basic.Hooks (ReactComponent, UnsafeReference(..), component, fragment, useCallback, useEffect, useState, (/\))
+import React.Basic.DOM.Events (targetValue)
+import React.Basic.Events (handler, handler_)
+import React.Basic.Hooks (ReactComponent, UnsafeReference(..), component, fragment, useEffect, useLazy, useMemo, useState, (/\))
 import React.Basic.Hooks as React
 
 mkExample :: Effect (ReactComponent {})
 mkExample = do
   component "MemoCallback" \props -> React.do
-    counter /\ setCounter <- useState 0
+    initialValue /\ setInitialValue <- useState 0
+    counter /\ setCounter <- useState initialValue
     increment <-
-      useCallback (UnsafeReference setCounter)
-        $ setCounter (_ + 1)
+      useLazy
+        (UnsafeReference setCounter) \_ -> setCounter (_ + 1)
+    reset <-
+      useLazy
+        (initialValue /\ UnsafeReference setCounter) \_ -> setCounter \_ -> initialValue
     useEffect (UnsafeReference increment) do
-      log "increment updated"
+      log "increment updated -- this should only get logged once!"
+      pure mempty
+    useEffect (UnsafeReference reset) do
+      log "reset updated -- this should only get logged when the 'initialValue' is changed!"
+      pure mempty
+    let
+      memoTestVal = Just 1
+    memoTest <- useMemo memoTestVal
+    useEffect (UnsafeReference memoTest) do
+      log "memoTest updated -- this should only get logged once!"
       pure mempty
     pure
       $ fragment
-          [ R.button
+          [ R.text "Change initial value:"
+          , R.div_
+              [ R.input
+                  { value: show initialValue
+                  , onChange:
+                      handler targetValue
+                        $ (_ >>= Int.fromString)
+                        >>> traverse_ (const >>> setInitialValue)
+                  }
+              , R.button
+                  { onClick: handler_ reset
+                  , children: [ R.text "Reset" ]
+                  }
+              ]
+          , R.button
               { onClick: handler_ increment
               , children: [ R.text $ "Increment: " <> show counter ]
               }

src/React/Basic/Hooks.js

@@ -2,43 +2,43 @@
 
 var React = require("react");
 
-exports.reactChildrenToArray = function(children) {
+exports.reactChildrenToArray = function (children) {
   return React.Children.toArray(children);
 };
 
 exports.memo_ = React.memo;
 
-exports.useState_ = function(tuple, initialState) {
+exports.useState_ = function (tuple, initialState) {
   var r = React.useState(initialState);
   var state = r[0];
   var setState = r[1];
   if (!setState.hasOwnProperty("$$reactBasicHooks$$cachedSetState")) {
-    setState.$$reactBasicHooks$$cachedSetState = function(update) {
-      return function() {
+    setState.$$reactBasicHooks$$cachedSetState = function (update) {
+      return function () {
         return setState(update);
       };
     };
   }
   return tuple(state, setState.$$reactBasicHooks$$cachedSetState);
 };
 
-exports.useEffect_ = function(eq, key, effect) {
-  var memoizedKey = exports.useEqCache_(eq, key);
+exports.useEffect_ = function (eq, key, effect) {
+  var memoizedKey = exports.useMemo_(eq, key);
   React.useEffect(effect, [memoizedKey]);
 };
 
-exports.useLayoutEffect_ = function(eq, key, effect) {
-  var memoizedKey = exports.useEqCache_(eq, key);
+exports.useLayoutEffect_ = function (eq, key, effect) {
+  var memoizedKey = exports.useMemo_(eq, key);
   React.useLayoutEffect(effect, [memoizedKey]);
 };
 
-exports.useReducer_ = function(tuple, reducer, initialState, initialAction) {
+exports.useReducer_ = function (tuple, reducer, initialState, initialAction) {
   var r = React.useReducer(reducer, initialState, initialAction);
   var state = r[0];
   var dispatch = r[1];
   if (!dispatch.hasOwnProperty("$$reactBasicHooks$$cachedDispatch")) {
-    dispatch.$$reactBasicHooks$$cachedDispatch = function(action) {
-      return function() {
+    dispatch.$$reactBasicHooks$$cachedDispatch = function (action) {
+      return function () {
         return dispatch(action);
       };
     };
@@ -48,43 +48,38 @@ exports.useReducer_ = function(tuple, reducer, initialState, initialAction) {
 
 exports.useRef_ = React.useRef;
 
-exports.readRef_ = function(ref) {
+exports.readRef_ = function (ref) {
   return ref.current;
 };
 
-exports.writeRef_ = function(ref, a) {
+exports.writeRef_ = function (ref, a) {
   ref.current = a;
 };
 
 exports.useContext_ = React.useContext;
 
-exports.useMemo_ = function(eq, key, computeA) {
-  var memoizedKey = exports.useEqCache_(eq, key);
-  return React.useMemo(computeA, [memoizedKey]);
-};
-
-exports.useCallback_ = function(eq, key, cb) {
-  var memoizedKey = exports.useEqCache_(eq, key);
-  return React.useCallback(cb, [memoizedKey]);
-};
-
-exports.useEqCache_ = function(eq, a) {
+exports.useMemo_ = function (eq, a) {
   var memoRef = React.useRef(a);
   if (memoRef.current !== a && !eq(memoRef.current, a)) {
     memoRef.current = a;
   }
   return memoRef.current;
 };
 
-exports.unsafeSetDisplayName = function(displayName, component) {
+exports.useLazy_ = function (eq, key, computeA) {
+  var memoizedKey = exports.useMemo_(eq, key);
+  return React.useMemo(computeA, [memoizedKey]);
+};
+
+exports.unsafeSetDisplayName = function (displayName, component) {
   component.displayName = displayName;
-  component.toString = function() {
+  component.toString = function () {
     return displayName;
   };
   return component;
 };
 
-exports.displayName = function(component) {
+exports.displayName = function (component) {
   return typeof component === "string"
     ? component
     : component.displayName || "[unknown]";