useState is a memoization technique and an abstraction to hide global state. You can do:
let _count = 0;
function Component() {
return (
{_count}
{ _count++; render(); }}>Increase
);
}
function render() {
React.render(, root)
}
Or you can abstract it:
let _count;
function useCount(initialValue) {
return [_count, (value) => { _count = value; render(); }]
}
function Component() {
const [count, setCount] = useCount(0);
return (
{count}
setCount(count + 1)}>Increase
);
}
And then generalize it and make each state dependent on the order of useState calls:
const states = [];
function useState(initialValue) {
const state = states.shift() || { value: initialValue }; // Pop or create
setTimeout(() => states.push(state), 0); // Defer the push
return [state.value, (value) => { state.value = value; render(); }];
}
function Component() {
const [count, setCount] = useState(0);
const [name, setName] = useState('World');
return (
{count}
setCount(count + 1)}>Increase
Hello {name}
setName(e.currentTarget.value)} />
);
}
Actual hooks also track the component that's being rendered, and don't just call the global render function, but that's pretty much the whole useState implementation.
Here's a codepen: https://codepen.io/lxe/pen/RwbXPKo