Would this be a good place to use shouldComponentUpdate lifecycle method? (ReactJS)
I am learning React by trying to make a simple game. In this game, I have a container component that manages a countdown timer. When the player starts the game I run the following function:
startTimer = () => {
setInterval(() => {
this.setState((prevState) => ({
timeLeft:prevState.timeLeft-1
}))
},1000)
};
My container component has the following render method:
render() {
return (
<div className="container">
<GameStats
gameStarted={this.state.gameStarted}
question={this.state.question}
numOfQuestions={this.state.numOfQuestions}
correctAnswers={this.state.correctAnswers}
timeLeft={this.state.timeLeft}
/>
<Board
gameStarted={this.state.gameStarted}
startGame={this.startGame}
squareClicked={this.squareClickedHandler}
sqOne={this.state.squareOne}
sqTwo={this.state.squareTwo}
sqThree={this.state.squareThree}
sqFour={this.state.squareFour}
/>
</div>
)
}
The GameStats component is responsible for rendering the time left whereas the Board component does not use it. Would it therefore make sense to turn the Board component into a class based component and implement the shouldComponentUpdate hook so it doesn't rerender every second?
reactjs
asked Jan 1 at 17:23
Boris GrunwaldBoris Grunwald
371210
add a comment |
I am learning React by trying to make a simple game. In this game, I have a container component that manages a countdown timer. When the player starts the game I run the following function:
startTimer = () => {
setInterval(() => {
this.setState((prevState) => ({
timeLeft:prevState.timeLeft-1
}))
},1000)
};
My container component has the following render method:
render() {
return (
<div className="container">
<GameStats
gameStarted={this.state.gameStarted}
question={this.state.question}
numOfQuestions={this.state.numOfQuestions}
correctAnswers={this.state.correctAnswers}
timeLeft={this.state.timeLeft}
/>
<Board
gameStarted={this.state.gameStarted}
startGame={this.startGame}
squareClicked={this.squareClickedHandler}
sqOne={this.state.squareOne}
sqTwo={this.state.squareTwo}
sqThree={this.state.squareThree}
sqFour={this.state.squareFour}
/>
</div>
)
}
The GameStats component is responsible for rendering the time left whereas the Board component does not use it. Would it therefore make sense to turn the Board component into a class based component and implement the shouldComponentUpdate hook so it doesn't rerender every second?
reactjs
asked Jan 1 at 17:23
Boris GrunwaldBoris Grunwald
371210
add a comment |
I am learning React by trying to make a simple game. In this game, I have a container component that manages a countdown timer. When the player starts the game I run the following function:
startTimer = () => {
setInterval(() => {
this.setState((prevState) => ({
timeLeft:prevState.timeLeft-1
}))
},1000)
};
My container component has the following render method:
render() {
return (
<div className="container">
<GameStats
gameStarted={this.state.gameStarted}
question={this.state.question}
numOfQuestions={this.state.numOfQuestions}
correctAnswers={this.state.correctAnswers}
timeLeft={this.state.timeLeft}
/>
<Board
gameStarted={this.state.gameStarted}
startGame={this.startGame}
squareClicked={this.squareClickedHandler}
sqOne={this.state.squareOne}
sqTwo={this.state.squareTwo}
sqThree={this.state.squareThree}
sqFour={this.state.squareFour}
/>
</div>
)
}
The GameStats component is responsible for rendering the time left whereas the Board component does not use it. Would it therefore make sense to turn the Board component into a class based component and implement the shouldComponentUpdate hook so it doesn't rerender every second?
reactjs
asked Jan 1 at 17:23
Boris GrunwaldBoris Grunwald
371210
I am learning React by trying to make a simple game. In this game, I have a container component that manages a countdown timer. When the player starts the game I run the following function:
startTimer = () => {
setInterval(() => {
this.setState((prevState) => ({
timeLeft:prevState.timeLeft-1
}))
},1000)
};
My container component has the following render method:
render() {
return (
<div className="container">
<GameStats
gameStarted={this.state.gameStarted}
question={this.state.question}
numOfQuestions={this.state.numOfQuestions}
correctAnswers={this.state.correctAnswers}
timeLeft={this.state.timeLeft}
/>
<Board
gameStarted={this.state.gameStarted}
startGame={this.startGame}
squareClicked={this.squareClickedHandler}
sqOne={this.state.squareOne}
sqTwo={this.state.squareTwo}
sqThree={this.state.squareThree}
sqFour={this.state.squareFour}
/>
</div>
)
}
The GameStats component is responsible for rendering the time left whereas the Board component does not use it. Would it therefore make sense to turn the Board component into a class based component and implement the shouldComponentUpdate hook so it doesn't rerender every second?
reactjs
reactjs
asked Jan 1 at 17:23
Boris GrunwaldBoris Grunwald
371210
asked Jan 1 at 17:23
Boris GrunwaldBoris Grunwald
371210
asked Jan 1 at 17:23
Boris GrunwaldBoris Grunwald
371210
asked Jan 1 at 17:23
Boris GrunwaldBoris Grunwald
371210
asked Jan 1 at 17:23
Boris GrunwaldBoris Grunwald
371210
371210
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Yes in general you should try to avoid updating the Board component every time the clock ticks. It would probably be best to turn your Board component to a PureComponent.
As mentioned in the docs PureComponent already implements shouldComponentUpdate:
React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
Make sure you read the caveat of the shallow comparison further down in the documentation.
answered Jan 1 at 19:45
alex-kalex-k
212
Thank you! I will look into it.
– Boris Grunwald
Jan 1 at 19:58
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
});
}
});
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%2f53997465%2fwould-this-be-a-good-place-to-use-shouldcomponentupdate-lifecycle-method-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Yes in general you should try to avoid updating the Board component every time the clock ticks. It would probably be best to turn your Board component to a PureComponent.
As mentioned in the docs PureComponent already implements shouldComponentUpdate:
React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
Make sure you read the caveat of the shallow comparison further down in the documentation.
answered Jan 1 at 19:45
alex-kalex-k
212
Thank you! I will look into it.
– Boris Grunwald
Jan 1 at 19:58
add a comment |
Yes in general you should try to avoid updating the Board component every time the clock ticks. It would probably be best to turn your Board component to a PureComponent.
As mentioned in the docs PureComponent already implements shouldComponentUpdate:
React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
Make sure you read the caveat of the shallow comparison further down in the documentation.
answered Jan 1 at 19:45
alex-kalex-k
212
Thank you! I will look into it.
– Boris Grunwald
Jan 1 at 19:58
add a comment |
Yes in general you should try to avoid updating the Board component every time the clock ticks. It would probably be best to turn your Board component to a PureComponent.
As mentioned in the docs PureComponent already implements shouldComponentUpdate:
React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
Make sure you read the caveat of the shallow comparison further down in the documentation.
answered Jan 1 at 19:45
alex-kalex-k
212
Yes in general you should try to avoid updating the Board component every time the clock ticks. It would probably be best to turn your Board component to a PureComponent.
As mentioned in the docs PureComponent already implements shouldComponentUpdate:
React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
Make sure you read the caveat of the shallow comparison further down in the documentation.
answered Jan 1 at 19:45
alex-kalex-k
212
answered Jan 1 at 19:45
alex-kalex-k
212
answered Jan 1 at 19:45
alex-kalex-k
212
answered Jan 1 at 19:45
alex-kalex-k
212
212
Thank you! I will look into it.
– Boris Grunwald
Jan 1 at 19:58
add a comment |
Thank you! I will look into it.
– Boris Grunwald
Jan 1 at 19:58
Thank you! I will look into it.
– Boris Grunwald
Jan 1 at 19:58
Thank you! I will look into it.
– Boris Grunwald
Jan 1 at 19:58
add a comment |
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.
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%2f53997465%2fwould-this-be-a-good-place-to-use-shouldcomponentupdate-lifecycle-method-react%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
