The latest articles on DEV Community by Michael Dawson (@nippysaurus). https://dev.to/nippysaurus https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F269401%2F68964e0e-2c12-4709-9a4c-e4fa0a2935f5.png https://dev.to/nippysaurus en Michael Dawson Mon, 11 Nov 2019 11:55:36 +0000 https://dev.to/nippysaurus/unexpected-getsnapshotbeforeupdate-behaviour-50c0 https://dev.to/nippysaurus/unexpected-getsnapshotbeforeupdate-behaviour-50c0 <p>So I'm reading the documentation for <a href="https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate" rel="noopener noreferrer">getSnapshotBeforeUpdate</a> and it quite clearly outlines the exact use case I need it for (moving the scroll position when the page content moves). It also shows an example of reading the previous props (<code>prevProps</code>) and comparing them to the current props (<code>this.props</code>) to see if the number of items in the list has changed. I'm doing the same thing in my application, but I'm getting some odd behavior. Instead of the <code>prevProps</code> having the previous value and <code>this.props</code> having the current values, it behaves like this once then these values both change at once.</p> <p>For example if I was assigning a prop each letter of the alphabet this is what the outcome would be:</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>getSnapshotBeforeUpdate call num</th> <th><code>prevProps</code></th> <th><code>this.props</code></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>a</td> <td>b</td> </tr> <tr> <td>2</td> <td>c</td> <td>c</td> </tr> <tr> <td>3</td> <td>d</td> <td>d</td> </tr> </tbody> </table></div> <p>Does this seem like expected behaviour?</p> <p>The only thing I can think of is that I have this component wrapped in a redux store, so maybe that is doing something funky with the parameters? I'm really at a bit of a loss as to what is going on.</p> react