In chrome browser's dev tools we can observe render splashes. To enable it press F12 - Customize - More tools - Rendering - tick Paint flashing function Component() { const [state, setState] = useState(''); return ( <> <button onClick={() => setState(state + ' + some text')}>Add text</button> <br /><br /> <div>Text{state}</div> </> ) } By button pressing we see how text line is highlighted. If we click until a new line is added the whole window is splashed. Browser has to render the complete page and recalculate height and position of elements to add a new line.