.bind()
or local functions in JSX properties JS-0417188
189 <div className="-ml-px flex w-0 flex-1">
190 <PrimaryButton
191 onClick={() => {192 handleMail(193 user.first_name,194 user.email,195 'approved',196 user.id,197 'True'198 );199 }}200 className="relative inline-flex w-0 flex-1 items-center justify-center rounded-br-md border border-transparent py-4 text-sm font-medium text-neutral-300 hover:text-neutral-100"
201 >
202 <CheckCircleIcon
172 <div className="flex w-0 flex-1">
173 <button
174 type="button"
175 onClick={() => {176 handleMail(177 user.first_name,178 user.email,179 'reminder'180 );181 }}182 className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-md border border-transparent py-4 text-sm font-medium text-neutral-300 hover:text-neutral-100"
183 >
184 <ClockIcon className="h-5 w-5" aria-hidden="true" />
121 </p>
122 <div className="mt-6">
123 <PrimaryButton
124 onClick={() =>125 queryParams.get('status') === 'True'126 ? handleBulkMail('approved')127 : handleBulkMail('reminder')128 }129 >
130 {queryParams.get('status') === 'True'
131 ? 'Send Approved Emails'
12 <div className="animate-dropglowSM mt-3 rounded-sm sm:mt-0">
13 <button
14 type="button"
15 onClick={() => {16 window.location.href = 'https://app.devclad.com';17 }}18 className="block w-full rounded-md border-[1px] border-neutral-600 bg-black py-3 px-6 text-xl font-light text-white duration-500
19 hover:border-neutral-400 focus:outline-none focus:ring-2 focus:ring-offset-neutral-900"
20 >
366 <div className="flex justify-center">
367 <button
368 type="button"
369 onClick={() => resendEmail(emailVal)}370 className="dark:bg-darkBG mt-5 items-center
371 rounded-md border border-transparent bg-orange-700 py-2
372 px-4 text-sm font-bold duration-500 dark:text-orange-200"
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.
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)} />
}
}
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} />
}
}