react-memento

react-memento

Step-through and rewind react state transitions.

import React from 'react';
import useMemento from 'react-memento';

function App() {
  const [count, setCount, memento] = useMemento(0, 'count');

  return (
    <button onClick={() => setCount(count + 1)}>{increment}</button>
    <p>{count}</p>

    {memento}
  );
}

useMemento maintains a similar api to react's state hook. In addition to the current value, and a setter, it provides a memento component to display the debugger UI. The function also accepts an optional label to identify multiple mementos rendered to the page.

unrelated - but i was listening to this architecture presentation by Neri&Hu while writing. i was struck by how beautiful the vernacular buildings are in Jiangnan China.