React Antdesign performance optimisation
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
It seems that change in one antd component, will trigger rerender for all other Components on the page. React.PureComponent doesn't work, when you put antdesign components inside - it won't allow to enter text, because no state and props changed.
The only workaround i see, is putting extra logic inside shouldComponentUpdate, or maintain local state with onChange method for every single field.
Maintaining state for all fields, is a headache for me. Does anyone run large app with many antdesign items, so that i could at least understand when is the right time to make optimisations?
Currently i have forms with about 60 antdesign components, and when typing, it hangs for a while.
reactjs antd
asked Nov 16 '18 at 21:51
tyliktylik
605717
add a comment |
It seems that change in one antd component, will trigger rerender for all other Components on the page. React.PureComponent doesn't work, when you put antdesign components inside - it won't allow to enter text, because no state and props changed.
The only workaround i see, is putting extra logic inside shouldComponentUpdate, or maintain local state with onChange method for every single field.
Maintaining state for all fields, is a headache for me. Does anyone run large app with many antdesign items, so that i could at least understand when is the right time to make optimisations?
Currently i have forms with about 60 antdesign components, and when typing, it hangs for a while.
reactjs antd
asked Nov 16 '18 at 21:51
tyliktylik
605717
React.PureComponent doesn't work... Could you elaborate on why you think it doesn't work for you? If possible, with a small working example?
– Maaz Syed Adeeb
Nov 17 '18 at 8:07
@MaazSyedAdeeb sorry, i thinkReact.PureComponentwill work, if state is set for each antd component withonChangecallback. But it doesn't allow to easily trigger component update, when parent state changes. InshouldComponentUpdate, it is easy to check for any scenario, coming from a parent prop or state, and ignore the rest
– tylik
Nov 17 '18 at 22:30
add a comment |
It seems that change in one antd component, will trigger rerender for all other Components on the page. React.PureComponent doesn't work, when you put antdesign components inside - it won't allow to enter text, because no state and props changed.
The only workaround i see, is putting extra logic inside shouldComponentUpdate, or maintain local state with onChange method for every single field.
Maintaining state for all fields, is a headache for me. Does anyone run large app with many antdesign items, so that i could at least understand when is the right time to make optimisations?
Currently i have forms with about 60 antdesign components, and when typing, it hangs for a while.
reactjs antd
asked Nov 16 '18 at 21:51
tyliktylik
605717
It seems that change in one antd component, will trigger rerender for all other Components on the page. React.PureComponent doesn't work, when you put antdesign components inside - it won't allow to enter text, because no state and props changed.
The only workaround i see, is putting extra logic inside shouldComponentUpdate, or maintain local state with onChange method for every single field.
Maintaining state for all fields, is a headache for me. Does anyone run large app with many antdesign items, so that i could at least understand when is the right time to make optimisations?
Currently i have forms with about 60 antdesign components, and when typing, it hangs for a while.
reactjs antd
reactjs antd
asked Nov 16 '18 at 21:51
tyliktylik
605717
asked Nov 16 '18 at 21:51
tyliktylik
605717
edited Nov 16 '18 at 21:56
tylik
asked Nov 16 '18 at 21:51
tyliktylik
605717
asked Nov 16 '18 at 21:51
tyliktylik
605717
asked Nov 16 '18 at 21:51
tyliktylik
605717
605717
React.PureComponent doesn't work... Could you elaborate on why you think it doesn't work for you? If possible, with a small working example?
– Maaz Syed Adeeb
Nov 17 '18 at 8:07
@MaazSyedAdeeb sorry, i thinkReact.PureComponentwill work, if state is set for each antd component withonChangecallback. But it doesn't allow to easily trigger component update, when parent state changes. InshouldComponentUpdate, it is easy to check for any scenario, coming from a parent prop or state, and ignore the rest
– tylik
Nov 17 '18 at 22:30
add a comment |
React.PureComponent doesn't work... Could you elaborate on why you think it doesn't work for you? If possible, with a small working example?
– Maaz Syed Adeeb
Nov 17 '18 at 8:07
@MaazSyedAdeeb sorry, i thinkReact.PureComponentwill work, if state is set for each antd component withonChangecallback. But it doesn't allow to easily trigger component update, when parent state changes. InshouldComponentUpdate, it is easy to check for any scenario, coming from a parent prop or state, and ignore the rest
– tylik
Nov 17 '18 at 22:30
React.PureComponent doesn't work... Could you elaborate on why you think it doesn't work for you? If possible, with a small working example?
– Maaz Syed Adeeb
Nov 17 '18 at 8:07
React.PureComponent doesn't work... Could you elaborate on why you think it doesn't work for you? If possible, with a small working example?
– Maaz Syed Adeeb
Nov 17 '18 at 8:07
@MaazSyedAdeeb sorry, i think
React.PureComponent will work, if state is set for each antd component with onChange callback. But it doesn't allow to easily trigger component update, when parent state changes. In shouldComponentUpdate, it is easy to check for any scenario, coming from a parent prop or state, and ignore the rest– tylik
Nov 17 '18 at 22:30
@MaazSyedAdeeb sorry, i think
React.PureComponent will work, if state is set for each antd component with onChange callback. But it doesn't allow to easily trigger component update, when parent state changes. In shouldComponentUpdate, it is easy to check for any scenario, coming from a parent prop or state, and ignore the rest– tylik
Nov 17 '18 at 22:30
add a comment |
1 Answer
1
active
oldest
votes
As no one answered, i'll post answer, which i came up with, while experimenting.
It seems that using shouldComponentUpdate combined with local state and parent state, if needed, is the way to go.
On each field i've attached onChange event to change local state on the component. Then inside shouldComponentUpdate check if nextState equals to current state.
If you also need to check something against parent state, pass it through props.
Personally i don't like this approach, but can't think of anything better.
If you feel like there is a better way, i'll be glad to hear a different opinion.
answered Nov 17 '18 at 7:48
tyliktylik
605717
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%2f53345912%2freact-antdesign-performance-optimisation%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
As no one answered, i'll post answer, which i came up with, while experimenting.
It seems that using shouldComponentUpdate combined with local state and parent state, if needed, is the way to go.
On each field i've attached onChange event to change local state on the component. Then inside shouldComponentUpdate check if nextState equals to current state.
If you also need to check something against parent state, pass it through props.
Personally i don't like this approach, but can't think of anything better.
If you feel like there is a better way, i'll be glad to hear a different opinion.
answered Nov 17 '18 at 7:48
tyliktylik
605717
add a comment |
As no one answered, i'll post answer, which i came up with, while experimenting.
It seems that using shouldComponentUpdate combined with local state and parent state, if needed, is the way to go.
On each field i've attached onChange event to change local state on the component. Then inside shouldComponentUpdate check if nextState equals to current state.
If you also need to check something against parent state, pass it through props.
Personally i don't like this approach, but can't think of anything better.
If you feel like there is a better way, i'll be glad to hear a different opinion.
answered Nov 17 '18 at 7:48
tyliktylik
605717
add a comment |
As no one answered, i'll post answer, which i came up with, while experimenting.
It seems that using shouldComponentUpdate combined with local state and parent state, if needed, is the way to go.
On each field i've attached onChange event to change local state on the component. Then inside shouldComponentUpdate check if nextState equals to current state.
If you also need to check something against parent state, pass it through props.
Personally i don't like this approach, but can't think of anything better.
If you feel like there is a better way, i'll be glad to hear a different opinion.
answered Nov 17 '18 at 7:48
tyliktylik
605717
As no one answered, i'll post answer, which i came up with, while experimenting.
It seems that using shouldComponentUpdate combined with local state and parent state, if needed, is the way to go.
On each field i've attached onChange event to change local state on the component. Then inside shouldComponentUpdate check if nextState equals to current state.
If you also need to check something against parent state, pass it through props.
Personally i don't like this approach, but can't think of anything better.
If you feel like there is a better way, i'll be glad to hear a different opinion.
answered Nov 17 '18 at 7:48
tyliktylik
605717
answered Nov 17 '18 at 7:48
tyliktylik
605717
answered Nov 17 '18 at 7:48
tyliktylik
605717
answered Nov 17 '18 at 7:48
tyliktylik
605717
605717
add a comment |
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%2f53345912%2freact-antdesign-performance-optimisation%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
React.PureComponent doesn't work... Could you elaborate on why you think it doesn't work for you? If possible, with a small working example?
– Maaz Syed Adeeb
Nov 17 '18 at 8:07
@MaazSyedAdeeb sorry, i think
React.PureComponentwill work, if state is set for each antd component withonChangecallback. But it doesn't allow to easily trigger component update, when parent state changes. InshouldComponentUpdate, it is easy to check for any scenario, coming from a parent prop or state, and ignore the rest– tylik
Nov 17 '18 at 22:30