JSX props should not use arrow functions
38 className="input input-bordered my-2"
39 placeholder="password"
40 type="password"
41 onChange={(e) => setUserInfo({ ...userInfo, password: e.target.value })}42 />
43 <Button className="my-1" onClick={submitHandler}>
44 Sign In!JSX props should not use arrow functions
31 className="input input-bordered my-2"
32 value={userInfo.username}
33 placeholder="name"
34 onChange={(e) => setUserInfo({ ...userInfo, username: e.target.value })}35 />
36 <input
37 value={userInfo.password}JSX props should not use arrow functions
40 type="password"
41 onChange={(e) => setUserInfo({ ...userInfo, password: e.target.value })}
42 />
43 <Button className="my-1" onClick={submitHandler}>44 Sign In!
45 </Button>
46 </div>JSX props should not use arrow functions
63 className={`px-5 text-sm overflow-auto mr-[2vw] py-3 hover:bg-gray-200 hover:cursor-pointer rounded-lg ${
64 channel == c && 'bg-gray-300'
65 }`}
66 onClick={() => setChannel(c)} 67 >
68 {channels[c].icon + ' ' + c}
69 </span>JSX props should not use arrow functions
83 className={`${
84 follow ? "active:bg-red-500" : "active:bg-blue-500 "
85 } p-2 m-0 cursor-pointer rounded-xl active:text-white`}
86 onClick={followHandler} 87 >
88 <a>{follow ? "unfollow" : "follow"}</a>
89 </li>JSX props should not use arrow functions
104 >
105 <Input
106 placeholder={"change role"}
107 onChange={(e) => setRole(e.target.value)}108 className={"w-full"}
109 />
110 <buttonJSX props should not use arrow functions
72 ? (
73 <div>
74 <div
75 onClick={() => 76 setShowUserInfo({ 77 show: !showUserInfo.show, 78 userId: user.id, 79 })} 80 className="flex cursor-pointer hover:bg-gray-200 items-center mb-1 p-3 rounded-box"
81 >
82 {user.pfp && (JSX props should not use arrow functions
55 <div className="ml-4 mt-4 ">
56 <h1 className="font-bold text-3xl mb-3">Users:</h1>
57 <Input
58 onChange={searchUsers} 59 size={"md"}
60 className={"w-[16vw]"}
61 borderedJSX props should not use arrow functions
109 />
110 <button
111 className="hover:bg-blue-500 hover:text-white p-2 rounded-xl"
112 onClick={(e) =>113 handleRoleUpdate(114 e,115 user.id,116 )}117 >
118 Change
119 </button>JSX props should not use arrow functions
122 placeholder={"send a message"}
123 />
124 </div>
125 <Button auto className="ml-4 " onClick={sendMsg}>126 Send
127 </Button>
128 </form>JSX props should not use arrow functions
117 <Input
118 fullWidth
119 value={msg}
120 onChange={(e) => setMsg(e.target.value)}121 type={"text"}
122 placeholder={"send a message"}
123 />JSX props should not use arrow functions
46 <h1 className="text-3xl font-bold ">Latest {channel}</h1>
47 <Button
48 className={"z-0 bg-black md:ml-auto mr-4"}
49 onClick={() => setShowAdd(!showAdd)}50 >
51 Create Post
52 </Button>JSX props should not use arrow functions
41 onChange={(e) => setComment(e.target.value)}
42 placeholder="Add a comment..."
43 />
44 <Button onClick={submitHandler} className={'mt-2 z-0'} auto>45 {isLoading ? (
46 <Loading color={'white'} size={'sm'} />
47 ) : (JSX props should not use arrow functions
38 minRows={3}
39 maxRows={10}
40 value={comment}
41 onChange={(e) => setComment(e.target.value)}42 placeholder="Add a comment..."
43 />
44 <Button onClick={submitHandler} className={'mt-2 z-0'} auto>JSX props should not use arrow functions
174 >
175 <Button
176 flat
177 onClick={() => setToolTipVisible(false)}178 auto
179 color={'primary'}
180 >JSX props should not use arrow functions
163 visible={toolTipVisible}
164 hideArrow
165 trigger='click'
166 onClick={() => setToolTipVisible(true)}167 content={
168 <div className={'p-2 w-[220px]'}>
169 <h1 className={'mb-2 font-bold text-md'}>JSX props should not use arrow functions
125 return (
126 <Button
127 key={idx}
128 onClick={() => handleAdd(fields[field].name)}129 icon={fields[field].icon}
130 className={'mb-4'}
131 color={fields[field].color}JSX props should not use arrow functions
181 Cancel
182 </Button>
183 <Button
184 onClick={() => handleDelete()}185 flat
186 auto
187 color={'error'}JSX props should not use arrow functions
156 <div className="flex items-center mr-auto mx-5 mt-4">
157 <Button
158 color="warning"
159 onClick={() => fileRef.current.click()}160 auto
161 >
162 Add Images/VideosJSX props should not use arrow functions
145 <br />
146 <textarea
147 value={post.description}
148 onChange={(e) =>149 setPost({150 ...post,151 description: e.target.value,152 })}153 className="textarea h-40 w-11/12 textarea-bordered"
154 placeholder="Details"
155 />JSX props should not use arrow functions
133 </div>
134 <input
135 value={post.title}
136 onChange={(e) =>137 setPost({138 ...post,139 title: e.target.value,140 })}141 type={"text"}
142 className="w-11/12 input input-bordered focus:border-none font-bold "
143 placeholder={"Title"}JSX props should not use arrow functions
123 ? "bg-red-500 text-white"
124 : "bg-white text-black"
125 } hover:text-white`}
126 onClick={() => addTag(tag)}127 >
128 {tag}
129 </button>JSX props should not use arrow functions
92 aria-labelledby="modal-title"
93 open={show}
94 width={"600px"}
95 onClose={() => setShow(false)} 96 >
97 <Modal.Header>
98 <Text id="modal-title" size={18}>JSX props should not use arrow functions
198 multiple={true}
199 ref={fileRef}
200 hidden
201 onChange={(e) => addImage(e)}202 />
203 </div>
204 </div>JSX props should not use arrow functions
210 auto
211 flat
212 color="error"
213 onClick={() => setShow(false)}214 >
215 Cancel
216 </Button>
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} />
}
}