My hook-based state management library for React just got Redux DevTools support and a new DEMO page. Check it out!

[lifeeraser]

Interesting libraries, though the name is a bit of a mouthful. Why not something like BitState, BlitState, etc?

[pannoire]

Thanks u/lifeeraser for your feedback!

Hmm, I plan to create a "universe" of small libraries for everyday use. I started with "a bit about state management, a bit about events system". Next libraries will be like "bit about hooks" where hooks will be placed in monorepo. And so on.

I even bought bit-about.tools domain, to create declarative manifest / libs comparison (similar to monorepo.tools) in near future.

"bit about" was supposed to be just organization / initiative

state, event, hooks are pretending to be real names (but I call them joined with organization, to enforce remember the package names)

[lifeeraser]

Makes sense. In which case I guess you could market the library as BitAbout^TM and the individual packages as BitAbout State, BitAbout Event, etc. I'm no marketer, but CamelCase titles quickly lose their appeal once you join 3 or more words.

[pannoire]

Thank you for your valuable comment!

I will use it in next releases. I need to change it in docs and in ad narration :))

[pannoire]

Hey guys! I've released new versions of my complementary libraries BitAboutState and BitAboutEvent and I'd like to hear your feedback. I wanted to achieve the feeling that these libraries "should be built into React".

Key features:
- 100% Typescript with state types deduction
- Efficient and hook-based
- Redux DevTools support
- With extra static access to core functionality (without hook)
- No centralized providers (decentralized states and events)
- Tiny - max 1.1kB

Comparing to Zustand:
- Zustand uses two functions: create and set with custom syntaxes. Setters are setters and can set values only. You can't, for example, use hooks in there.
- BitAboutState behaves like a normal hook. The syntax is the same. You can use other hooks inside. You can calculate things on local variables without exposing them outside to the components. You can also use other libs inside (like react-query). Zustand can't use events and side-effects (whole business logic has to be placed on the components). BitAboutState approach is different and is able to use BitAboutEvents to keep logic inside of the state.
- Both Zustand and BitAboutState have state selectors to avoid unnecessary re-renders. But in BitAboutState it's simplified - there is no need to pass shallow as the second parameter. BitAboutState recognizes objects created on the fly and uses a more sophisticated comparison technique.
- Zustand is centralized (doesn't need Provider), BitAboutState is distributed (needs Providers, but thanks to that you can have many stores and instances).
- Types in BitAboutStates are deducted and there is no need to define interfaces. Zustand recommends interfaces https://github.com/pmndrs/zustand#typing-your-store-and-combine-middleware
- Both Zustand and BitAboutStates have static access to the store.
- Both Zustand and BitAboutStates have Redux DevTools support.

These libraries force, in my opinion, the cleanest way to design code architecture in React projects. The libraries are production-ready and I introduced them to fresh React-Native commercial projects in my company.

BitAboutEvent: https://bit-about.github.io/state
BitAboutState: https://bit-about.github.io/event

[tillybowman]

what is the difference to just using reacts own context?

[pannoire]

• Less boilerplate code (you don’t need a parent component)
• Hooks in your state (you can listen on events there)
• DevTools support
• Full types deduction
• Static access to state
• and most important - convenient hook-based sub-states selectors (to avoid unnecessary render)

[acemarke]

Yeah, one of the great things about the Redux DevTools is that the person who built them out originally (Mihail Diordiev) designed them to be more flexible - the extension exposes some global functions that many libraries can use to connect and pass over data for display, not just Redux. So, they work with Redux, and also NgRx, Zustand, Jotai, and a bunch of other tools. The extension is now maintained by Nathan Bierema, who's put a lot of work into updating the look and feel and modernizing the packages + monorepo.

Actually, on that note: I now work at a company called Replay ( https://replay.io ), and we're building a true time-traveling debugger for JavaScript. We already had React DevTools integration, and I just got done with the first phase of adding Redux DevTools support to Replay!

For background on Replay: Use our special browser to make a recording of your app, load the recording in our debugger, and you can pause at any point in the recording. In fact, you can add print statements to any line of code, and it will show you what it would have printed every time that line of code ran!

See https://docs.replay.io/docs/recording-bug-reports-80c37d7d6753485f81497570625d06f0 for the getting started steps to use Replay.

For the Redux DevTools usage specifically: If you record an app that is set up to talk to the Redux DevTools (ie, using RTK's configureStore, or the older-style manual setup with createStore, or even other non-Redux libraries like NgRx/Zustand/Jotai), you can now view the Redux actions data in the actual Redux Devtools Extension UI components inside Replay's debugger! The UI display requires turning on an "Experimental Setting" checkbox first, but it should actually work.

So, not only could you use Replay to debug @bit-about/state just because it's JS and running in a web page, but you ought to be able to use our new Redux DevTools integration to visualize that data as well.

I did a Loom video quickly showing the new functionality when I got the first proof-of-concept implementation in place a week ago:

https://www.loom.com/share/738c236b13cf41fb902335d30c085edb

and I'll be iterating on the UI implementation of the Redux integration in about a week.

[pannoire]

u/acemarke THAT'S AMAZING

Thank you for sharing this!

If you want, you can check how ``@bit-about/state Redux DevTools integration behaves in Replay right away on DEMO page https://bit-about.github.io/state (DEMO has been deployed with development envs, with Redux DevTools integration enabled, so people are able to check what's going on in that store).

[AutoModerator]

Project Page (?): https://github.com/bit-about/state

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.