2023-07-31
3007
#react
Kapeel Kokane
51356
Jul 31, 2023 ⋅ 10 min read

The modern guide to React state patterns

Kapeel Kokane Coder by day, content creator by night, learner at heart!

Recent posts:

Using Signaldb With React

Using SignalDB with React: A complete guide

SignalDB enables automatic data synchronization between your components and a local in-memory or persistent database.

Antonello Zanini
Feb 20, 2024 ⋅ 6 min read
Guide To Next Js Layouts And Nested Layouts

A guide to Next.js layouts and nested layouts

Understanding how layouts, nested layouts, and custom layouts work in Next.js is crucial for building complex, user-friendly projects.

Ibadehin Mojeed
Feb 19, 2024 ⋅ 12 min read
Extracting YouTube Video Data With OpenAI And LangChain

Extracting YouTube video data with OpenAI and LangChain

Extract YouTube video data using OpenAI and LangChain for quick, cost-effective insights without watching the videos.

Carlos Mucuho
Feb 16, 2024 ⋅ 9 min read
How To Use Css Variables Like A Pro

How to use CSS variables like a pro

By building these four simple projects, you’ll learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

Idorenyin Obong
Feb 15, 2024 ⋅ 15 min read
View all posts

8 Replies to "The modern guide to React state patterns"

  1. Very interesting. UseSWR looks really cool but how well does it work across all CRUD actions? How do you invalidate the cache? And what about saving the cache locally instead of in memory as an iPhone has very small memory that gets wiped often.

  2. Thanks!

    useSWR will only handle the read operations from the API. Create, Update and Delete you need to handle yourself, but you could easily extract this into a hook of your own or use the native fetch API.

    By default useSWR will set up a refreshInterval to refresh the local cache. This property is also configurable, so you can choose your own refreshInterval when you use the useSWR hook. In addition it will revalidate the cache on page focus and network connection by default, which means that you get a lot for free in terms of cache revalidation. In the case that you need to force a cache invalidation you’re provided with a mutate method that you can extract from the useSWR hook that will let useSWR know that something changed and you need to refetch immediately. As for the memory, I believe useSWR utilizes the browser cache instead of actually keeping it in memory.

  3. I’m sorry for being that guy, but claiming that state machines are inspired by Redux is such a backward thing to say. State machines have been around for decades, long before Dan Abramov and Andrew Clark were even born…

    If anything Redux is probably inspired from state machines, like the concept of Actions to move from one state to the other.

  4. Why on earth would you be sorry for pointing that out? Thanks for clarifying that obvious error, it was clumsily formulated. In fact, what I meant was that the library XState is reminiscent to redux to the point where you can actually plug in a reducer in xstate and have a state machine with createMachine. I did not mean to imply redux was the source of inspiration for state machines.

    Great catch!

  5. The way I see it, React has too many inconsistent ways to deal with state to begin with – hooks added even more new ways to deal with state, and still, new libraries and patterns keep cropping up. There are well over 50 state management libraries, any of which build around or on top of state management in React itself.

    In my view, this is all symptomatic of React having incomplete/inconsistent state management to begin with – something that does not seem to get fixed by inventing another pattern or yet another state management library; why else would there still be another idea cropping up every two weeks? It’s because it doesn’t work well, or doesn’t do what developers need or want.

    So why don’t they fix it? Well, they can’t, because ultimately that would be a breaking change – and probably a big one, since the problem is not just implementation details, but rather the fundamental concepts; if it were just implementation details, a library would have solved it by now.

    A fundamental design change would mean existing component libraries no longer work, at which point React is no longer really React, and the community would likely split into two. This is where programming languages and frameworks get stuck, time and again. They can adjust and adapt – but they can’t truly change.

    For an example of state management that actually works, see for example Sinuous – it has a single, consistent, very simple state mechanism that works equally well for local component state and global application state. Refactoring from one to the other literally is a matter of moving lines of code from one place to another. I’ve used it quite a bit, and never felt the need for any state management library or clever patterns – it just works.

    Just an example, but I don’t believe the problem is which library or pattern you choose. I believe the problem is inherent to React itself and the state concepts it embodies.

    1. One concept i can’t really wrap my brain around is state vs database storage.

      When you want to save the state in a database or a service like firebase, you have to deal with both fetching the data from the database as well as managing state client side.

      Do you still need a state manager in that case? Or can you do everything by fetching the required data within the component that needs it? Or only fetch the complete state at loadtime and then handle it all client side?

  6. none of the libraries do what i want, especially now everything I do is in Next or Remix, where complex state lives on the server.
    So i built this to do what I need, what do you think, can it replace the complex state management solutions we already have ?

Leave a Reply