-
Notifications
You must be signed in to change notification settings - Fork 829
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.
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
Performance tuning #1274
Performance tuning #1274
Changes from 9 commits
7a4ddb9
0a52b09
69b99f9
b656103
8d538e1
afe8753
46c36ac
3bb67bc
0bad84c
0721365
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
import React, { useState, memo, forwardRef } from 'react' | ||
import React, { useState, memo, forwardRef, useCallback } from 'react' | ||
import cx from 'classnames' | ||
import { css } from 'glamor' | ||
import PropTypes from 'prop-types' | ||
|
@@ -9,6 +9,8 @@ import { Text } from '../../typography' | |
import globalGetInitials from './utils/getInitials' | ||
import globalHash from './utils/hash' | ||
|
||
const imageStyles = { objectFit: 'cover' } | ||
|
||
const pseudoSelectors = {} | ||
const internalStyles = { | ||
overflow: 'hidden', | ||
|
@@ -62,6 +64,7 @@ const Avatar = memo( | |
) | ||
|
||
const [imageHasFailedLoading, setImageHasFailedLoading] = useState(false) | ||
const onError = useCallback(() => setImageHasFailedLoading(true), []) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this may not be as efficient as one would hope: https://kentcdodds.com/blog/usememo-and-usecallback There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah for sure, might be too aggressive here. I was considering that there is internal state that will cause rerenders, and so we may as well cache the function, but it might be excessive in this case. |
||
const imageUnavailable = !src || imageHasFailedLoading | ||
|
||
const initialsFontSize = `${getAvatarInitialsFontSize(size, sizeLimitOneCharacter)}px` | ||
|
@@ -95,11 +98,11 @@ const Avatar = memo( | |
)} | ||
{!imageUnavailable && ( | ||
<Image | ||
style={{ objectFit: 'cover' }} // Unsupported by ui-box directly | ||
style={imageStyles} // Unsupported by ui-box directly | ||
width={isObjectFitSupported ? '100%' : 'auto'} // Fallback to old behaviour on IE | ||
height="100%" | ||
src={src} | ||
onError={() => setImageHasFailedLoading(true)} | ||
onError={onError} | ||
/> | ||
)} | ||
</Box> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,11 @@ | ||
import React from 'react' | ||
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect' | ||
|
||
/** | ||
* A React Ref that stores the latest value it is given (updated in useEffect's callback). | ||
* @return {{ readonly current: any }} | ||
*/ | ||
export function useLatest(value) { | ||
const ref = React.useRef(value) | ||
|
||
useIsomorphicLayoutEffect(() => { | ||
ref.current = value | ||
}) | ||
Comment on lines
-10
to
-12
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was unnecessary. |
||
|
||
ref.current = value | ||
return ref | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unnecessary new function created every time. Unless we are using the
close
method we can simply pass the JSX directly