JSX props should not use arrow functions
206 <h1 className="counsellor">Counsellor
207 <span> <Switch
208 style={{ backgroundColor: theme === "dark" ? "#000000" : ""}}
209 onChange={handleThemeChange} 210 checked={theme === "dark"}
211 checkedChildren="Dark Mode"
212 unCheckedChildren="Light Mode" JSX props should not use arrow functions
162 </button>
163 </div>
164 ) : (
165 <button className="add-btn" onClick={() => setShowNewProfileForm(true)}>166 Add New Profile
167 </button>
168 )}JSX props should not use arrow functions
157 onChange={handleInputChange}
158 required
159 />
160 <button className="add-btn" onClick={handleAddProfile}>161 Add New Profile
162 </button>
163 </div>JSX props should not use arrow functions
154 name="url"
155 placeholder="Profile URL"
156 value={newProfile.url}
157 onChange={handleInputChange}158 required
159 />
160 <button className="add-btn" onClick={handleAddProfile}>JSX props should not use arrow functions
139 <select
140 name="name"
141 value={newProfile.name}
142 onChange={handleInputChange}143 required
144 >
145 <option value="">Select Profile Name</option>JSX props should not use arrow functions
125 </button>
126 )}
127 {isEditing && (
128 <button onClick={() => handleDeleteProfile(profile.id)}>129 <i className="bx bxs-trash btn-icon"></i>
130 </button>
131 )}JSX props should not use arrow functions
119 ) : (
120 <button
121 className="Edit"
122 onClick={() => handleEditProfile(profile.id)}123 >
124 <i className="bx bxs-edit-alt btn-icon"></i>
125 </button>JSX props should not use arrow functions
113 />
114 <div className="btns">
115 {isEditing && editingId === profile.id ? (
116 <button className="Save" onClick={handleSaveProfile}>117 <i className="bx bxs-save btn-icon"></i>
118 </button>
119 ) : (JSX props should not use arrow functions
109 type="text"
110 value={profile.url}
111 readOnly={!isEditing || editingId !== profile.id}
112 onChange={(e) => handleProfileChange(profile.id, e.target.value)}113 />
114 <div className="btns">
115 {isEditing && editingId === profile.id ? (JSX props should not use arrow functions
92 <h2>Social Profile</h2>
93 <p>You can update your social profile here</p>
94 </div>
95 <button onClick={handleUpdate}> 96 {isEditing ? "Cancel" : "Update"}
97 </button>
98 </div>JSX props should not use arrow functions
122 </li>
123 </ul>
124 </div>
125 <div className="hamburger" onClick={toggleMenu}>126 <div className={`bar ${menuOpen ? 'open' : ''}`}/>
127 <div className={`bar ${menuOpen ? 'open' : ''}`}/>
128 <div className={`bar ${menuOpen ? 'open' : ''}`}/>JSX props should not use arrow functions
111 <a href="#"/>
112 </li>
113 <li>
114 <a href="#" onClick={handleSignOut}>115 Log Out
116 </a>
117 </li>JSX props should not use arrow functions
233 name="captch"
234 value={captchaVal}
235 placeholder="Enter Captcha Here"
236 onChange={(e) => setCaptchaVal(e.target.value)}237 className="w-[100%] bg-slate-100 py-2 px-4 focus:outline-indigo-500"
238 required
239 />JSX props should not use arrow functions
160 <h1 className="counsellor">Counsellor
161 <span> <Switch
162 style={{ backgroundColor: theme === "dark" ? "#000000" : ""}}
163 onChange={handleThemeChange} 164 checked={theme === "dark"}
165 checkedChildren="Dark Mode"
166 unCheckedChildren="Light Mode" JSX props should not use arrow functions
59 <div className="sign-in">Log in to your account</div>
60
61 {/* forgot password form */}
62 <form className='fp-form' onSubmit={handleSubmit}>63 <label className="forgot_text" htmlFor="Email">Please enter your email address and and we'll send you a link to get back into your account.</label>
64 <input type="email" value={email}
65 onChange={onChangeEvent}JSX props should not use arrow functions
36 {faqs.map((faq, index) => (
37 <div key={index} className="accordion-item">
38 <button
39 onClick={() => toggleAccordion(index)}40 aria-expanded={activeIndex === index ? 'true' : 'false'}
41 >
42 <span className="accordion-title">{faq.question}</span>JSX props should not use arrow functions
187 key={college.id}
188 onClick={() => handleCollegeClick(college)}
189 onTouchStart={() => handleTouchStart(index)}
190 onTouchEnd={handleTouchEnd}191 >
192 <div className="college-content">
193 <div className="up">JSX props should not use arrow functions
186 className={`college ${activeIndex === index ? 'active' : ''}`}
187 key={college.id}
188 onClick={() => handleCollegeClick(college)}
189 onTouchStart={() => handleTouchStart(index)}190 onTouchEnd={handleTouchEnd}
191 >
192 <div className="college-content">JSX props should not use arrow functions
185 <div
186 className={`college ${activeIndex === index ? 'active' : ''}`}
187 key={college.id}
188 onClick={() => handleCollegeClick(college)}189 onTouchStart={() => handleTouchStart(index)}
190 onTouchEnd={handleTouchEnd}
191 >JSX props should not use arrow functions
51 <button
52 key={index + 1}
53 className={`pagination-button ${currentPage === index + 1 ? 'active' : ''}`}
54 onClick={() => setCurrentPage(index + 1)}55 >
56 {index + 1}
57 </button>JSX props should not use arrow functions
35 const startIndex = (currentPage - 1) * contributorsPerPage;
36 const endIndex = startIndex + contributorsPerPage;
37 return contributors.slice(startIndex, endIndex).map(contributor => (
38 <div key={contributor.login} className="contributor-card" onClick={() => handleProfileClick(contributor.login)}>39 <img src={contributor.avatar_url} alt={contributor.login} />
40 <div className="contributor-info">
41 <h3>{contributor.login}</h3>JSX props should not use functions
101 <textarea id='m-textarea' className='ctextarea' class="" name="feedback" required/>
102 <label className='clabel'>Message:</label>
103 </div>
104 <button class="csubmit-btn" onClick={handleSubmit}>Send</button> 105 </form>
106 </div>
107 </div>JSX props should not use arrow functions
113 <div className="right">
114 <div className="searchCourses" style={{marginTop:"20px"}}>
115
116 <select id="courseList" value={selectedCourse} placeholder="Search courses" style={{backgroundColor:"#c5d5d4",outline:"none",border:"none",fontWeight:"600",fontSize:"20px"}} onChange={(e) => setSelectedCourse(e.target.value)}>117 <option value="BTech">BTech</option>
118 <option value="BBA">BBA</option>
119 <option value="MBA">MBA</option>JSX props should not use arrow functions
71 toggleMenu={toggleMenuCallback}
72 menuOpen={menuOpen}
73 theme={theme}
74 handleThemeChange={handleThemeChange} 75 />
76 <HamburgerSection
77 toggleMenu={toggleMenuCallback} JSX props should not use arrow functions
88 <div className="content">
89 <nav>
90 <div>
91 <i className="bx bx-menu" onClick={toggleSidebar}></i> 92 </div>
93 <Link to="/">
94 <div className="logoName">
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} />
}
}