<p>When you use the <code>update</code> lifecycle hook, it will always fire when you do a render, even if the data being use has not changed. This does not mean that the DOM was physically updated. That would only happen if the props changed. Every time you render a functional component with <code>update</code> on it, <code>update</code> will execute. There is only one way to get around this--memoization.</p>

<p>Below is a Codepen with a list created as a function component. The list items have an <code>onupdate</code> lifecycle hook. When you click on the button that says "Render List with Same Data", it re-renders the list. Notice how in the results you see and oupt for each list item. This is so event though there was no change to the data the list is using. This means there was no physical update of the list items. This is because of how the diffing algorithm works.</p>

<p>The above technique solves the problem of the <code>update</code> lifecycle hook firing every time you render a function, even when the data is the same. However, be aware that this increases the memory that the list is using. If your list can be long, and you use this technique on other long list, you may find that your app is consuming a lot of memory, which can lead to other problems. If memoizing list items seems like too much trouble, consider making your list component using the <a target="_blank" href='./class-component.html'>Component class</a>. Class components memoize their previous state so that their update lifecycle hooks only fire when their data changes.</p>