/**
React Hooks
*/
const [count, setCount] = useState(0)
// memoized derived state
const plusOne = useMemo(() => count + 1, [count])
// side effects in lifecycle hooks
useEffect(() => console.log(pluOne), []);
// side effects reacting to changes
useEffect(() => console.log(plusOne), [plusOne])
// change state
function increment(){
setCount(count + 1)
}
/**
Vue Composition API
*/
const state = reactive ({count:0});
// memoized derived state
const plusOne = computed(() => state.count + 1);
// side effects in lifecycle hooks
onMounted(() => console.log(state.count))
// side effects in reaction to state change
watch(() => console.log(plusOne.value))
// change state
function increment() {
state.count++;
}
/**
Svelte 3
*/
let count = 0;
// memoized derived state
$: plusOne = count + 1
// side effects in lifecycle hooks
onMount(() => console.log(plusOne))
// side effects reacting to changes
$: console.log(plusOne)
// change state
function increment() {
count ++
}