Differences between storing information as static function vs static object

Question

I'm not certain whether I'm phrasing the question right, but essentially I was following a tutorial where we needed a way to reset the state of a react class component to its initial state. I went ahead and implemented it by creating an object with initial values, and setting the component state to equal it:

// My implementation *****************************************
class Game extends React.Component {
  // store the initial state of the game
  static initialState = {
    selectedNumbers: [],
    numberOfStars: Game.randomNumber(),
    answerIsCorrect: null,
    usedNumbers: [],
    allowedRedraws: 5,
    doneStatus: ''
  }

  // set the React state to the initial state
  state = Game.initialState;

  // Reset the game.
  resetGame = () => {
    this.setState(Game.initialState);
  }
}
// ************************************************************

But when I kept watching the video, the tutor implemented it by making a static function that returned the object instead:

// Tutorial implementation ************************************`
class Game extends React.Component {
  // store the initial state of the game
  static initialState = () => ({
    selectedNumbers: [],
    numberOfStars: Game.randomNumber(),
    answerIsCorrect: null,
    usedNumbers: [],
    allowedRedraws: 5,
    doneStatus: ''
  })

  // set the React state to the initial state
  state = Game.initialState();

  // Reset the game.
  resetGame = () => {
    this.setState(Game.initialState);
  }
}
// ************************************************************

So my question is: Is there any difference between these two implementations that might be important? Or are they essentially identical?

I might be over thinking it, but I'm not sure whether there is some aspect to JavaScript or the way Reactjs handles states that might make the tutor's implementation better.

And as an aside, is there a good reason for these to be static? Wouldn't it better if they weren't, so that it would be easier to create different instances with different initial state values if I needed to?

The second variant always resets the game to a different state due to the random value of `numberOfStars` (`Game.randomNumber()` gets called each time `initialState()` is called). — le_m, Jan 19 '18 at 02:09

KevBot · Accepted Answer · 2018-01-19T02:17:59.970

1

Your second example is incorrect. You need to invoke Game.initialState which will then return a new object.

resetGame = () => {
    this.setState(Game.initialState());
}

At this point, the difference is that in example one, the initialState can be mutated accidently, and when the state is reset, you end up with an unintended initial state.

In example two, each time you call the function to create initial state, it recreates the object. Therefore, it makes it much more difficult to accidently mutate the game's reset object.

edited Jan 19 '18 at 02:17

answered Jan 19 '18 at 02:09

KevBot

17,900
5
50
68

I'm not sure that's right, unless its a quirk of https://jscomplete.com/repl/ . in their editor, the way I have written in the question works, even without the brackets. – Elstabbo Jan 19 '18 at 02:16
I copied both examples in, commenting the other out to test. – Elstabbo Jan 19 '18 at 02:17
Right, so basically it is to get around that JavaScript has no way to define static constants. e.g. https://stackoverflow.com/questions/32647215/declaring-static-constants-in-es6-classes Thanks mate. – Elstabbo Jan 19 '18 at 02:30

Differences between storing information as static function vs static object

1 Answers1