@barelyhuman/mage

stateful + logical abstraction layer for react

Highlights

Tiny
0 Deps

Usage

Note: The library depends on valtio, so please install valtio as well
(ignore if already installed)

npm install @barelyhuman/mage valtio
# or
yarn add @barelyhuman/mage valtio
# or
pnpm add @barelyhuman/mage valtio

Quick Copy

import {createState, makeReactive} from '@barelyhuman/mage'

const state = createState({
	count: 0,
})

function inc() {
	state.count += 1
}

function CounterImpl() {
	return (
		<>
			<p>{state.count}</p>
			<button onClick={inc}>+</button>
		</>
	)
}

const Component = makeReactive(state)(CounterImpl)

export default Component

About

Note: This library isn't a mandatory requirement, most of what it does can
be done by using something like valtio or
jotai and maintaining local state in the component file
and not inside the component and side effects being thrown out of your head
and using manual action based triggers inside other actions. (how you'd write
normal javascript)

The reason for mage to exist was to abstract and block the usage of hooks in
functional components. This became necessary after libraries dropping support
for class based components and specifically writing stuff for hooks (I'm also
someone who's done this). So, this library is just to help you avoid writing
hooks by giving a better way to write just javascript in react

Hooks, inherently aren't bad but the usage abuse of everything having to be a
hook and libraries polluting this space ends up creating code where a functional
component has more hooks than it has rendering logic.

This also ends up with mix and match between hooks that aren't composable.

For example, custom hooks that use redux and then manipulated hooks that use
that redux state can cause a lot of re-renders, which can be avoided by using
refs and a bit of diffing logic but that's not supposed to be that
complicated.

This is where it's necessary for that abstraction to be taken up by a utility.

Docs

You can read more about the usage and API by checking the
docs/pages folder in the repo or by visiting the
web version →

Disclaimer

I have nothing against react, I like the library, I'm just not satisfied by the
direction of how things are done when using it, so this is a disciplinary
abstraction that forces you to write functional components as just that. A
function that returns a component based on props.

License

MIT

Mage