The latest articles on DEV Community by Muhammad Said Arrafi (@muhammad_saidarrafi_c580). https://dev.to/muhammad_saidarrafi_c580 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%2F1703099%2Fd5d9df56-def3-452a-a9f6-2f6ee2209d2f.jpg https://dev.to/muhammad_saidarrafi_c580 en Muhammad Said Arrafi Sat, 29 Jun 2024 10:06:17 +0000 https://dev.to/muhammad_saidarrafi_c580/redux-vs-zustand-3ane https://dev.to/muhammad_saidarrafi_c580/redux-vs-zustand-3ane <p><strong>Zustand VS Redux</strong></p> <p><strong>Zustand</strong><br> pro:</p> <ol> <li><p>Simplicy<br> Zustand offers an uncomplicated and lightweight library that is conveniently adaptable for small projects, while Redux provides a more robust and feature-loaded solution best suited for large applications</p></li> <li> <p>BundleSize (304kb)<br> include:</p> <ul> <li>1. presist</li> <li>2. devtols</li> <li>3. midleware </li> </ul> </li> </ol> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frda8qaxpxkgczkxwu55z.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frda8qaxpxkgczkxwu55z.png" alt="Zustand size in NPM" width="800" height="942"></a></p> <p>const:</p> <ol> <li>ecosystem</li> <li>Server Side Issue ( Because Requires function component )</li> <li>Requires function component </li> </ol> <p><strong>Redux</strong><br> pro:</p> <ol> <li>Many Ecosystem</li> <li>State stored in a single object tree (centered)</li> <li>Easy to debug</li> <li>State is predictable</li> <li>You can log everything</li> <li>Granular updates </li> </ol> <p>const:</p> <ol> <li><p>Complex<br> Redux is known for its robust ecosystem and extensive set of middleware and tooling. However, it requires more boilerplate code to set up and manage the store, actions, and reducers</p></li> <li> <p>bundleSize</p> <ul> <li> redux: 176 kB</li> <li> react-redux: 740 kB </li> <li> toal: 916 kB</li> </ul> </li> </ol> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm65quhip56ohe2yzytr0.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm65quhip56ohe2yzytr0.png" alt="Redux Size in NPM" width="800" height="942"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhgmhp9r44zox0x3potvq.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhgmhp9r44zox0x3potvq.png" alt="React-redux size in NPM" width="800" height="942"></a></p> webdev javascript beginners react