useReducer: An Editor with Undo

import React, { useReducer } from 'react';

// 1. Define your initial state here
const initialState = {
  past: [],
  present: '',
  future: []
};

// 2. Implement the reducer function
function reducer(state, action) {
  const { past, present, future } = state;

  switch (action.type) {
    case 'SET_TEXT':
      // Tip: save present into past before changing it
      return state;

    case 'UNDO':
      // Tip: the new present comes from past
      return state;

    case 'REDO':
      return state;

    default:
      return state;
  }
}

export default function EditorWithMemory() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif', textAlign: 'center' }}>
      <h1>Editor with History</h1>

      <textarea
        value={state.present}
        onChange={(e) => dispatch({ type: 'SET_TEXT', payload: e.target.value })}
        rows="5"
        style={{ width: '100%', padding: '10px', fontSize: '1.2rem', boxSizing: 'border-box' }}
      />

      <div style={{ marginTop: '20px', display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button
          onClick={() => dispatch({ type: 'UNDO' })}
          disabled={state.past.length === 0}
        >
          Undo
        </button>

        <button
          onClick={() => dispatch({ type: 'REDO' })}
          disabled={state.future.length === 0}
        >
          Redo
        </button>
      </div>

      <div style={{ marginTop: '20px', color: '#888', fontSize: '0.9rem' }}>
        <p>Changes in history: {state.past.length}</p>
        <p>Changes to redo: {state.future.length}</p>
      </div>
    </div>
  );
}