const ObjectCmp = () => {
const [state, setState] = React.useState({ k1: 1, k2: 2, k3: 3, k4: 4, k5: 5 });
return React.createElement('div', { onClick: () => setState({ ...state, k1: state.k1 + 1 }) }, [
React.createElement('input', { key: 0, value: state.k1 }),
React.createElement('input', { key: 1, value: state.k2 }),
React.createElement('input', { key: 2, value: state.k3 }),
React.createElement('input', { key: 3, value: state.k4 }),
React.createElement('input', { key: 4, value: state.k5 }),
]);
};
const LazyObject = () => {
const [state, setState] = React.useState(() => ({ k1: 1, k2: 2, k3: 3, k4: 4, k5: 5 }));
return React.createElement('div', { onClick: () => setState({ ...state, k1: state.k1 + 1 }) }, [
React.createElement('input', { key: 0, value: state.k1 }),
React.createElement('input', { key: 1, value: state.k2 }),
React.createElement('input', { key: 2, value: state.k3 }),
React.createElement('input', { key: 3, value: state.k4 }),
React.createElement('input', { key: 4, value: state.k5 }),
]);
};
const Atoms = () => {
const [k1, set1] = React.useState(1);
const [k2, set2] = React.useState(2);
const [k3, set3] = React.useState(3);
const [k4, set4] = React.useState(4);
const [k5, set5] = React.useState(5);
return React.createElement('div', { onClick: () => set1(k1 + 1) }, [
React.createElement('input', { key: 0, value: k1 }),
React.createElement('input', { key: 1, value: k2 }),
React.createElement('input', { key: 2, value: k3 }),
React.createElement('input', { key: 3, value: k4 }),
React.createElement('input', { key: 4, value: k5 }),
]);
}
const Stateless = () => {
return React.createElement('div', { onClick: () => {} }, [
React.createElement('input', { key: 0, value: 1 }),
React.createElement('input', { key: 1, value: 2 }),
React.createElement('input', { key: 2, value: 3 }),
React.createElement('input', { key: 3, value: 4 }),
React.createElement('input', { key: 4, value: 5 }),
]);
}