Warning: This repo has been archived because a better more cleaner implementation of the event based re-render has been implemented with @preact/signals

Note: Please fork the repo if you wish to extend on this or use this instead. A final version of the same as been released in case people are using it.

@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