git.iko.soy/bridge
on master help sign in
Merge pull request #328 from urbit/perf-memo-passport
877ac28Fang
src/components/Passport.js+12−7
compare with master
unifiedsplit
@@ -1,4 +1,4 @@
1−import React from 'react';
1+import React, { useMemo } from 'react';
2import { Just, Nothing } from 'folktale/maybe';
2import { Just, Nothing } from 'folktale/maybe';
3import ob from 'urbit-ob';
3import ob from 'urbit-ob';
4import BN from 'bn.js';
4import BN from 'bn.js';
@@ -120,6 +120,10 @@ function Passport({
120
120
121 const fgColor = inverted ? 'black' : 'white';
121 const fgColor = inverted ? 'black' : 'white';
122
122
123+ const sigil = useMemo(
124+ () => Just.hasInstance(point) && makeSigil(64, patp, [bgColor, fgColor]),
125+ [patp, point, bgColor, fgColor]
126+ );
123 return (
127 return (
124 <div
128 <div
125 style={{
129 style={{
@@ -145,7 +149,7 @@ function Passport({
145 display: 'flex',
149 display: 'flex',
146 alignItems: 'center',
150 alignItems: 'center',
147 }}>
151 }}>
148− {Just.hasInstance(point) && makeSigil(64, patp, [bgColor, fgColor])}
152+ {sigil}
149 <div
153 <div
150 style={{
154 style={{
151 marginLeft: '16px',
155 marginLeft: '16px',
@@ -252,6 +256,11 @@ function MiniPassport({ point, inverted, ...rest }) {
252 const patp = ob.patp(point);
256 const patp = ob.patp(point);
253 const permissions = usePermissionsForPoint(address, point);
257 const permissions = usePermissionsForPoint(address, point);
254 const keyType = buildKeyType(permissions);
258 const keyType = buildKeyType(permissions);
259+ const sigil = useMemo(
260+ () =>
261+ makeSigil(44, patp, inverted ? ['white', 'black'] : ['black', 'white']),
262+ [inverted, patp]
263+ );
255 return (
264 return (
256 <div
265 <div
257 style={{
266 style={{
@@ -277,11 +286,7 @@ function MiniPassport({ point, inverted, ...rest }) {
277 display: 'flex',
286 display: 'flex',
278 alignItems: 'center',
287 alignItems: 'center',
279 }}>
288 }}>
280− {makeSigil(
289+ {sigil}
281− 44,
282− patp,
283− inverted ? ['white', 'black'] : ['black', 'white']
284− )}
285 <div
290 <div
286 style={{
291 style={{
287 marginLeft: '16px',
292 marginLeft: '16px',