DEV Community

Discussion on: Create a Snake clone with Hyperapp, part 1

biri profile image

Great work!
However, unless I am wrong, your updateSnake action is not pure (since it mutates the snake input and thus the state), which is not recommanded in hyperapp.
You can write a pure function like this.

const updateSnake = (snake, direction) => {
const head = {x: snake[0].x + SIZE * DIRECTIONS[direction].x,
y: snake[0].y + SIZE * DIRECTIONS[direction].y};
return [head].concat(snake).slice(0, -1);

avalander profile image
Avalander Author • Edited on

Thanks for the observation πŸ˜„

You are right that the function updateSnake is not pure because it mutates the snake, however, if you look at the action updateSnake, you'll see that it returns a shallow copy of the state, so hyperapp won't get confused (as far as I know, when you return the same state object the view is not updated, but there are no problems returning shallow copies).

const actions = {
    updateSnake: () => state => ({
        snake: updateSnake(state.snake, state.direction),

Maybe naming both the action and the function updateSnake was a poor choice, though.

I would definitely choose your update method over the naΓ―ve approach if I hadn't put it as an exercise for the reader at the end of the second part :)