JSX props should not use arrow functions
88 setUserInfo({ ...userInfo, password: e.target.value })
89 }
90 />
91 <Button onClick={handleSubmit} className="my-1">92 Register
93 </Button>
94 </div>JSX props should not use arrow functions
84 className="input input-bordered my-2"
85 placeholder="password"
86 type="password"
87 onChange={(e) =>88 setUserInfo({ ...userInfo, password: e.target.value })89 }90 />
91 <Button onClick={handleSubmit} className="my-1">
92 RegisterJSX props should not use arrow functions
75 className="input input-bordered my-2"
76 placeholder="email"
77 type="email"
78 onChange={(e) =>79 setUserInfo({ ...userInfo, email: e.target.value })80 }81 />
82 <input
83 value={userInfo.password}JSX props should not use arrow functions
66 className="input input-bordered my-2"
67 value={userInfo.name}
68 placeholder="name"
69 onChange={(e) =>70 setUserInfo({ ...userInfo, name: e.target.value })71 }72 />
73 <input
74 value={userInfo.email}JSX props should not use arrow functions
48 multiple={false}
49 />
50 <div
51 onClick={() => fileRef.current.click()}52 className={`cursor-pointer text-center justify-center text-white items-center flex w-[300px] h-[270px] ${
53 !userInfo.pfp && 'bg-gray-300'
54 } w-full rounded-box`}JSX props should not use arrow functions
44 type="file"
45 hidden
46 ref={fileRef}
47 onChange={handleImg}48 multiple={false}
49 />
50 <divJSX props should not use arrow functions
9 <div className="justify-center mx-auto w-[300px] items-center">
10 {login ? <Login /> : <Register />}
11 <div className="block">
12 <button className="mt-2" onClick={() => setLogin(!login)}>13 {login ? 'Register' : 'Login'}
14 </button>
15 </div>JSX props should not use arrow functions
44 setUserInfo({ ...userInfo, password: e.target.value })
45 }
46 />
47 <Button className="my-1" onClick={submitHandler}>48 Sign In!
49 </Button>
50 </div>JSX props should not use arrow functions
40 className="input input-bordered my-2"
41 placeholder="password"
42 type="password"
43 onChange={(e) =>44 setUserInfo({ ...userInfo, password: e.target.value })45 }46 />
47 <Button className="my-1" onClick={submitHandler}>
48 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) =>35 setUserInfo({ ...userInfo, username: e.target.value })36 }37 />
38 <input
39 value={userInfo.password}JSX props should not use arrow functions
22 return (
23 <div key={idx}>
24 <div
25 onClick={() =>26 router.push(27 `products/${product.name}`28 )29 }30 className="bg-blue-400 m-2 rounded-box p-5 text-white flex items-center hover:cursor-pointer"
31 >
32 {product.images ? (JSX props should not use arrow functions
85 ? 'active:bg-red-500'
86 : 'active:bg-blue-500 '
87 } p-2 m-0 cursor-pointer rounded-xl active:text-white`}
88 onClick={followHandler} 89 >
90 <a>{follow ? 'unfollow' : 'follow'}</a>
91 </li>JSX props should not use arrow functions
57 <div
58 key={c}
59 className=" text-3xl p-4 hover:bg-gray-200 cursor-pointer mx-12 rounded-xl mb-20"
60 onClick={() => setShowMenu(false)}61 >
62 <Link
63 href={{JSX props should not use arrow functions
32 >
33 <div
34 className="cursor-pointer"
35 onClick={() => setShowMenu(!showMenu)}36 >
37 <svg
38 xmlns="http://www.w3.org/2000/svg"JSX props should not use arrow functions
20 return (
21 <div
22 key={e}
23 onClick={() => dispatch(setChannel(e))}24 className={`text-center rounded-2xl p-3 text-sm cursor-pointer ${
25 channel != e && 'text-white'
26 }`}JSX props should not use arrow functions
112 />
113 <button
114 className="hover:bg-blue-500 hover:text-white p-2 rounded-xl"
115 onClick={(e) =>116 handleRoleUpdate(117 e,118 user.id119 )120 }121 >
122 Change
123 </button>JSX props should not use arrow functions
105 >
106 <Input
107 placeholder={'change role'}
108 onChange={(e) =>109 setRole(e.target.value)110 }111 className={'w-full'}
112 />
113 <buttonJSX props should not use arrow functions
70 {userID == productUserID ? (
71 <div>
72 <div
73 onClick={() => 74 setShowUserInfo({ 75 show: !showUserInfo.show, 76 userId: user.id, 77 }) 78 } 79 className="flex cursor-pointer hover:bg-gray-200 items-center mb-1 p-3 rounded-box"
80 >
81 {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
124 placeholder={'send a message'}
125 />
126 </div>
127 <Button auto className="ml-4 " onClick={sendMsg}>128 Send
129 </Button>
130 </form>JSX props should not use arrow functions
119 <Input
120 fullWidth
121 value={msg}
122 onChange={(e) => setMsg(e.target.value)}123 type={'text'}
124 placeholder={'send a message'}
125 />JSX props should not use arrow functions
50 <h1 className="text-3xl font-bold ">Latest {channel}</h1>
51 <Button
52 className={'z-0 bg-black md:ml-auto mr-4'}
53 onClick={() => setShowAdd(!showAdd)} 54 >
55 Create Post
56 </Button>JSX props should not use arrow functions
220 >
221 Cancel
222 </Button>
223 <Button clickable={!isLoading} auto onClick={submitHandler}>224 {isLoading ? (
225 <Loading color={'white'} size={'sm'} />
226 ) : (JSX props should not use arrow functions
216 auto
217 flat
218 color="error"
219 onClick={() => setShow(false)}220 >
221 Cancel
222 </Button>JSX props should not use arrow functions
204 multiple={true}
205 ref={fileRef}
206 hidden
207 onChange={(e) => addImage(e)}208 />
209 </div>
210 </div>
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} />
}
}