effector-react VS react-query

https://ngneat.github.io/elf/ https://effector.dev/

New API allows to setup each class independently. Proposal. It is based on browser API classList.

EffectorJS

https://effector.dev/ We use it on production in several projects

To understand this part of the article, it is better to read Effector’s documentation first. Effector has a game-changer feature — Fork API. To understand it, we should talk about one important concept — scope.

The issue with using eventemitter for state coordination is that when the UI grows into complexity you run into race conditions where some component isn't showing the right data because it got mounted too late or something somewhere up the hierarchy changed a key and the component got recreated and its state got lost.

I guess as long as long as the component hierarchy fits in your head, it is likely straightforward to reason about all the event interactions.

The lifted state model ala redux (and similar alternatives) doesn't suffer from this problem.

I personally prefer effector [1] these days because it combines the convenience of event emitter with multiple stores and you usually find yourself thinking much less about what changed the store causing my component to rerender much less often.

[1] https://effector.dev/

It’s worth noting that there is a thing called Effector and I have heard a lot of good stuff about it. Maybe you should give it a try and take a peek at its documentation as well.

Personally I'm finding Effector to be very useful for the kinds of projects I'm working on. It encourages small atomic stores which means you don't need selectors to avoid rerenders throughout the app. Effectors stores also handle updates from multiple dependent async effects and derived states really well.

This looks really cool to me and reminds me a lot of Effector, and looking at one of the open issues it seems that you are aware of it. Does this project have goals that specifically set it apart from Effector? You seem to lead with bundle size as a defining characteristic. Is that your long term goal? You seem to have plans to handle effects. How similar or different will that be from Effector?

I found effector[1] after I started looking around for a state manager which:

1. Either supported multiple stores or provides a way to subscribe to individual branches (as opposed to the entire store).

2. Had an action/event abstraction similar to redux where multiple branches (or multiple stores) could subscribe to the same action and update independently (and without knowledge of invoker).

I have been using it for some time and have had a good experience.

The core is framework agnostic (with additional integrations for react & vue).

I started used it with Svelte and its API matches the expectations of Svelte stores so you can use it without needing any additional integration, which was cool. Later I used it with lit-element through a 5 line custom integration and that worked pretty well too.

[1] https://github.com/effector/effector

see here Overview

Rapini is a new tool that can generate custom React Query hooks using OpenAPI (Swagger) files.

React Query is the gold standard for using async data declaratively with hooks. I ended up needing to modify even my simple useTimer hook to work more like useQuery to take multiple keys in order to work as an inner observable for other operators.

For most situations, I would recommend using a library like React Query. It handles a lot of common data-fetching boiler plate and already accounts for this useEffect() issue. Also, it supports Suspense if you want to use that.

At this point, I want to move on to the react-query cache management library. Give a brief overview and see how you can improve your developer experience with cache using this library.

There isn't the "service" concept in React. If you need to send off data you can just do so with fetch. If you need to load data and cache it so it can be used across components and unmounts, then something like react-query is what I'd recommend. But it's basically a combination of React Context, useEffect, and useState to manage the cache and lifecycle of a request.

react-query is pretty neat too. I default to that for most projects unless it's something unusual

Zodios also has some React Hooks. Behind the scene, Zodios is using react-query. You can also use your alias for hooks. They will be automatically prefixed with use. For example, alias getUsers can be used with useGetUsers hook.

tRPC is a built on top of react-query, which is a package for fetching, caching, and updating data without the need of any global state. We are also using zod for schema and input validations. You can also use other validation libraries like yup, Superstruct, etc. Read more.

I've written a fair amount about combining Storybook (SB), react-query (RQ), and Mock Service Worker (MSW) (see related posts below). I finally solved another piece of the puzzle for a better developer experience: forcing RQ queries to refetch after changing a control in SB that influences a response from MSW.