<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Alex</title>
    <description>The latest articles on DEV Community by Alex (@alex2525).</description>
    <link>https://dev.to/alex2525</link>
    <image>
      <url>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%2F3474851%2Fc3f0d6bf-fc12-4963-9a6a-99bd92b06057.jpg</url>
      <title>DEV Community: Alex</title>
      <link>https://dev.to/alex2525</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/alex2525"/>
    <language>en</language>
    <item>
      <title>Look, Just Use Resso for State. Thank Me Later.</title>
      <dc:creator>Alex</dc:creator>
      <pubDate>Tue, 02 Sep 2025 06:35:46 +0000</pubDate>
      <link>https://dev.to/alex2525/look-just-use-resso-for-state-thank-me-later-146d</link>
      <guid>https://dev.to/alex2525/look-just-use-resso-for-state-thank-me-later-146d</guid>
      <description>&lt;p&gt;I've been building React apps for years. I've set up more Redux stores than I can count, wrestled with Context hell, and given Zustand a very fair shot. And I'm tired. I'm just tired of the ceremony.&lt;/p&gt;

&lt;p&gt;You know the drill. You need some piece of state that a few components need to share. Suddenly, you're creating a store, writing a hook, memoizing selectors, wrapping things in providers, and for what? A &lt;code&gt;username&lt;/code&gt; field and a &lt;code&gt;theme&lt;/code&gt; toggle.&lt;/p&gt;

&lt;p&gt;It feels like using a sledgehammer to crack a nut.&lt;/p&gt;

&lt;p&gt;Then I found Resso. And I almost scrolled right past it because, honestly, &lt;em&gt;another&lt;/em&gt; state library? But the simplicity caught my eye. I tried it. And guys... it's stupidly simple. In a good way.&lt;/p&gt;

&lt;h3&gt;
  
  
  Here's the Entire API
&lt;/h3&gt;

&lt;p&gt;No, really. This is it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;resso&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;resso&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Make a store. It's an object.&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;resso&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Resso&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Counter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Use the store. Just... use it.&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;You&lt;/span&gt; &lt;span class="nx"&gt;clicked&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;times&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Click&lt;/span&gt; &lt;span class="nx"&gt;me&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;See that? No &lt;code&gt;useStore&lt;/code&gt;. No &lt;code&gt;Provider&lt;/code&gt; wrapped around your app. No &lt;code&gt;selectors&lt;/code&gt;. You just import a store and read from it. To update it, you just... assign a new value. &lt;code&gt;store.count++&lt;/code&gt;. It feels wrong after the years of Redux indoctrination, but it's so right.&lt;/p&gt;

&lt;h3&gt;
  
  
  How It Doesn't Screw Up Your Rendering
&lt;/h3&gt;

&lt;p&gt;This was my biggest question. If I'm just mutating an object, how does React know to re-render?&lt;/p&gt;

&lt;p&gt;Turns out, Resso is sneakily smart. When you destructure &lt;code&gt;const { count } = store&lt;/code&gt; inside your component, Resso quietly subscribes that component to the &lt;code&gt;count&lt;/code&gt; property. When you assign &lt;code&gt;store.count++&lt;/code&gt;, it only notifies the components that are actually using &lt;code&gt;count&lt;/code&gt;. The components using other parts of the store don't re-render.&lt;/p&gt;

&lt;p&gt;It gives you the granular, optimized updates you'd get from writing a bunch of custom &lt;code&gt;useSelector&lt;/code&gt; hooks, but without writing any of them. It just works.&lt;/p&gt;

&lt;h3&gt;
  
  
  Let's Be Real: When You Might Not Want It
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;You need middleware.&lt;/strong&gt; If you require heavy-duty stuff like Redux DevTools tracing, thunks, or sagas, Resso isn't for you. It's purposefully simple.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;You have deeply nested state.&lt;/strong&gt; It works best with flat-ish state. For nested objects, you need to replace the entire object to trigger an update (a very React-like constraint).&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ✅ Do this&lt;/span&gt;
&lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;New Name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// ❌ Not this (won't trigger an update)&lt;/span&gt;
&lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;New Name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One More Thing (The Real Dev Experience)&lt;/p&gt;

&lt;p&gt;Look, we all need to step away from the code sometimes. When I'm stuck on a gnarly bug or my brain is fried from optimization overkill, I take a break. And honestly, one of my favorite ways to reset is by firing up an old PS1 emulator. There's something about the simplicity of those classic games that just clears my head.&lt;/p&gt;

&lt;p&gt;I usually grab the ROMs from &lt;a href="https://psxroms.pro" rel="noopener noreferrer"&gt;PSXROMs&lt;/a&gt; – their library is well-organized and it's a legit nostalgia trip. Fifteen minutes of &lt;em&gt;Crash Bandicoot&lt;/em&gt; or &lt;em&gt;Tekken 3&lt;/em&gt; and I can come back to my state management problems with a fresh perspective. It’s the best kind of debugging.&lt;/p&gt;

&lt;p&gt;I'm not saying burn your Redux stores. For huge, complex enterprise apps, you might still need that machinery.&lt;/p&gt;

&lt;p&gt;But for 90% of the apps I build? The dashboards, the admin panels, the internal tools? Resso is an absolute godsend. It removes all the friction between having an idea and implementing it. It's the state manager I reach for by default now because it gets the job done with almost zero mental overhead.&lt;/p&gt;

&lt;p&gt;It just lets you write code. And that's the whole point, isn't it?&lt;/p&gt;

&lt;p&gt;Check it out on GitHub: &lt;a href="https://github.com/nanxiaobei/resso" rel="noopener noreferrer"&gt;https://github.com/nanxiaobei/resso&lt;/a&gt;&lt;/p&gt;

</description>
      <category>resso</category>
    </item>
  </channel>
</rss>
