React - Updating scroll position of parent component, setState or use a ref?
I have a react component that has a sub component slider. I have synched up the components such that the parent components state tracks the scroll position and passes that as a prop to the slider to trigger a re render with the new value as the slider position.
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: 0
};
}
render() {
return (
<div id="container" onScroll={this.updateScroll}>
<Slider
max={'2000px'}
value={this.state.scrollPosition}
onChange={(value) =>
ReactDom.findDOMNode(this).firstChild.scrollTo(value, 0);}}
showValue={false}
/>
</div>
);
}
updateScroll = (e) => {
const container = e.target;
this.setState(function(state, props){
return {scrollPosition: container.scrollLeft};
});
}
}
Under onchange, I find the dom element and update the scroll value, which will not trigger a re-render.
However I could also call the updateScroll function, to set the state to the new value of the Slider and then trigger a re-render through the React lifecycle. This however I feel like is not as good performance wise as simply updating the property of a dom element and not re-rendering everything.
Given that we could use refs as well and not perform a dom search for the element to update, which approach is best practice and adheres the most to the React standards? Is there an entirely better way to implement this interaction?
Thanks in advance for your help!
javascript reactjs
asked Nov 24 '18 at 20:42
Loren ShqipognjaLoren Shqipognja
118110
add a comment |
I have a react component that has a sub component slider. I have synched up the components such that the parent components state tracks the scroll position and passes that as a prop to the slider to trigger a re render with the new value as the slider position.
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: 0
};
}
render() {
return (
<div id="container" onScroll={this.updateScroll}>
<Slider
max={'2000px'}
value={this.state.scrollPosition}
onChange={(value) =>
ReactDom.findDOMNode(this).firstChild.scrollTo(value, 0);}}
showValue={false}
/>
</div>
);
}
updateScroll = (e) => {
const container = e.target;
this.setState(function(state, props){
return {scrollPosition: container.scrollLeft};
});
}
}
Under onchange, I find the dom element and update the scroll value, which will not trigger a re-render.
However I could also call the updateScroll function, to set the state to the new value of the Slider and then trigger a re-render through the React lifecycle. This however I feel like is not as good performance wise as simply updating the property of a dom element and not re-rendering everything.
Given that we could use refs as well and not perform a dom search for the element to update, which approach is best practice and adheres the most to the React standards? Is there an entirely better way to implement this interaction?
Thanks in advance for your help!
javascript reactjs
asked Nov 24 '18 at 20:42
Loren ShqipognjaLoren Shqipognja
118110
add a comment |
I have a react component that has a sub component slider. I have synched up the components such that the parent components state tracks the scroll position and passes that as a prop to the slider to trigger a re render with the new value as the slider position.
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: 0
};
}
render() {
return (
<div id="container" onScroll={this.updateScroll}>
<Slider
max={'2000px'}
value={this.state.scrollPosition}
onChange={(value) =>
ReactDom.findDOMNode(this).firstChild.scrollTo(value, 0);}}
showValue={false}
/>
</div>
);
}
updateScroll = (e) => {
const container = e.target;
this.setState(function(state, props){
return {scrollPosition: container.scrollLeft};
});
}
}
Under onchange, I find the dom element and update the scroll value, which will not trigger a re-render.
However I could also call the updateScroll function, to set the state to the new value of the Slider and then trigger a re-render through the React lifecycle. This however I feel like is not as good performance wise as simply updating the property of a dom element and not re-rendering everything.
Given that we could use refs as well and not perform a dom search for the element to update, which approach is best practice and adheres the most to the React standards? Is there an entirely better way to implement this interaction?
Thanks in advance for your help!
javascript reactjs
asked Nov 24 '18 at 20:42
Loren ShqipognjaLoren Shqipognja
118110
I have a react component that has a sub component slider. I have synched up the components such that the parent components state tracks the scroll position and passes that as a prop to the slider to trigger a re render with the new value as the slider position.
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: 0
};
}
render() {
return (
<div id="container" onScroll={this.updateScroll}>
<Slider
max={'2000px'}
value={this.state.scrollPosition}
onChange={(value) =>
ReactDom.findDOMNode(this).firstChild.scrollTo(value, 0);}}
showValue={false}
/>
</div>
);
}
updateScroll = (e) => {
const container = e.target;
this.setState(function(state, props){
return {scrollPosition: container.scrollLeft};
});
}
}
Under onchange, I find the dom element and update the scroll value, which will not trigger a re-render.
However I could also call the updateScroll function, to set the state to the new value of the Slider and then trigger a re-render through the React lifecycle. This however I feel like is not as good performance wise as simply updating the property of a dom element and not re-rendering everything.
Given that we could use refs as well and not perform a dom search for the element to update, which approach is best practice and adheres the most to the React standards? Is there an entirely better way to implement this interaction?
Thanks in advance for your help!
javascript reactjs
javascript reactjs
asked Nov 24 '18 at 20:42
Loren ShqipognjaLoren Shqipognja
118110
asked Nov 24 '18 at 20:42
Loren ShqipognjaLoren Shqipognja
118110
asked Nov 24 '18 at 20:42
Loren ShqipognjaLoren Shqipognja
118110
asked Nov 24 '18 at 20:42
Loren ShqipognjaLoren Shqipognja
118110
asked Nov 24 '18 at 20:42
Loren ShqipognjaLoren Shqipognja
118110
118110
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Hope I understand correctly and you wish to present the scroll position.
Indeed setting state for every scroll update is bad performance. Scroll events could trigger at a higher rate than the frames you need to update.
To ease the amount of updates you perform, you can use a debounced method. Here's a short implementation of debounce.
It will limit the amount of scroll updates you will perform per a given time.
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: 0
};
this.updateScroll = debounce(this.updateScroll, 20);
}
...
}
answered Nov 24 '18 at 22:04
Moti AzuMoti Azu
3,76911023
The debounce method is certainly helpful in terms of performance, thank you! however I am asking specifically in regards to whether or not the child component (Slider) should call updateScroll or directly manipulate the scroll position of the dom element and if the latter (as shown in my code) , is refs better than direct dom search and manipulate.
– Loren Shqipognja
Nov 24 '18 at 23:29
I have no idea what you are syncing to the scroll or vice versa. Got no advice unless you clarify
– Moti Azu
Nov 25 '18 at 12:00
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%2f53462195%2freact-updating-scroll-position-of-parent-component-setstate-or-use-a-ref%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
Hope I understand correctly and you wish to present the scroll position.
Indeed setting state for every scroll update is bad performance. Scroll events could trigger at a higher rate than the frames you need to update.
To ease the amount of updates you perform, you can use a debounced method. Here's a short implementation of debounce.
It will limit the amount of scroll updates you will perform per a given time.
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: 0
};
this.updateScroll = debounce(this.updateScroll, 20);
}
...
}
answered Nov 24 '18 at 22:04
Moti AzuMoti Azu
3,76911023
The debounce method is certainly helpful in terms of performance, thank you! however I am asking specifically in regards to whether or not the child component (Slider) should call updateScroll or directly manipulate the scroll position of the dom element and if the latter (as shown in my code) , is refs better than direct dom search and manipulate.
– Loren Shqipognja
Nov 24 '18 at 23:29
I have no idea what you are syncing to the scroll or vice versa. Got no advice unless you clarify
– Moti Azu
Nov 25 '18 at 12:00
add a comment |
Hope I understand correctly and you wish to present the scroll position.
Indeed setting state for every scroll update is bad performance. Scroll events could trigger at a higher rate than the frames you need to update.
To ease the amount of updates you perform, you can use a debounced method. Here's a short implementation of debounce.
It will limit the amount of scroll updates you will perform per a given time.
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: 0
};
this.updateScroll = debounce(this.updateScroll, 20);
}
...
}
answered Nov 24 '18 at 22:04
Moti AzuMoti Azu
3,76911023
The debounce method is certainly helpful in terms of performance, thank you! however I am asking specifically in regards to whether or not the child component (Slider) should call updateScroll or directly manipulate the scroll position of the dom element and if the latter (as shown in my code) , is refs better than direct dom search and manipulate.
– Loren Shqipognja
Nov 24 '18 at 23:29
I have no idea what you are syncing to the scroll or vice versa. Got no advice unless you clarify
– Moti Azu
Nov 25 '18 at 12:00
add a comment |
Hope I understand correctly and you wish to present the scroll position.
Indeed setting state for every scroll update is bad performance. Scroll events could trigger at a higher rate than the frames you need to update.
To ease the amount of updates you perform, you can use a debounced method. Here's a short implementation of debounce.
It will limit the amount of scroll updates you will perform per a given time.
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: 0
};
this.updateScroll = debounce(this.updateScroll, 20);
}
...
}
answered Nov 24 '18 at 22:04
Moti AzuMoti Azu
3,76911023
Hope I understand correctly and you wish to present the scroll position.
Indeed setting state for every scroll update is bad performance. Scroll events could trigger at a higher rate than the frames you need to update.
To ease the amount of updates you perform, you can use a debounced method. Here's a short implementation of debounce.
It will limit the amount of scroll updates you will perform per a given time.
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: 0
};
this.updateScroll = debounce(this.updateScroll, 20);
}
...
}
answered Nov 24 '18 at 22:04
Moti AzuMoti Azu
3,76911023
answered Nov 24 '18 at 22:04
Moti AzuMoti Azu
3,76911023
answered Nov 24 '18 at 22:04
Moti AzuMoti Azu
3,76911023
answered Nov 24 '18 at 22:04
Moti AzuMoti Azu
3,76911023
3,76911023
The debounce method is certainly helpful in terms of performance, thank you! however I am asking specifically in regards to whether or not the child component (Slider) should call updateScroll or directly manipulate the scroll position of the dom element and if the latter (as shown in my code) , is refs better than direct dom search and manipulate.
– Loren Shqipognja
Nov 24 '18 at 23:29
I have no idea what you are syncing to the scroll or vice versa. Got no advice unless you clarify
– Moti Azu
Nov 25 '18 at 12:00
add a comment |
The debounce method is certainly helpful in terms of performance, thank you! however I am asking specifically in regards to whether or not the child component (Slider) should call updateScroll or directly manipulate the scroll position of the dom element and if the latter (as shown in my code) , is refs better than direct dom search and manipulate.
– Loren Shqipognja
Nov 24 '18 at 23:29
I have no idea what you are syncing to the scroll or vice versa. Got no advice unless you clarify
– Moti Azu
Nov 25 '18 at 12:00
The debounce method is certainly helpful in terms of performance, thank you! however I am asking specifically in regards to whether or not the child component (Slider) should call updateScroll or directly manipulate the scroll position of the dom element and if the latter (as shown in my code) , is refs better than direct dom search and manipulate.
– Loren Shqipognja
Nov 24 '18 at 23:29
The debounce method is certainly helpful in terms of performance, thank you! however I am asking specifically in regards to whether or not the child component (Slider) should call updateScroll or directly manipulate the scroll position of the dom element and if the latter (as shown in my code) , is refs better than direct dom search and manipulate.
– Loren Shqipognja
Nov 24 '18 at 23:29
I have no idea what you are syncing to the scroll or vice versa. Got no advice unless you clarify
– Moti Azu
Nov 25 '18 at 12:00
I have no idea what you are syncing to the scroll or vice versa. Got no advice unless you clarify
– Moti Azu
Nov 25 '18 at 12:00
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%2f53462195%2freact-updating-scroll-position-of-parent-component-setstate-or-use-a-ref%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
