235 title={modalTitle}
236 scrollAreaComponent={Modal.NativeScrollArea}
237 opened={opened}
238 onClose={() => setOpened(false)}239 fullScreen={isMobile}
240 zIndex={500}
241 >
216 <Button variant={variants.Button.primaryLg} fullWidth onClick={() => router.push('/')}>
217 {t('find-x', { value: '$t(resources, lowercase)' })}
218 </Button>
219 <Button variant={variants.Button.primaryLg} fullWidth onClick={() => router.push('/profile')}>220 {t('go-to-x', { value: '$t(profile, lowercase)' })}
221 </Button>
222 </>
213 <>
214 <Title order={1}>✅</Title>
215 <Title order={2}>{t('sign-up-success')}</Title>
216 <Button variant={variants.Button.primaryLg} fullWidth onClick={() => router.push('/')}>217 {t('find-x', { value: '$t(resources, lowercase)' })}
218 </Button>
219 <Button variant={variants.Button.primaryLg} fullWidth onClick={() => router.push('/profile')}>
56 button: (
57 <Button
58 variant='secondary-icon'
59 onClick={ 60 stateSetter ? (e) => stateSetter(e.currentTarget.getAttribute('data-option')) : undefined 61 } 62 >
63 .
64 </Button>
125
126 const signUpButton = (
127 <>
128 <Button disabled={!form.isValid()} onClick={submitHandler} loading={signUpAction.isLoading}>129 {t('sign-up')}
130 </Button>
131 <Text variant={variants.Text.utility4darkGray}>
248 <Box
249 component='button'
250 ref={ref}
251 onClick={() => {252 setOpened(true)253 }}254 {...props}
255 />
256 </>
248 classNames={{ itemsWrapper: classes.autocompleteWrapper }}
249 data={form.values.locationOptions}
250 label={t('current-location')}
251 onItemSubmit={(e) => {252 console.log(e)253 setLocationSearch(e.placeId)254 }}255 {...form.getInputProps('searchLocation')}
256 />
257 )
174 placeholder={t('enter-password-placeholder') as string}
175 {...form.getInputProps('password')}
176 onFocusCapture={() => setPwPopover(true)}
177 onBlurCapture={() => setPwPopover(false)}178 />
179 </Popover.Target>
180 <Popover.Dropdown>
173 label={t('password')}
174 placeholder={t('enter-password-placeholder') as string}
175 {...form.getInputProps('password')}
176 onFocusCapture={() => setPwPopover(true)}177 onBlurCapture={() => setPwPopover(false)}
178 />
179 </Popover.Target>
348 >
349 {t('uncheck-all')}
350 </Button>
351 <Button variant='primary' className={classes.resultsBtn} onClick={() => setOpened(false)}>352 {t('view-x-result', { count: resultCount })}
353 </Button>
354 </Group>
354 </Group>
355 </Modal>
356
357 <UnstyledButton onClick={() => setOpened(true)} w='100%'>358 <ServiceBar />
359 </UnstyledButton>
360 </>
259 indeterminate={indeterminate}
260 label={t('all-service-category', { serviceCategory: `$t(services:${tsKey})` })}
261 transitionDuration={0}
262 onChange={() => toggleCategory(categoryId)}263 className={classes.itemParent}
264 />
265
304 {modalTitle ? (
305 <Text
306 fw={500}
307 onClick={() => deselectAll()}308 className={selectedItems.length > 0 ? classes.uncheck : classes.uncheckDisabled}
309 >
310 {t('uncheck-all')}
320 <>
321 <Modal
322 opened={opened}
323 onClose={() => setOpened(false)}324 title={<ServiceBar modalTitle />}
325 fullScreen={isMobile}
326 classNames={modalClasses}
342 <Group className={modalClasses.footer} noWrap>
343 <Button
344 variant='secondary'
345 onClick={() => deselectAll()}346 disabled={selectedItems.length < 1}
347 className={classes.uncheckBtn}
348 >
402
403 return (
404 <>
405 <Modal title={<ServiceModalTitle />} opened={opened} onClose={() => handler.close()}>406 <Stack spacing={24}>
407 {atCapacity}
408 {name}
416 <SectionDivider title='transit-directions'>{publicTransit}</SectionDivider>
417 </Stack>
418 </Modal>
419 <Box component='button' ref={ref} onClick={() => handler.open()} {...props} />420 </>
421 )
422 }
34 }}
35 />
36 </Stack>
37 <Button onClick={() => openLoginModal()} variant='primary-icon' fullWidth>38 {t('log-in')}
39 </Button>
40 <SignupModalLauncher component={Link}>{t('dont-have-account')}</SignupModalLauncher>
73 />
74 </Stack>
75 </Modal>
76 <Box component='button' ref={ref} onClick={() => handler.open()} {...props} />77 </>
78 )
79})
26
27 return (
28 <>
29 <Modal title={modalTitle} opened={opened} onClose={() => handler.close()}>30 <Stack align='center' spacing={16}>
31 <Trans
32 i18nKey='privacy-statement-body'
348 </Group>
349 </Modal>
350
351 <Box ref={ref} component={DefaultLauncher} onClick={() => setOpened(true)} {...props} />352 </>
353 )
354})
348 </Group>
349 </Modal>
350
351 <Box ref={ref} component={DefaultLauncher} onClick={() => setOpened(true)} {...props} />352 </>
353 )
354})
336 <Group className={modalClasses.footer} noWrap>
337 <Button
338 variant='secondary'
339 onClick={() => deselectAll()}340 disabled={selectedItems.length < 1}
341 className={classes.uncheckBtn}
342 >
342 >
343 {t('uncheck-all')}
344 </Button>
345 <Button variant='primary' className={classes.resultsBtn} onClick={() => setOpened(false)}>346 {t('view-x-result', { count: resultCount })}
347 </Button>
348 </Group>
312 <>
313 <Modal
314 opened={opened}
315 onClose={() => setOpened(false)}316 title={<TitleBar modalTitle />}
317 fullScreen={isMobile}
318 classNames={modalClasses}
Using .bind()
or passing local callback functions as props to react component incurs a performance overhead.
Consider using React.useCallback
, or if possible, moving the callback definition outside the component.
EXCEPTIONS: This rule may not apply if your react component is only rendered once, or if your application is not performance sensitive. In such cases, consider adding a skipcq to prevent DeepSource from raising this issue on a single component. Alternatively, for small applications, you could add this issue in the ignore rules section.
Note that the performance overhead is not determined by the size of the callback function, but instead the number of times the component is rendered.
If the callback passed to a prop is local to the render function, it will get recreated every time the component renders.
This affects performance by causing unnecessary re-renders if a brand new function is passed as a property to a component that uses a reference equality check on the property to determine if it should update.
Using the useCallback
hook on functional components, or a method on class components is more performant.
Bad Practice
function CardWrapper() {
// the function `handleClick` is recreated every time
// a `CardWrapper` component is rendered.
const handleClick = (e) => displayCardDetails(e)
return <Card onClick={handleClick} />
}
function CardWrapper_() {
return <Card onClick={(e) => displayCardDetails(e)} />
}
class _CardWrapper extends React.Component {
render() {
return <Card onClick={(e) => displayCardDetails(e)} />
}
}
Recommended
function CardWrapper() {
// `handleClick` is no longer recreated on every render.
const handleClick = React.useCallback((e) => displayCardDetails(e))
return <Card onClick={handleClick} />
}
class CardWrapper_ extends React.Component {
handleClick(e) {
displayCardDetails(e)
}
render() {
return <Card onClick={this.handleClick} />
}
}