JSX props should not use arrow functions
91 title="Plans"
92 extra={[
93 <Button
94 onClick={navigateCreatePlan} 95 type="primary"
96 size="large"
97 key="create-plan"JSX props should not use arrow functions
154 <CreateMetricForm
155 state={metricState}
156 visible={visible}
157 onSave={onSave}158 onCancel={onCancel}
159 />
160 </div>JSX props should not use arrow functions
133 type="primary"
134 size="large"
135 key={"create-plan"}
136 onClick={createMetricButton}137 >
138 Create Metric
139 </Button>,JSX props should not use arrow functions
155 state={metricState}
156 visible={visible}
157 onSave={onSave}
158 onCancel={onCancel}159 />
160 </div>
161 </PageLayout>JSX props should not use arrow functions
36 title="Experiments"
37 extra={[
38 <Button
39 onClick={navigateCreatePlan}40 className="text-white"
41 size="large"
42 key={"create-plan"}JSX props should not use arrow functions
83 <PageLayout
84 title="Customers"
85 extra={[
86 <Button type="primary" size="large" onClick={openCustomerModal}> 87 Create Customer
88 </Button>,
89 ]}JSX props should not use arrow functions
97 <CreateCustomerForm
98 visible={visible}
99 onSave={onSave}
100 onCancel={onCancel}101 />
102 </div>
103 </PageLayout>JSX props should not use arrow functions
96 )}
97 <CreateCustomerForm
98 visible={visible}
99 onSave={onSave}100 onCancel={onCancel}
101 />
102 </div>JSX props should not use arrow functions
70 <PageLayout title="Settings">
71 <Tabs
72 size="large"
73 onChange={(key) => changeRoute(key)}74 activeKey={tab ? tab : "general"}
75 defaultActiveKey="general"
76 >JSX props should not use arrow functions
86 name="password"
87 value={password}
88 defaultValue="password123"
89 onChange={handlePasswordChange} 90 />
91 <div>
92 {error && <small className="text-danger">{error}</small>}JSX props should not use arrow functions
98 </Form>
99 </Card>
100 <div>
101 <Button type="primary" onClick={() => navigate("/login")}>102 Login
103 </Button>
104 </div>JSX props should not use arrow functions
78 borderStyle: "solid",
79 }}
80 >
81 <Form onFinish={handleUpdatePassword} name="normal_login"> 82 <label htmlFor="password">New Password</label>
83 <Form.Item>
84 <InputJSX props should not use arrow functions
71 name="email"
72 value={email}
73 defaultValue="[email protected]"
74 onChange={handleEmailChange} 75 />
76 </Form.Item>
77 <Form.Item>JSX props should not use arrow functions
80 </Form>
81 </Card>
82 <div>
83 <Button type="primary" onClick={() => navigate("/login")}> 84 Login
85 </Button>
86 </div>JSX props should not use arrow functions
92 instructions.
93 </p>
94 <div>
95 <Button type="primary" onClick={() => navigate("/login")}> 96 Back to Login
97 </Button>
98 </div>JSX props should not use arrow functions
63 borderStyle: "solid",
64 }}
65 >
66 <Form onFinish={handleResetPassword} name="normal_login"> 67 <Form.Item>
68 <label htmlFor="email">Email</label>
69 <InputJSX props should not use arrow functions
81 <div className="grid h-screen place-items-center gap-3">
82 <div className=" space-y-4 place-items-center">
83 {inviteToken ? (
84 <SignUp onSubmit={handleSignUp} hasInvite /> 85 ) : (
86 <>
87 <Steps current={current}>JSX props should not use arrow functions
94 {current === 0 ? (
95 <CreateOrganization onSave={handleCreateOrganization} />
96 ) : (
97 <SignUp onSubmit={handleSignUp} /> 98 )}
99 </div>
100 </>JSX props should not use arrow functions
104 <Button
105 type="primary"
106 className="ml-auto bg-info"
107 onClick={() => navigate("/login")}108 >
109 Log In Instead
110 </Button>JSX props should not use arrow functions
92 <div className="steps-content">
93 {" "}
94 {current === 0 ? (
95 <CreateOrganization onSave={handleCreateOrganization} /> 96 ) : (
97 <SignUp onSubmit={handleSignUp} />
98 )}JSX props should not use arrow functions
141 <Button
142 type="primary"
143 className="w-full"
144 onClick={() => navigate("/register")}145 >
146 Sign Up
147 </Button>JSX props should not use arrow functions
118 name="password"
119 value={password}
120 defaultValue="password123"
121 onChange={handlePasswordChange}122 />
123 <div>
124 {error && <small className="text-danger">{error}</small>}JSX props should not use arrow functions
107 name="username"
108 value={username}
109 defaultValue="username123"
110 onChange={handleUserNameChange}111 />
112 </Form.Item>
113 <label htmlFor="password">Password</label>JSX props should not use arrow functions
99 }}
100 >
101 {/* <img src="../assets/images/logo_large.jpg" alt="logo" /> */}
102 <Form onFinish={handleLogin} name="normal_login">103 <Form.Item>
104 <label htmlFor="username">Username or Email</label>
105 <InputJSX props should not use arrow functions
126 <Select
127 defaultValue="Select a substitution"
128 className=" w-full"
129 onChange={changeSubstitution}130 value={selectedSubstitution?.substitution_name}
131 showArrow={false}
132 >
Description
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} />
}
}