Counter Effect Cleaner

counter-2.jsx

// Counter.jsx
import * as React from 'react'
import { useCounterReducer } from './useCounterReducer'

const Counter = () => {
  const [[counter, effect], actions] = useCounterReducer();

  // Hooks ini hanya berfokus pada "side-effect" dari reducer di atas
  React.useEffect(() => {
    if (effect === 'INVALID_STATE') {
      alert('Ya akhi, nilai counter ndak boleh di bawah 0 😚');
    }

    // reset effect menjadi `undefined` kembali setelah menampilkan alert
    return action.resetEffect;
  }, [effect]);
  
  return (
    <div>
      <button onClick={actions.increment}>+</button>
      {counter}
      <button onClick={actions.decrement}>-</button>
    </div>
  )
}