Skip to content

Commit fd5e0f9

Browse files
author
Madeline Trotter
committed
Add useCallback, rename useMemoLazy to useMemo, add memo/callback example
1 parent dd6cb47 commit fd5e0f9

File tree

9 files changed

+157
-34
lines changed

9 files changed

+157
-34
lines changed

‎examples/memo-callback/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
output
2+
html/index.js
3+
package-lock.json
4+
node_modules

‎examples/memo-callback/Makefile‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
all: node_modules
2+
purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
3+
purs bundle -m Main --main Main output/*/*.js > output/bundle.js
4+
node_modules/.bin/browserify output/bundle.js -o html/index.js
5+
6+
node_modules:
7+
npm install
8+

‎examples/memo-callback/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Memo/Callback Example
2+
3+
## Building
4+
5+
```sh
6+
make
7+
```
8+
9+
This will compile the PureScript source files, bundle them, and use Browserify to combine PureScript and NPM sources into a single bundle.
10+
11+
Then open `html/index.html` in your browser.

‎examples/memo-callback/html/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>react-basic example</title>
5+
</head>
6+
<body>
7+
<div id="container"></div>
8+
<script src="index.js"></script>
9+
</body>
10+
</html>

‎examples/memo-callback/package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"dependencies": {
3+
"react": "16.8.6",
4+
"react-dom": "16.8.6"
5+
},
6+
"devDependencies": {
7+
"browserify": "16.2.3"
8+
}
9+
}

‎examples/memo-callback/src/Main.purs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module Main where
2+
3+
import Prelude
4+
5+
import MemoCallback (mkMemoCallback)
6+
import Data.Maybe (Maybe(..))
7+
import Effect (Effect)
8+
import Effect.Exception (throw)
9+
import React.Basic.Hooks(element)
10+
import React.Basic.DOM (render)
11+
import Web.DOM.NonElementParentNode (getElementById)
12+
import Web.HTML (window)
13+
import Web.HTML.HTMLDocument (toNonElementParentNode)
14+
import Web.HTML.Window (document)
15+
16+
main :: Effect Unit
17+
main = do
18+
container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
19+
case container of
20+
Nothing -> throw "Container element not found."
21+
Just c -> do
22+
memoCallback <- mkMemoCallback
23+
let app = element memoCallback {}
24+
render app c

‎examples/memo-callback/src/MemoCallback.purs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module MemoCallback where
2+
3+
import Prelude
4+
5+
import Effect.Console (log)
6+
import React.Basic.DOM as R
7+
import React.Basic.Events (handler_)
8+
import React.Basic.Hooks (CreateComponent, UnsafeReference(..), component, fragment, useCallback, useEffect, useState, (/\))
9+
import React.Basic.Hooks as React
10+
11+
mkMemoCallback :: CreateComponent {}
12+
mkMemoCallback = do
13+
component "MemoCallback" \props -> React.do
14+
counter /\ setCounter <- useState 0
15+
increment <- useCallback (UnsafeReference setCounter) $
16+
setCounter (_ + 1)
17+
18+
useEffect (UnsafeReference increment) do
19+
log "increment updated"
20+
pure mempty
21+
22+
pure $ fragment
23+
[ R.button
24+
{ onClick: handler_ increment
25+
, children: [ R.text $ "Increment: " <> show counter ]
26+
}
27+
]

‎src/React/Basic/Hooks.js‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,38 @@ exports.useState_ = function(tuple, initialState) {
88
var r = React.useState(initialState);
99
var state = r[0];
1010
var setState = r[1];
11-
return tuple(state, function(update) {
12-
return function() {
13-
return setState(update);
11+
if (!setState.hasOwnProperty("$$reactBasicHooks$$cachedSetState")) {
12+
setState.$$reactBasicHooks$$cachedSetState = function(update) {
13+
return function() {
14+
return setState(update);
15+
};
1416
};
15-
});
17+
}
18+
return tuple(state, setState.$$reactBasicHooks$$cachedSetState);
1619
};
1720

1821
exports.useEffect_ = function(eq, key, effect) {
19-
var memoizedKey = exports.useMemo_(eq, key);
22+
var memoizedKey = exports.useEqCache_(eq, key);
2023
React.useEffect(effect, [memoizedKey]);
2124
};
2225

2326
exports.useLayoutEffect_ = function(eq, key, effect) {
24-
var memoizedKey = exports.useMemo_(eq, key);
27+
var memoizedKey = exports.useEqCache_(eq, key);
2528
React.useLayoutEffect(effect, [memoizedKey]);
2629
};
2730

2831
exports.useReducer_ = function(tuple, reducer, initialState, initialAction) {
2932
var r = React.useReducer(reducer, initialState, initialAction);
3033
var state = r[0];
3134
var dispatch = r[1];
32-
return tuple(state, function(action) {
33-
return function() {
34-
return dispatch(action);
35+
if (!dispatch.hasOwnProperty("$$reactBasicHooks$$cachedDispatch")) {
36+
dispatch.$$reactBasicHooks$$cachedDispatch = function(action) {
37+
return function() {
38+
return dispatch(action);
39+
};
3540
};
36-
});
41+
}
42+
return tuple(state, dispatch.$$reactBasicHooks$$cachedDispatch);
3743
};
3844

3945
exports.useRef_ = React.useRef;
@@ -54,19 +60,24 @@ exports.contextProvider_ = function(context) {
5460
return context.Provider;
5561
};
5662

57-
exports.useMemo_ = function(eq, a) {
63+
exports.useMemo_ = function(eq, key, computeA) {
64+
var memoizedKey = exports.useEqCache_(eq, key);
65+
return React.useMemo(computeA, [memoizedKey]);
66+
};
67+
68+
exports.useCallback_ = function(eq, key, cb) {
69+
var memoizedKey = exports.useEqCache_(eq, key);
70+
return React.useCallback(cb, [memoizedKey]);
71+
};
72+
73+
exports.useEqCache_ = function(eq, a) {
5874
var memoRef = React.useRef(a);
5975
if (memoRef.current !== a && !eq(memoRef.current, a)) {
6076
memoRef.current = a;
6177
}
6278
return memoRef.current;
6379
};
6480

65-
exports.useMemoLazy_ = function(eq, key, computeA) {
66-
var memoizedKey = exports.useMemo_(eq, key);
67-
return React.useMemo(computeA, [memoizedKey]);
68-
};
69-
7081
exports.unsafeSetDisplayName = function(displayName, component) {
7182
component.displayName = displayName;
7283
component.toString = function() {

‎src/React/Basic/Hooks.purs‎

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,10 @@ module React.Basic.Hooks
3838
, contextProvider
3939
, UseMemo
4040
, useMemo
41-
, UseMemoLazy
42-
, useMemoLazy
41+
, UseCallback
42+
, useCallback
43+
, UseEqCache
44+
, useEqCache
4345
, UnsafeReference(..)
4446
, Render
4547
, Pure
@@ -178,22 +180,31 @@ contextProvider context a child = element (contextProvider_ context) { value: a,
178180
foreign import data UseMemo :: Type -> Type -> Type
179181

180182
useMemo
181-
:: forall a
182-
. Eq a
183-
=> a
184-
-> a
183+
:: forall key a
184+
. Eq key
185+
=> key
186+
-> (Unit -> a)
185187
-> Hook (UseMemo a) a
186-
useMemo key a = Render (runEffectFn2 useMemo_ (mkFn2 eq) a)
188+
useMemo key computeA = Render (runEffectFn3 useMemo_ (mkFn2 eq) key computeA)
187189

188-
foreign import data UseMemoLazy :: Type -> Type -> Type
190+
foreign import data UseCallback :: Type -> Type -> Type
189191

190-
useMemoLazy
192+
useCallback
191193
:: forall key a
192194
. Eq key
193195
=> key
194-
-> (Unit -> a)
195-
-> Hook (UseMemoLazy a) a
196-
useMemoLazy key computeA = Render (runEffectFn3 useMemoLazy_ (mkFn2 eq) key computeA)
196+
-> a
197+
-> Hook (UseCallback a) a
198+
useCallback key computeA = Render (runEffectFn3 useCallback_ (mkFn2 eq) key computeA)
199+
200+
foreign import data UseEqCache :: Type -> Type -> Type
201+
202+
useEqCache
203+
:: forall a
204+
. Eq a
205+
=> a
206+
-> Hook (UseCallback a) a
207+
useEqCache a = Render (runEffectFn2 useEqCache_ (mkFn2 eq) a)
197208

198209
newtype UnsafeReference a = UnsafeReference a
199210
derive instance newtypeUnsafeReference :: Newtype (UnsafeReference a) _
@@ -334,16 +345,24 @@ foreign import contextProvider_
334345
-> ReactComponent { value :: a, children :: JSX }
335346

336347
foreign import useMemo_
337-
:: forall a
338-
. EffectFn2
339-
(Fn2 a a Boolean)
340-
a
348+
:: forall key a
349+
. EffectFn3
350+
(Fn2 key key Boolean)
351+
key
352+
(Unit -> a)
341353
a
342354

343-
foreign import useMemoLazy_
355+
foreign import useCallback_
344356
:: forall key a
345357
. EffectFn3
346358
(Fn2 key key Boolean)
347359
key
348-
(Unit -> a)
360+
a
361+
a
362+
363+
foreign import useEqCache_
364+
:: forall a
365+
. EffectFn2
366+
(Fn2 a a Boolean)
367+
a
349368
a

0 commit comments

Comments
 (0)