/**
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 ++
}