useReducerを使ってSection04を書き換えてみたら見事にハマった。。

・snakeの位置
・foodの位置
・fields
の３つをまとめてreducerのstateに保存して、dispatchをaction.typeで分けてみようとした↓
https://codesandbox.io/s/ancient-grass-f31ph?file=/src/App.js

foodを食べた後に新しいfoodが２つ出てしまう原因がわからなくて断念。。
非同期のfieldsの更新がうまくいってないっぽい・・・？

fieldsだけuseStateにして、stateが更新されたらfieldsを更新してレンダリングに変えたらうまく出来た。でもなんでかわからなくて、もやもやもや〜〜〜〜〜！！！
https://github.com/Fielsyuka/hooks-snake-game/blob/section04-fix/src/App.js