Mixing
when using react useEffect my app is crashing
2
i m changing a class component to a functional component and i m using hooks and useEffect so my app becoms really slow and crushs without any error
import React, { useState, useEffect } from 'react';
import Toolbar from '@material-ui/core/Toolbar';
const FancyToolBar = ({ children }) => {
const [backGround, togglebackGround] = useState('white');
const listenScrollEvent = () => {
if (window.scrollY > 80) {
togglebackGround('black');
} else {
togglebackGround('white');
}
};
useEffect(() => {
window.addEventListener('scroll', listenScrollEvent);
});
const logo = backGround === 'white'
? <img src="/images/1.jpg" alt="" style={{ width: '50px !important', height: '50px' }} />
: <img src="/images/2.png" alt="" style={{ width: '50px !important', height: '50px' }} />;
return (
<Toolbar style={{ backgroundColor: backGround }}>
{logo}
{children}
</Toolbar>
);
};
export default FancyToolBar;
reactjs react-hooks
asked Jan 2 at 16:59
edaly Ahmededaly Ahmed
112
add a comment |
2
i m changing a class component to a functional component and i m using hooks and useEffect so my app becoms really slow and crushs without any error
import React, { useState, useEffect } from 'react';
import Toolbar from '@material-ui/core/Toolbar';
const FancyToolBar = ({ children }) => {
const [backGround, togglebackGround] = useState('white');
const listenScrollEvent = () => {
if (window.scrollY > 80) {
togglebackGround('black');
} else {
togglebackGround('white');
}
};
useEffect(() => {
window.addEventListener('scroll', listenScrollEvent);
});
const logo = backGround === 'white'
? <img src="/images/1.jpg" alt="" style={{ width: '50px !important', height: '50px' }} />
: <img src="/images/2.png" alt="" style={{ width: '50px !important', height: '50px' }} />;
return (
<Toolbar style={{ backgroundColor: backGround }}>
{logo}
{children}
</Toolbar>
);
};
export default FancyToolBar;
reactjs react-hooks
asked Jan 2 at 16:59
edaly Ahmededaly Ahmed
112
whats the error message
– Omar
Jan 2 at 17:34
what version of React? you must have most recent to use Hooks
– jsw324
Jan 2 at 18:03
add a comment |
2
2
2
i m changing a class component to a functional component and i m using hooks and useEffect so my app becoms really slow and crushs without any error
import React, { useState, useEffect } from 'react';
import Toolbar from '@material-ui/core/Toolbar';
const FancyToolBar = ({ children }) => {
const [backGround, togglebackGround] = useState('white');
const listenScrollEvent = () => {
if (window.scrollY > 80) {
togglebackGround('black');
} else {
togglebackGround('white');
}
};
useEffect(() => {
window.addEventListener('scroll', listenScrollEvent);
});
const logo = backGround === 'white'
? <img src="/images/1.jpg" alt="" style={{ width: '50px !important', height: '50px' }} />
: <img src="/images/2.png" alt="" style={{ width: '50px !important', height: '50px' }} />;
return (
<Toolbar style={{ backgroundColor: backGround }}>
{logo}
{children}
</Toolbar>
);
};
export default FancyToolBar;
reactjs react-hooks
asked Jan 2 at 16:59
edaly Ahmededaly Ahmed
112
i m changing a class component to a functional component and i m using hooks and useEffect so my app becoms really slow and crushs without any error
import React, { useState, useEffect } from 'react';
import Toolbar from '@material-ui/core/Toolbar';
const FancyToolBar = ({ children }) => {
const [backGround, togglebackGround] = useState('white');
const listenScrollEvent = () => {
if (window.scrollY > 80) {
togglebackGround('black');
} else {
togglebackGround('white');
}
};
useEffect(() => {
window.addEventListener('scroll', listenScrollEvent);
});
const logo = backGround === 'white'
? <img src="/images/1.jpg" alt="" style={{ width: '50px !important', height: '50px' }} />
: <img src="/images/2.png" alt="" style={{ width: '50px !important', height: '50px' }} />;
return (
<Toolbar style={{ backgroundColor: backGround }}>
{logo}
{children}
</Toolbar>
);
};
export default FancyToolBar;
reactjs react-hooks
reactjs react-hooks
asked Jan 2 at 16:59
edaly Ahmededaly Ahmed
112
asked Jan 2 at 16:59
edaly Ahmededaly Ahmed
112
asked Jan 2 at 16:59
edaly Ahmededaly Ahmed
112
asked Jan 2 at 16:59
edaly Ahmededaly Ahmed
112
asked Jan 2 at 16:59
edaly Ahmededaly Ahmed
112
112
whats the error message
– Omar
Jan 2 at 17:34
what version of React? you must have most recent to use Hooks
– jsw324
Jan 2 at 18:03
add a comment |
whats the error message
– Omar
Jan 2 at 17:34
what version of React? you must have most recent to use Hooks
– jsw324
Jan 2 at 18:03
whats the error message
– Omar
Jan 2 at 17:34
whats the error message
– Omar
Jan 2 at 17:34
what version of React? you must have most recent to use Hooks
– jsw324
Jan 2 at 18:03
what version of React? you must have most recent to use Hooks
– jsw324
Jan 2 at 18:03
add a comment |
2 Answers
2
active
oldest
votes
2
There are two things that you need to address.
First: you need to cleanup your eventListener.
Second: only add the event listener on initial mount by adding as the second parameter to useEffect
useEffect(() => {
window.addEventListener('scroll', listenScrollEvent);
return () => {
window.removeEventListener('scroll', listenScrollEvent);
}
}, );
answered Jan 3 at 11:47
Shubham KhatriShubham Khatri
93.9k15118159
Thank you! The second answer helped me with my infinite problem :)
– jwanglof
Feb 15 at 17:07
1
Consider marking the answer as accepted
– Shubham Khatri
Feb 15 at 17:14
add a comment |
0
Sorry guys, i just Forget To add the cleanup To my effect
answered Jan 3 at 7:40
edaly Ahmededaly Ahmed
112
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010272%2fwhen-using-react-useeffect-my-app-is-crashing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
There are two things that you need to address.
First: you need to cleanup your eventListener.
Second: only add the event listener on initial mount by adding as the second parameter to useEffect
useEffect(() => {
window.addEventListener('scroll', listenScrollEvent);
return () => {
window.removeEventListener('scroll', listenScrollEvent);
}
}, );
answered Jan 3 at 11:47
Shubham KhatriShubham Khatri
93.9k15118159
Thank you! The second answer helped me with my infinite problem :)
– jwanglof
Feb 15 at 17:07
1
Consider marking the answer as accepted
– Shubham Khatri
Feb 15 at 17:14
add a comment |
2
There are two things that you need to address.
First: you need to cleanup your eventListener.
Second: only add the event listener on initial mount by adding as the second parameter to useEffect
useEffect(() => {
window.addEventListener('scroll', listenScrollEvent);
return () => {
window.removeEventListener('scroll', listenScrollEvent);
}
}, );
answered Jan 3 at 11:47
Shubham KhatriShubham Khatri
93.9k15118159
Thank you! The second answer helped me with my infinite problem :)
– jwanglof
Feb 15 at 17:07
1
Consider marking the answer as accepted
– Shubham Khatri
Feb 15 at 17:14
add a comment |
2
2
2
There are two things that you need to address.
First: you need to cleanup your eventListener.
Second: only add the event listener on initial mount by adding as the second parameter to useEffect
useEffect(() => {
window.addEventListener('scroll', listenScrollEvent);
return () => {
window.removeEventListener('scroll', listenScrollEvent);
}
}, );
answered Jan 3 at 11:47
Shubham KhatriShubham Khatri
93.9k15118159
There are two things that you need to address.
First: you need to cleanup your eventListener.
Second: only add the event listener on initial mount by adding as the second parameter to useEffect
useEffect(() => {
window.addEventListener('scroll', listenScrollEvent);
return () => {
window.removeEventListener('scroll', listenScrollEvent);
}
}, );
answered Jan 3 at 11:47
Shubham KhatriShubham Khatri
93.9k15118159
answered Jan 3 at 11:47
Shubham KhatriShubham Khatri
93.9k15118159
answered Jan 3 at 11:47
Shubham KhatriShubham Khatri
93.9k15118159
answered Jan 3 at 11:47
Shubham KhatriShubham Khatri
93.9k15118159
93.9k15118159
Thank you! The second answer helped me with my infinite problem :)
– jwanglof
Feb 15 at 17:07
1
Consider marking the answer as accepted
– Shubham Khatri
Feb 15 at 17:14
add a comment |
Thank you! The second answer helped me with my infinite problem :)
– jwanglof
Feb 15 at 17:07
1
Consider marking the answer as accepted
– Shubham Khatri
Feb 15 at 17:14
Thank you! The second answer helped me with my infinite problem :)
– jwanglof
Feb 15 at 17:07
Thank you! The second answer helped me with my infinite problem :)
– jwanglof
Feb 15 at 17:07
1
1
Consider marking the answer as accepted
– Shubham Khatri
Feb 15 at 17:14
Consider marking the answer as accepted
– Shubham Khatri
Feb 15 at 17:14
add a comment |
0
Sorry guys, i just Forget To add the cleanup To my effect
answered Jan 3 at 7:40
edaly Ahmededaly Ahmed
112
add a comment |
0
Sorry guys, i just Forget To add the cleanup To my effect
answered Jan 3 at 7:40
edaly Ahmededaly Ahmed
112
add a comment |
0
0
0
Sorry guys, i just Forget To add the cleanup To my effect
answered Jan 3 at 7:40
edaly Ahmededaly Ahmed
112
Sorry guys, i just Forget To add the cleanup To my effect
answered Jan 3 at 7:40
edaly Ahmededaly Ahmed
112
answered Jan 3 at 7:40
edaly Ahmededaly Ahmed
112
answered Jan 3 at 7:40
edaly Ahmededaly Ahmed
112
answered Jan 3 at 7:40
edaly Ahmededaly Ahmed
112
112
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010272%2fwhen-using-react-useeffect-my-app-is-crashing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
whats the error message
– Omar
Jan 2 at 17:34
what version of React? you must have most recent to use Hooks
– jsw324
Jan 2 at 18:03