React.memo with argument (#61)

Adding another variant of memo that allows passing a function to compare
previous and new props.

<https://reactjs.org/docs/react-api.html#reactmemo>

Solves <#60>

Co-authored-by: Madeline Trotter <[email protected]>

Author: andys8

src/React/Basic/Hooks.js

@@ -12,7 +12,8 @@ export function reactChildrenToArray(children) {
   return React.Children.toArray(children);
 }
 
-export var memo_ = React.memo;
+export const memo_ = React.memo;
+export const memoEq_ = React.memo;
 
 export function useState_(tuple, initialState) {
   const [state, setState] = React.useState(
@@ -52,7 +53,7 @@ export function useReducer_(tuple, reducer, initialState) {
   return tuple(state, dispatch.$$reactBasicHooks$$cachedDispatch);
 }
 
-export var useRef_ = React.useRef;
+export const useRef_ = React.useRef;
 
 export function readRef_(ref) {
   return ref.current;
@@ -62,15 +63,15 @@ export function writeRef_(ref, a) {
   ref.current = a;
 }
 
-export var useContext_ = React.useContext;
+export const useContext_ = React.useContext;
 export { useEqCache as useEqCache_ };
 
 export function useMemo_(eq, deps, computeA) {
   const memoizedKey = useEqCache(eq, deps);
   return React.useMemo(computeA, [memoizedKey]);
 }
 
-export var useDebugValue_ = React.useDebugValue;
+export const useDebugValue_ = React.useDebugValue;
 
 export function unsafeSetDisplayName(displayName, component) {
   component.displayName = displayName;

src/React/Basic/Hooks.purs

@@ -8,6 +8,7 @@ module React.Basic.Hooks
   , reactChildrenToArray
   , reactChildrenFromArray
   , memo
+  , memo'
   , useState
   , useState'
   , UseState
@@ -166,6 +167,16 @@ memo ::
   Effect (ReactComponent props)
 memo = flip Prelude.bind (runEffectFn1 memo_)
 
+-- | Similar to `memo` but takes a function to compare previous and new props
+memo' ::
+  forall props.
+  (props -> props -> Boolean) ->
+  Effect (ReactComponent props) ->
+  Effect (ReactComponent props)
+memo' arePropsEqual comp = Prelude.do
+  c <- comp
+  runEffectFn2 memoEq_ c (mkFn2 arePropsEqual)
+
 useState ::
   forall state.
   state ->
@@ -359,6 +370,13 @@ foreign import memo_ ::
     (ReactComponent props)
     (ReactComponent props)
 
+foreign import memoEq_ ::
+  forall props.
+  EffectFn2
+    (ReactComponent props)
+    (Fn2 props props Boolean)
+    (ReactComponent props)
+
 foreign import unsafeSetDisplayName ::
   forall props.
   EffectFn2 String (ReactComponent props) (ReactComponent props)