Skip to content

React.memo with argument #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 22, 2022
Merged

React.memo with argument #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
300dd89
React.memo with argument
andys8 May 10, 2022
64dabd6
Merge branch 'main' into feature/memo-with-argument
maddie927 May 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/React/Basic/Hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
18 changes: 18 additions & 0 deletions src/React/Basic/Hooks.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ module React.Basic.Hooks
, reactChildrenToArray
, reactChildrenFromArray
, memo
, memo'
, useState
, useState'
, UseState
Expand Down Expand Up @@ -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 ->
Expand Down Expand Up @@ -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)
Expand Down