@dbeining/react-atom


Atom.of, useAtom, and swap will cover the vast majority of use cases.



Reducers? Actions? Thunks? Sagas? Nope, just swap(atom, state => newState).


useState is cool until you realize that in most cases it forces you to pass new function instances through props on every render because you usually need to wrap the setState function in another function. That makes it hard to take advantage of React.memo. For example:

---

`jsx
function Awkwardddd(props) {
const [name, setName] = useState("");
const [bigState, setBigState] = useState({ ...useYourImagination });

const updateName = evt => setName(evt.target.value);
const handleDidComplete = val => setBigState({ ...bigState, inner: val });

return (
<>



);
}
`

Every time input fires onChange, ExpensiveButMemoized has to re-render because handleDidComplete is not strictly equal (===) to the last instance passed down.

The React docs admit this is awkward and suggest using Context to work around it, because the alternative is super convoluted.

With react-atom, this problem doesn't even exist. You can define your update functions outside the component so they are referentially stable across renders.

`jsx
const state = Atom.of({ name, bigState: { ...useYourImagination } });

const updateName = ({ target }) => swap(state, prev => ({ ...prev, name: target.value }));

const handleDidComplete = val =>
swap(state, prev => ({
...prev,
bigState: { ...prev.bigState, inner: val }
}));

function SoSmoooooth(props) {
const { name, bigState } = useAtom(state);

return (
<>



);
}
`

`jsx
import React from "react";
import ReactDOM from "react-dom";
import { Atom, useAtom, swap } from "@dbeining/react-atom";

//------------------------ APP STATE ------------------------------//

const stateAtom = Atom.of({
count: 0,
text: "",
data: {
// ...just imagine
}
});

//------------------------ EFFECTS ------------------------------//

const increment = () =>
swap(stateAtom, state => ({
...state,
count: state.count + 1
}));

const decrement = () =>
swap(stateAtom, state => ({
...state,
count: state.count - 1
}));

const updateText = evt =>
swap(stateAtom, state => ({
...state,
text: evt.target.value
}));

const loadSomething = () =>
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(res => res.json())
.then(data => swap(stateAtom, state => ({ ...state, data })))
.catch(console.error);

//------------------------ COMPONENT ------------------------------//

export const App = () => {
const { count, data, text } = useAtom(stateAtom);

return (


ReactDOM.render(, document.getElementById("root"));
`