<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Context</h2>
<p dir="auto">I initially found the HOC pattern to be confusing, since (as a consumer) you can't explicitly see what prop(s) are being added.</p>
<p dir="auto"><em>(Also, it seems weird to create a component that can't stand on it's own, and then wrap it into something that can.)</em></p>
<p dir="auto">Here is an explanation of the render-props pattern, which solves that (first) problem to offer a better Developer eXperience:</p>
<p dir="auto"><a href="https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce" rel="nofollow">https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce</a></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">This is related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="185403597" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/88" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/88/hovercard" href="https://github.com/vercel/next.js/issues/88">#88</a>, but not quite the same. In this case, we are routing between the same page (/user.js), not different pages. Something weird is happening with the normal react lifecycle hooks for ALL page child components (all the way down the tree) that makes it impossible to prevent something from re-rendering.</p>
<p dir="auto">Essentially, this means that on every route change (even if you are routing between the same page) every single component on the page is forced to re-render, and there is no way to stop it.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">shouldComponentUpdate should be triggered as normal on the page component, and its child components.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">shouldComponentUpdate is skipped on the page component, and its child components.</p>
<h2 dir="auto">Steps to Reproduce</h2>
<p dir="auto">I have created an example that reproduces the issue in an isolated environment. It includes instructions for running, and seeing what's going on. It also includes a link to an animated gif for you lazy folks out there :).</p>
<p dir="auto"><a href="https://github.com/stoplightio/nextjs-router-bug">https://github.com/stoplightio/nextjs-router-bug</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">We have complicated inner components and not being able to prevent them from re-rendering is a problem.</p>