Arnaud Rochez Arnaud Rochez - 1 year ago 64
React JSX Question

Is there a way to change an html line instead of rerendering the whole component?

I am new to react and was wondering if there was a way to change one html line every second in the render method for example instead of rerendering the whole component?

I have to make a status bar where the time is displayed, so the date needs to be updated every second. Is it possible to only change the Menubar-time div?

componentDidMount: function() {
const self = this;
self.interval = setInterval(function() {
now: new Date(),
}, 1000);

componentWillUnmount: function() {

render() {
return (
<div className="Menubar">
<div className="Menubar-name">
<div className="Menubar-date">
<p><Time value={} format="DD/MM/YYYY" /></p>
<div className="Menubar-time">
<p><Time value={} format="HH:mm:ss" /></p>

Thank you for your answers.

Answer Source

Actually, the whole component is not re-rendered. render() returns instance of virtual DOM and only difference between current DOM and new DOM(returned by a render()) is applied. So you do not need to worry about performance in this case.

When you feel your performance being poor, you may consider implementing shouldComponentUpdate. As for me, I had to implement this just once or twice. React itself needs optimizations in quite rare cases.

Good luck!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download