I implemented the ponentShouldUpdate in the code below to try and speed up performance. This goal was acplished, but now the ments don't render. Browser console shows that everything is being received, though. There's also a div that renders the number of ments and that is being updated as well.
class ProposalDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
sortedComments: []
};
}
ponentDidUpdate(prevProps) {
if((!prevProps.proposal || Object.keys(prevProps.proposal).length === 0 ) &&
this.props.proposal && Object.keys(this.props.proposal).length > 0 &&
this.props.proposal.status === 4 ){
prevProps.onFetchProposalVoteStatus(prevProps.token);
}
this.handleUpdateOfComments(prevProps, this.props);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('thisProps', this.propsments)
console.log('nextProps', nextPropsments)
if (this.propsments === nextPropsments) {
return true
}
else {
return false
}
}
ponentDidMount() {
this.props.onFetchLikedComments(this.props.token);
}
ponentWillUnmount() {
this.props.resetLastSubmittedProposal();
}
handleUpdateOfComments = (currentProps, nextProps) => {
let sortedComments;
if(!nextPropsments || nextPropsments.length === 0) {
return;
}
// sort option changed
if(currentPropsmentsSortOption !== nextPropsmentsSortOption) {
sortedComments = updateSortedComments(
this.state.sortedComments,
nextPropsmentsSortOption
);
}
// new ment added
if(currentPropsments.length !== nextPropsments.length) {
const isEmpty = currentPropsments.length === 0;
const newComments = isEmpty ?
nextPropsments :
[nextPropsments[nextPropsments.length - 1]]
.concat(this.state.sortedComments);
sortedComments = updateSortedComments(
newComments,
currentPropsmentsSortOption,
nextPropsmentsvotes,
isEmpty
);
}
// usernames aren't fully merged into ments
const mentWithoutAnUsername = ments => ments.filter(c => !c.username)[0];
if (mentWithoutAnUsername(this.state.sortedComments) && !mentWithoutAnUsername(nextPropsments)) {
sortedComments = updateSortedComments(
nextPropsments,
currentPropsmentsSortOption,
nextPropsmentsvotes,
false
);
}
// mentsvotes changed
if(nextPropsmentsvotes && !isEqual(currentPropsmentsvotes, nextPropsmentsvotes)) {
const updatedComments = getUpdatedComments(nextPropsmentsvotes, nextPropsments);
const newComments = mergeNewComments(this.state.sortedComments, updatedComments);
sortedComments = updateSortedComments(
newComments,
currentPropsmentsSortOption,
nextPropsmentsvotes,
false
);
}
// ment gets censored
if(nextProps.censoredComment && !isEqual(currentProps.censoredComment, nextProps.censoredComment)) {
sortedComments = updateSortedComments(
nextPropsments,
currentPropsmentsSortOption,
nextPropsmentsvotes,
true
);
}
if(sortedComments) {
this.setState({ sortedComments });
console.log('setState', this.state.sortedComments);
}
}
render() {
const {
isLoading,
proposal,
token,
error,
markdownFile,
otherFiles,
onFetchData,
...props
} = this.props;
console.log(this.props);
const ments = this.state.sortedComments;
return (
<div className="content" role="main">
<div className="page proposal-page">
{error ? (
<Message
type="error"
header="Proposal not found"
body={error} />
) : (
<Content {...{
isLoading,
error,
bodyClassName: "single-page ments-page",
onFetchData: () => onFetchData(token),
listings: isLoading ? [] : [
{
allChildren: [{
kind: "t3",
data: {
...proposalToT3(proposal, 0).data,
otherFiles,
selftext: markdownFile ? getTextFromIndexMd(markdownFile) : null,
selftext_html: markdownFile ? getTextFromIndexMd(markdownFile) : null
}
}]
},
{ allChildren: mentsToT1(ments) }
],
...props
}} />
)}
</div>
</div>
);
}
}
export default ProposalDetail;
I implemented the ponentShouldUpdate in the code below to try and speed up performance. This goal was acplished, but now the ments don't render. Browser console shows that everything is being received, though. There's also a div that renders the number of ments and that is being updated as well.
class ProposalDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
sortedComments: []
};
}
ponentDidUpdate(prevProps) {
if((!prevProps.proposal || Object.keys(prevProps.proposal).length === 0 ) &&
this.props.proposal && Object.keys(this.props.proposal).length > 0 &&
this.props.proposal.status === 4 ){
prevProps.onFetchProposalVoteStatus(prevProps.token);
}
this.handleUpdateOfComments(prevProps, this.props);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('thisProps', this.props.ments)
console.log('nextProps', nextProps.ments)
if (this.props.ments === nextProps.ments) {
return true
}
else {
return false
}
}
ponentDidMount() {
this.props.onFetchLikedComments(this.props.token);
}
ponentWillUnmount() {
this.props.resetLastSubmittedProposal();
}
handleUpdateOfComments = (currentProps, nextProps) => {
let sortedComments;
if(!nextProps.ments || nextProps.ments.length === 0) {
return;
}
// sort option changed
if(currentProps.mentsSortOption !== nextProps.mentsSortOption) {
sortedComments = updateSortedComments(
this.state.sortedComments,
nextProps.mentsSortOption
);
}
// new ment added
if(currentProps.ments.length !== nextProps.ments.length) {
const isEmpty = currentProps.ments.length === 0;
const newComments = isEmpty ?
nextProps.ments :
[nextProps.ments[nextProps.ments.length - 1]]
.concat(this.state.sortedComments);
sortedComments = updateSortedComments(
newComments,
currentProps.mentsSortOption,
nextProps.mentsvotes,
isEmpty
);
}
// usernames aren't fully merged into ments
const mentWithoutAnUsername = ments => ments.filter(c => !c.username)[0];
if (mentWithoutAnUsername(this.state.sortedComments) && !mentWithoutAnUsername(nextProps.ments)) {
sortedComments = updateSortedComments(
nextProps.ments,
currentProps.mentsSortOption,
nextProps.mentsvotes,
false
);
}
// mentsvotes changed
if(nextProps.mentsvotes && !isEqual(currentProps.mentsvotes, nextProps.mentsvotes)) {
const updatedComments = getUpdatedComments(nextProps.mentsvotes, nextProps.ments);
const newComments = mergeNewComments(this.state.sortedComments, updatedComments);
sortedComments = updateSortedComments(
newComments,
currentProps.mentsSortOption,
nextProps.mentsvotes,
false
);
}
// ment gets censored
if(nextProps.censoredComment && !isEqual(currentProps.censoredComment, nextProps.censoredComment)) {
sortedComments = updateSortedComments(
nextProps.ments,
currentProps.mentsSortOption,
nextProps.mentsvotes,
true
);
}
if(sortedComments) {
this.setState({ sortedComments });
console.log('setState', this.state.sortedComments);
}
}
render() {
const {
isLoading,
proposal,
token,
error,
markdownFile,
otherFiles,
onFetchData,
...props
} = this.props;
console.log(this.props);
const ments = this.state.sortedComments;
return (
<div className="content" role="main">
<div className="page proposal-page">
{error ? (
<Message
type="error"
header="Proposal not found"
body={error} />
) : (
<Content {...{
isLoading,
error,
bodyClassName: "single-page ments-page",
onFetchData: () => onFetchData(token),
listings: isLoading ? [] : [
{
allChildren: [{
kind: "t3",
data: {
...proposalToT3(proposal, 0).data,
otherFiles,
selftext: markdownFile ? getTextFromIndexMd(markdownFile) : null,
selftext_html: markdownFile ? getTextFromIndexMd(markdownFile) : null
}
}]
},
{ allChildren: mentsToT1(ments) }
],
...props
}} />
)}
</div>
</div>
);
}
}
export default ProposalDetail;
- 2 You are checking for equality between two different objects. Though the contents of nextProps.ments and this.props.ments may be the same, they point to a different object. Find a way to check their contents. – Alex G Commented Sep 27, 2018 at 17:44
- it may be helpful to put your code into a sandbox like stackblitz. – David Chase Commented Sep 27, 2018 at 17:44
- Hmmm okay I never thought about the accessing the contents. I just tried adding .length (since ments is an array) but still no avail. Any other ideas why adding ponentShouldUpdate would make the ments not render? – Kevin Hebert Commented Sep 27, 2018 at 17:50
- Could you add the structure of a ment? – Alex G Commented Sep 27, 2018 at 17:57
2 Answers
Reset to default 6It’s not ponentShouldUpdate but shouldComponentUpdate
shouldComponentUpdate basically decide whether the ponent requires re rendering or not. This method either returns true or false only. By default this method returns true which means the ponent needs re rendering always whenever setState happens or props received irrespective of the state and props parison.
So in your case you are paring ments incorrectly in shouldComponentUpdate. You need to return true only when current props and previous props are not equal otherwise false but you are checking vice versa.
The below code would work
shouldComponentUpdate(nextProps, nextState) {
console.log('thisProps', this.props.ments)
console.log('nextProps', nextProps.ments)
if (JSON.stringify(this.props.ments) !== JSON.stringify(nextProps.ments)) {
return true
}
else {
return false
}
}
Try this:
JSON.stringify(this.props.ments) === JSON.stringify(nextProps.ments)
This dirty hack could help.
The problem is that you cannot pare two arrays in such a way you do.