Local State

[curran]

In most cases, it makes sense to use unidirectional data flow like Redux to manage state at the root of a component tree (e.g. a stopwatch app). However, in certain cases it's useful to have local component state. In the React world, the utility of local state has been proven time and again, see this thread Question: How to choose between Redux's store and React's state? #1287.

For example a spinner. A spinner needs to use a timer to re-render itself as it spins. Also, the spinner is the only thing that will be using this timer, and its time elapsed (it "owns the datum"), so it doesn't make sense to put it in the state of the Redux store.

Therefore this library needs to have local state, similar to React's local state. Therefore it also needs to have lifecycle hooks, create and destroy.

Here's an API sketch for what local state could look like.

var spinner = d3.component("svg")
  .create(function (setState){
    setState({
      timer: d3.timer(function (elapsed){
        setState({
          elapsed: elapsed
        });
      })
    });
  })
  .render(function (selection, props, state){
    selection.call(spinnerWheel)
      .select("g")
        .attr("transform", "rotate(" + state.elapsed*props.speed + ")");
  }
  .destroy(function(state){
    state.timer.stop();
  });

More motivation for renaming d to props.