<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div class="message-content" style="max-width:600px"> <p style="margin-bottom:1em">It's very common for developers to confuse the need to manage, access, and cache data loaded from the server with UI state management. It's not just you. We all fall into this trap.</p> <p style="margin-bottom:1em">In the last email, I told you there are two different buckets of state in apps:</p> <ul> <li>Server Cache - State that's actually stored on the server and we store in the client for quick-access (like user data).</li> <li>UI State - State that's only useful in the UI for controlling the interactive parts of our app (like the dropdown <code>status === 'open'</code> kind of stuff).</li> </ul> <p style="margin-bottom:1em">A common mistake people make is to simply combine the two. Server cache has inherently different problems from UI state and therefore needs to be managed differently. If you embrace the fact that what you have is not actually state at all but is instead a cache of state, then you can start thinking about it correctly and therefore managing it correctly.</p> <p style="margin-bottom:1em">You can definitely manage this yourself with your own <code>useState</code> or <code>useReducer</code> with the right <code>useContext</code> here and there. But allow me to help you cut to the chase and say that caching is a really hard problem (some say that it's one of the hardest in computer science) and it would be wise to stand on the shoulders of giants on this one.</p> <p style="margin-bottom:1em">Interestingly, the browser has solved caching and it's extremely configurable via cache headers. If you get the right cache headers in place in your server responses + set up a CDN to cache as well, then you'll be sitting pretty using the platform.</p> <p style="margin-bottom:1em">The challenge is getting this configured in a maintainable way. Remix solves this problem beautifully. All you need to do is <a href="https://click.convertkit-mail.com/gkup4985v7twu6nvxzhrh8dxm699bmhdwe3/08hwhgum0o50mnfl/aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvSFRUUC9DYWNoaW5n" style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:normal;font-size:13px;line-height:inherit;font-family:inherit;color:rgb(0, 153, 204);text-decoration:none;" url-id="1338287797">learn about cache headers</a> (25 year old rock-solid standards), add those to your server responses, and Remix (*cough* the browser) will take care of the rest.</p> <p style="margin-bottom:1em">And as Remix is just a small wrapper around react-router, you can get most of that goodness from react-router's clientLoader and clientActions functionality. It's a thing of beauty.</p> <p style="margin-bottom:1em">If you do have a few extra use-cases (like pagination, subscriptions, etc.) then you may considering adding <a href="https://click.convertkit-mail.com/gkup4985v7twu6nvxzhrh8dxm699bmhdwe3/8ghqh3uge0vegzbk/aHR0cHM6Ly9naXRodWIuY29tL3Rhbm5lcmxpbnNsZXkvcmVhY3QtcXVlcnk=" style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:normal;font-size:13px;line-height:inherit;font-family:inherit;color:rgb(0, 153, 204);text-decoration:none;" url-id="1338287798">react-query</a>. It's a client-side cache written in JavaScript and it's a darn good one.</p> <p style="margin-bottom:1em">Once you've got the server cache handled, then React will hold your coat for the UI state.</p> <p style="margin-bottom:1em"><span style="">Let's talk style tomorrow. 😎</span><br></p> <p style="margin-bottom:1em">Thanks!</p> <p style="margin-bottom:1em">Kent</p> <br> <br> <small> <a href="https://unsubscribe.convertkit-mail.com/gkup4985v7twu6nvxzhrh8dxm699bmhdwe3">Unsubscribe</a> | <a href="https://preferences.convertkit-mail.com/gkup4985v7twu6nvxzhrh8dxm699bmhdwe3">Update your profile</a> | P.O. Box 562, American Fork, Utah 84003 <br> </small> </div> <!-- --> <img src="https://open.convertkit-mail.com/gkup4985v7twu6nvxzhrh8dxm699bmhdwe3" alt=""> </body> </html>