Write local state using React Hooks and lift it up to React Context when needed. Protects against unncessary re-renders by isolating state variables into unique contexts.
No need to think about how to slice up your state for performance reasons initially. Write your state then ask for the properties you want when you need them.
Library is fully type safe with go to definition and find all references end to end.
MyState.useSelector()
that are relative to their provider and doesn't populate the global variable scope when referencing hook selector with intellisenseMyState.useSelector('counter', 'setCounter')
Basic Online Sample |
import React, { useState } from "react";
import yasml from "@thirtytech/yasml";
// 1️⃣ Create a custom function/hook as usual to store your state
function CounterState() {
const [count, setCount] = useState(0);
const increment = () => setCount((prevCount) => prevCount + 1);
return { count, increment };
}
// 2️⃣ Wrap your state with the yasml factory
const { Provider, useSelector } = yasml(CounterState);
function Button() {
// 3️⃣ Use context selector instead of custom hook
const { increment } = useSelector();
return <button onClick={increment}>+</button>;
}
function Count() {
// 4️⃣ Use context selector in other components
const { count } = useSelector();
return <span>{count}</span>;
}
function App() {
// 5️⃣ Wrap your components with Provider
return (
<Provider>
<Count />
<Button />
</Provider>
);
}
import React, { useState, useCallback } from "react";
import yasml from "@thirtytech/yasml";
// 1️⃣ Create a custom hook that receives props
function CounterState({ initialCount = 0 }) {
const [count, setCount] = useState(initialCount);
// 2️⃣ Wrap your updaters with useCallback or use dispatch from useReducer
const increment = useCallback(() => setCount((prev) => prev + prev), []);
return { count, increment };
}
// 3️⃣ Wrap your hook with the yasml factory splitting the values. Recommended to alias [Provider] for uniqueness
const { Provider: CounterProvider, useSelector } = yasml(CounterState);
function Button() {
// 4️⃣ Only the state variables you request will cause re-renders. Note: If only using updaters then no re-renders will be caused.
const { increment, count } = useSelector("increment", "count");
return <button onClick={increment}>+{count}</button>;
}
function Count() {
// 5️⃣ Use the state context in other components
const { count } = useSelector("count");
return <span>{count}</span>;
}
function App() {
// 6️⃣ Wrap your components with Provider passing props to your hook
return (
<CounterProvider initialCount={10}>
<Count />
<Button />
</CounterProvider>
);
}
npm:
npm i @thirtytech/yasml
pnpm:
pnpm add @thirtytech/yasml
yasml(StateFn)
YASML exports a single factory method. As parameters, it receives a single function StateFn
that returns an object. The factory will then return an object of { Provider, useSelector }
.
useValue
It's any custom hook:
import { useState } from "react";
import yasml from "@thirtytech/yasml";
const { Provider: CountProvider, useSelector: useCountContext } = yasml(() => {
const [count] = useState(0);
return count;
});
You can receive props in the custom hook function. They will be populated with <Provider />
:
const { Provider: CountProvider, useSelector } = yasml(
({ initialCount = 0 }) => {
const [count] = useState(initialCount);
return count;
}
);
function App() {
return <CountProvider initialCount={10}>...</CountProvider>;
}
The API of the containerized hook returns the same value(s) as the original, as long as it is a descendant of the Provider:
function Count() {
const { count } = useSelector();
console.log(count); // 10
}
Diego Haz for his work on the Constate library that was the original building block for yasml
If you find a bug, please create an issue providing instructions to reproduce it. It's always very appreciable if you find the time to fix it. In this case, please submit a PR.
If you're a beginner, it'll be a pleasure to help you contribute. You can start by reading the beginner's guide to contributing to a GitHub project.
When working on this codebase, please use pnpm
. Run pnpm examples
to run examples.
MIT © Jonathan Sheely